Static Website Generators: Brief Introduction

Even in 2020 many developers are used to spinning up a WordPress (or similar software) for content websites. Until recently I've been one of these developers. I was willing to develop a website using technology to get done what I could get done without. My choice of framework wouldn't have been WordPress, but at the end the result is the same: building a system to deliver what a static publishing software could have handled easily. In many cases it simply isn't worth the effort to set up, configure and maintain a fully fledged content management system and store content in a database.

What is a Static Site Generator?

A static site generator (also called static publisher) is a program, that generates a complete website as an output. The generation can either be done locally on your computer or on a web server during deployment. The website is then served through your web server — just like the old ’n’ days.

Content is typically written in a template language like Markdown or Liquid. This allows you to concentrate on your writing and ignore the layout and styling of your content. Some static generators allow you to mix and match your templates using PugJS, Markdown and others at the same time. Being a statically generated website, you'll have your content in a readable format on your computer available at any time. Should you wish to re-use it or re-publish this means very effort finding and reworking your own content.

As no database (besides the file system) is used no SQL or extracting addons/plugins are used. This makes your website deployment more stable and robust. With GitHub and co. you can also edit your website on the go and deploy simply by committing new content.

Why using a Static Site Generator?

There is a number of good reasons for a static site generator over a traditional CMS-approach:

• Security: There is no database or backend application. This reduces surface for attacks and therefore makes your security excellent 🔐️
  
• Performance: As no backend application is serving your site less memory and CPU are used — your website stays up longer under heavy load 💪️
  
• Backed up by default: You will always have a copy of your content separated from the web-server (usually in git). This ensures your site is very easily replicable in case the server hard disks fail and your live site goes offline.
  
• Easy to move: Migrate your website to another hosting company without much pain: push the output (HTML, CSS, JavaScript) onto the new server and re-configure the DNS and you are all set.
  
• Easily choose website hosting: You don't have to worry supported technology or PHP/Python/Ruby versions, because you only need to serve static contents.
  
• Even not a major issue anymore, still the hosting for static sites is generally cheaper. Mostly it's free: With Netlify and GitLab, GitHub you get static hosting for free.

What are the limitations and what workarounds are there?

As with any technology, there are cases where it's more suitable and useful than others. Same goes for static site generators of course. Here are some cases where you might want to consider a different approach. For most issues, there is a simple workaround nowadays. Conveniently suggestions for these workarounds are listed with the issues below.

• User input is required: User input with forms (for example contact forms) was originally a limitation for static publishing. By now, this has changed with super simple solutions as Netlify Forms, FormSpree and getsimpleform.com. All these services allow you to collect information from your visitors by submitting your form to a prepared endpoint. If your site requires complex multi-step forms you might want to break them up or build a custom endpoint to submit the data.
  
• Content management system: Not everyone is keen on using their editor as a place to write. Many people still want the classic "logging into a website and publishing an article". As with the user forms, content management systems didn't exist until a few years ago. With Netlify CMS, Forestry and Contentful you got multiple great solutions to choose from.

Most limitations can be avoided or mitigated by having a clear separation of your frontend and backend. This allows you to consider hosting your frontend as a static site and doing the heavy lifting on the backend (if needed at all).

Which Static Site Generator should I choose?

There are many static site generators out there to select from. Your decision depends more on preference for frameworks than technical differences. My personal favourites are:

• Eleventy: Very simple and straight forward. You can get started with Eleventy in a few minutes. Supports pug, markdown and of course plain HTML by default. My blog, peterthaleikis.com, website is based on the Eleventy starter by Dan Urbanowicz. An alternative would be the website starter called Hylia by Andy Bell.
  
• Nuxt.JS: Nuxt.JS is a no-configuration framework based on the idea of NextJS and VueJS. You can write your complete website in VueJS components. Check out the getting started video for Nuxt in just over one minute.
  
• VuePress: VuePress is a Vue.js powered static site generator which combines the power of Vue with server-side rendering (SSR). Markdown is the language of choice here. After compiling you will get a single-page app. Comes with extensive and detailed documentation.

Final Thoughts

I’ve found the main advantage of using a static site generator to be the ease of getting things up and running. The effort for set up and configuration is very low. You can get started writing the same day. It's stable and scales very well — perfect for production websites. Using a static generator is highly recommended and has suited my needs and skills perfectly. This being said, I'm sure non-devs will find their way around as well. Some understanding of HTML and CSS is recommended for any online project you are doing at the end. I encourage you to look around, try a few static site generators out to find the one that best suits your needs.

Previously published on https://peterthaleikis.com/posts/introduction-to-static-site-generators/.