The Top 6 Static Site Generators in 2022
More and more web developers are looking to get started with the modern web development approach. With this comes the never-ending search for the best static site generators (SSGs).
Architectures like Jamstack offer many options and aren't prescriptive about the tools you should choose. One of the leading factors developers have in mind when selecting their stack is the ability to build fast web pages.
To achieve fast loading speed, you had to say goodbye to dynamic content. Nowadays, you can build a static site with dynamic content. With the rise of Jamstack, many static site generators have emerged, but choosing one might be a task on its own.
In this article, we’ll explore the best SSGs to use in 2022, but first, let’s explore what they are.
Here’s what we’ll cover:
What is a Static Site Generator (SSG)?
A static website generator is a simple markup that uses a language like Markdown or HTML, data (in JSON, YAML, or TOML format), and templates. It combines them with tools like Handlebars, Liquid, or Nunjucks to generate the pages of a website.
This is similar to any dynamic web programming language like PHP, for example, but the key difference is that this is done at build time rather than on the server in response to each page request. This is why we call them static site generators since the assets they create (i.e., the ones we will deploy) are all static.
Static site generators can be built in just about any language. In fact, there probably is one that already exists, built in any language that you can think of. The ones we'll discuss here are built-in languages like Ruby, Go, and JavaScript. However, the importance of the underlying language of an SSG can be overstated. For example, Jekyll is written in Ruby, but it is unlikely you'll ever write any Ruby when using it (unless you have specific needs requiring a new plugin). So, while the language a tool uses is worth considering, it should rarely be the primary consideration.
There are two broad types of modern static site generators.
Traditional static site generators: They are not prescriptive on how the frontend of your site is built. Their job is simply to generate the HTML, CSS, and JavaScript assets, not to dictate how they are built.
JavaScript static site generators: They are built using a JavaScript framework like React, Vue, or Angular. In these cases, the SSG still generates static assets, but those use the prescribed frontend framework and may generate content at build time or load it client-side at runtime as in a typical single page application (SPA).
What is a static site?
A static site is a pre-built HTML, CSS, and JavaScript website. It’s pre-rendered on the server-side and then served to the browser, making it fast to load. The opposite approach is the more traditional dynamic webpage that is rendered every time it is requested by the client.
One key difference between static and dynamic websites is that, with the static site, the data served to the client will always be the same.
Should you use a static site generator?
If speed and reliability are your primary concerns, you should use a static site generator. However, if you’re building a highly dynamic website that needs to display almost real-time updates, then a static website is probably not your best option.
With that being said, here are the advantages of using an SSG:
Speed
By default, static assets are faster than server-rendered assets because there is no application server involved in generating pages and no database. Add to that the fact that static assets can be served on the edge via a CDN rather than a traditional web server, and you have all the ingredients for a speedy and SEO-optimized site.
Keep in mind that static assets alone don't make your site inevitably fast. Developers can still overuse client-side JavaScript or use poorly optimized images and end up with a poorly performing site. Still, a well-built site that uses a static site generator has everything going in its favor to be blazing fast.
Security and reliability
No site is perfectly secure, but static assets offer very few attack vectors. There is no database to hack and no application server to compromise. By running at the edge on a CDN, there isn't even a single web server one could gain access to.
Static sites don't go down like traditional server-side applications. There's no database connection to fail and no runtime error on the server. Even if a new build fails, the site remains up with the prior assets. If your site sees a sudden rush of traffic, static assets scale by default.
Dynamic content
Static websites can be incredibly dynamic by leveraging APIs and services both at build time and on the client-side to accomplish nearly anything a server-side application can.
By default, static site generators are all about dynamic content. This is literally what they were created for, just at build time rather than run time. This content can come from file-based data in JSON, YAML, or Markdown, but it can also come from an API.
In many cases, the static site generator produces a complete single-page application (SPA) that is just as dynamic as any other modern web application. For those dynamic aspects of a site that can’t be handled at build time, there's client-side JavaScript.
Here are examples of services available for various dynamic features:
AWS Lambda & Azure functions for backend functions
Netlify for identity, forms, and backend functions
Auth0 for identity
Algolia for search
Snipcart for e-commerce
Staticman for user-generated content
Here’s a list of the services available.
Cost-effective
Using a static site generator is a more cost-effective way of building a website. Since you’re serving static assets to your clients, you don’t need to maintain an expensive database. In addition, hosting a static site is normally really inexpensive or even free with options like Vercel and Netlify.
Editor note: See how you can integrate comments to your static site here.
The best static site generators in 2022
What's become clear in the world of static site generators is that JavaScript has taken over. Four of the six options we'll cover here are JavaScript-based. In most cases, these leverage a JavaScript framework. But, it's important to emphasize there are plenty of options for anyone who doesn't want to:
Use a JavaScript framework (or doesn't want the SSG to be prescriptive of it)
Use JavaScript to develop their Jamstack site (at least on the build side)
Next.js
Calling Next.js a static site generator is a bit misleading. Next.js is a React-based web framework that can be used for building completely server-side web applications rendered (SSR), statically pre-rendered (i.e., SSG), or even hybrid SSG/SSR applications. Next.js offers a variety of built-in tools for routing, state, code-splitting, and more that make it easier to build a React SPA.
Throughout 2020, the features in Next.js around both the SSG and hybrid SSG/SSR expanded considerably. This began with several 9.x releases that culminated in the release of Next.js 10. The latest release, Next 12, comes with faster builds and refreshes thanks to the new Rust compiler. It also introduced Middleware, enabling you to change the response to a client request before it is completed.
Next.js emphasis on hybrid SSG/SSR applications is also driving a debate in the Jamstack community over what defines Jamstack. Even Vercel, the company behind Next.js, has decidedly moved away from the Jamstack term. And their competitor Netlify now offers the ability to run hybrid SSG/SSR apps via their next-on-netlify plugin.
Learning Next:
Nuxt.js
As the name might imply, Nuxt.js has a lot of similarities to Next.js, with the glaring difference being that it uses Vue instead of React. For similar reasons as Next.js, it would also be misleading to refer to it as purely a static site generator as Nuxt can function as either an SSR framework for building SPAs or as an SSG. In the past years, Nuxt.js made some significant improvements to its SSG offering. They introduced full static mode, which allows you to target an entire site as static and adds build and payload improvements aimed explicitly at static apps.
Building upon those improvements, Nuxt also improved its static build time by allowing builds to be generated off a build cache only when content has changed. This can yield dramatic decreases in build times wherever you deploy your app.
Nuxt.js 3 is currently in beta and scheduled for release in June 2022. This version will take advantage of Vue 3 and come in a lighter package, an optimized cold start with dynamic code-splitting, a new bundler called Vite, and hybrid SSG/SSR to compete with Next.js.
Learning Nuxt:
Gatsby
I would argue that no SSG has been more influential since the launch of Jamstack in 2015 than Gatbsy. The SSG, which is React-based, ushered in the era of JavaScript-framework-based SSGs that now seems to dominate the Jamstack space. It also helped popularize the use of GraphQL for data in Jamstack applications and introduced a community-driven plugin architecture whose success other SSGs still try to emulate.
One of Gatsby's biggest complaints was the build times, something they have worked hard to address this past year by launching incremental builds. This feature is supported on Gatsby's own Gatsby Cloud offering and via services like Netlify, and it can reduce build times to mere seconds in many cases. Their recent release also supports server-side rendering.
Gatsby has always been an entry point into the Jamstack for new developers. They continued to enhance features for new developers, including the launch of Gatsby Recipes, which are prebuilt solutions for common problems. These offer both the code and provision the necessary resources for you. As you might expect, this also includes the ability for the community to contribute their own recipes.
Learning Gatsby:
Eleventy
Eleventy garnered a ton of attention over the past year by positioning itself as the antithesis of the framework-based SSGs and focusing heavily on performance. Eleventy is unique because, while it is JavaScript-based, it follows the more traditional SSG model of providing tools for generating static assets from data and templates while not being prescriptive in any way about using a front-end framework. Even Mozilla adopted Eleventy for sites like the Firefox extension documentation and the new version of MDN.
Eleventy's approach combines the simplicity of other traditional SSGs like Jekyll or Hugo with the popularity of JavaScript. It’s also bringing in the ease of working with data from external APIs that are a highlight of the framework-based SSGs.
As with any traditional SSG, the lack of a prescriptive framework doesn't mean that you can't leverage one. For example, you can leverage the aspects of a framework without requiring using one on the frontend. Netlify did so in their Netlify.com redesign that used Vue components in Eleventy at build time.
11ty also released a plugin for SSR and deferred rendering named Eleventy Serverless. It’s also worth noting that Netlify is now supporting Zach Leatherman to work full-time on the SSG.
Learning Eleventy:
Hugo
Hugo is a "traditional" open-source SSG built-in Go created back in 2013. By traditional, I mean that, like Eleventy, it focuses on providing the tools to generate full static sites without any prescription on how they are built (i.e., no frontend framework). Hugo's biggest differentiator has always been its build time. Being built in Go means that Hugo is incredibly fast, often completing milliseconds.
Over the past year, a number of improvements have been made to Hugo that continue to modernize how applications are built using it. Many of these features improved Hugo's asset-building system, making it easier to use modern tools and processes like PostCSS, npm, and JavaScript bundling. Improvements included adding a native JavaScript bundling that supports import support, JSX transpilation, and TypeScript support. Other releases included improved PostCSS support and npm pack, which combines npm packages across the project, including themes and modules.
Learning Hugo:
Jekyll
Jekyll is a Ruby-based static site generator that popularized the entire concept of an SSG. GitHub co-founder Tom Preston-Werner originally created it in 2008. It gained a lot of popularity in part by being supported in GitHub Pages, which ran Jekyll's build process when a change was checked into GitHub - a process that has since become pretty much standard. Jekyll is a "traditional" SSG like Hugo and Eleventy. While it can create just about any kind of site, it continues to be more "blog-centric" by making it extremely easy to launch a static blog.
Jekyll 4.0, released in 2019, addressed the issue of long build times in Jekyll. They’ve not released any major version since, but they’re continually releasing bug fixes to improve the tool.
Learning Jekyll:
Emerging SSGs to consider
Astro
Astro is an open-source SSG. It aims to reduce the use of JavaScript when building applications. The JavaScript interactive components are rendered into pre-built HTML pages without any extra JavaScript.
SvelteKit
Just like Next.js, it would be misleading to call SvelteKit an SSG. This framework uses Svelte to build fast apps and focus on progressive enhancement and the initial load experience.
Bridgetown
Bridgetown started as a fork of Jekyll that aims to bring modern web development tools and practices like the use of Webpack, PostCSS, and npm. They’ve just released their v1.
VuePress
VuePress is another Vue-based static website generator that is built by the Vue.js team itself. It aims for a minimal setup time and focuses on Markdown content.
Scully
Scully was the first Angular-based SSG when it was released in late 2019. It focuses on making building, testing, and deploying apps extremely easy.
Closing Thoughts
There are no hard and fast rules for picking an SSG. It really depends upon the personal preference of you and your development team.
However, a few questions might help with your final choice:
Do you require a hybrid statically rendered and server-side rendered (SSR) site?
Do you want to use a prescribed frontend framework?
How important is build time?
What type of project are you creating?
Is the language you’ll be using important to you?
The good news is that there are solutions that can fit just about any preference. It's incredibly easy to get started. You can typically build an entire example site from scratch in an afternoon and get a good feel for how a specific SSG works.
Let me know in the comments if you have tried any of these SSGs and what are your thoughts about them.
