by Peter Thaleikis
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.
2020 is the year of the static generator. Get your blog started today! https://peterthaleikis.com/posts/introduction-to-static-site-generators/
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 webserver 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 filesystem) 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?
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 webserver (usually in git). This ensures your site is very easily replicable in case the server harddisks 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 favorites 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. This 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. If you need support consider reaching out to my development company. I'm providing a range of services with a focus on CMS and application development.
Did you like this article?
Besides tones of crap, the web also has lots interesting open-source libraries, actually innovative side-projects and awesome free knowledge. Once in a while, I share these awesome web-findings via email. If this sounds like something you are into, subscribe below:
Published under the following tags: JAMStack