WTF is a Static Site Generator?

A static site generator (SSG) is an invaluable tool when it comes to building Jamstack websites. In fact, the Jamstack was founded in large part around the abilities presented by static site generators.

Although SSGs have gotten hugely popular in the last few years, they have been around for a long time. And that's because they serve a fundamental productivity boost to developers building for the web.

Your browser — as powerful as it may be — is really only focused on doing one thing: rendering web pages. And to do that, it requests and parses HTML, CSS, and JavaScript files. It then uses those files it has retrieved to render something usable to you on your screen. This is often styled text with some interactivity, along with rich media like images, videos, and audio files.

In other words, when you type in a URL in your browser, you are getting parsed HTML that is specific to that URL.

While we can certainly build websites the way they are viewed — that is, one file at a time with big chunks of CSS and JS to support — it's super inefficient and prone to errors. There are a few reasons for that:

1. Most websites have elements that are shared among multiple pages and it's a waste of time to duplicate them.
2. Writing the same content in multiple locations increases the likelihood for errors in one of those places.
3. Authoring content within HTML code is not fun. And it's easy to mess up the structure of the page in the process.
4. Our data often lives in more than one and that place is usually some other application. It doesn't really make sense to duplicate for our website if we could bring it in directly.

Static site generators offer a way around these issues by providing a mechanism for building sites efficiently and accurately.

The SSG Build Process

The power of a static site generator is all in its build process. That usually means we run some command on the command line and the SSG turns our work into something the web can use.

A typical pattern for an SSG looks something like this:

1. Our data (i.e. content) often exists in multiple, external locations. If it does, the first thing we do is retrieve that content so we can work with it. That might mean writing it to file or storing it in memory during the build process.
2. It then uses some templating engine and asset pipeline to stitch together fragmented files into HTML, CSS, JS, and other assets that the web can read.
3. What we're left with is a set of static files, which we can then upload to a web-ready file server, and we have ourselves a website!

What this means is we now have the power to write code efficiently, while bringing in content from all over the web.

SSG Resources

This just scratches the surface, as is the intention with all my WTF posts. There's much more to explore in this space if you're not familiar with it. There are many more benefits to using a SSG today, especially when following the Jamstack pattern.

Here are solid trusted resources that may be useful further reading for you:

• The Jamstack community's list of open source SSGs (there are 325 at the time of writing this)
• What is a Static Site Generator? How do I find the best one to use? from Phil Hawksworth and Netlify
• How to Choose Your Static Site Generator from Brian Rinaldi and Stackbit

Of course, if you have any other questions, I'm always up for a chat.