Published
The 7 best static site generators of 2022
Joe Holmes
Software Developer and Technical Writer
One of the most popular web development architectures in use today is static site generation, or SSG. Fast, powerful, and fun to use, SSGs have become a go-to solution for developers. Curious about the SSG craze and which one is best for your use case? In this article, we'll break down the most popular SSGs and offer our recommendations for a few different problem spaces.
First of all, let's get clear on our terms. You already know what a static site is: the simplest presentation of web content, static sites serve HTML styled with CSS. In contrast to dynamic sites, they don't change much in response to user interaction. A static site is just a collection of basic documents that load fast and display information. While some light JavaScript might be applied, it won't play a central role.
Because these sites use the most basic languages of web development, they're easily coded by hand. Even with light JS, an amateur coder can custom-build a static site in a matter of days. In the early days of the internet, most sites were static, handcrafted labors of love.
As you can probably imagine, a handwritten static site is not very easy to scale. Adding the first few pages might be painless, but as the site continues to grow, firing up your IDE and coding the entire document from scratch quickly becomes infeasible. Say you wanted to create a blog–are you going to write out the following code every time you need to make a new post?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blog Post #472</title>
</head>
<body>
Welcome back to my blog. In this post, I'll talk about my favorite…
</body>
</html>Of course not. You need the computer to help you automate this process.
What if, instead of writing out static files by hand, you created a machine that could spit out those files for you? Then you could build a complete static site simply by pressing a button. Tweak a few settings, push the button again, and the machine would spit out a different site.
If you were to use this machine to write a blog, you'd drop a text file into the machine and it'd know how to convert the file into an HTML and CSS document that stylistically fit in with the rest of your site. In this way, you could spare yourself the tedium of writing HTML and CSS yourself.
Think of the transition to the printing press in the 15th century. Before its invention, anyone who wanted to write a book needed to carefully write each copy out by hand. The printing press enabled printers to produce many copies of books at once, without manual work.
A static site generator is like a printing press for websites. You write code within the generator, and when you tell it to build, a fresh collection of static files arrives, ready to be served as your website. As an automated website creator, SSGs can replicate several features of dynamic sites (such as the frequent updates of a blog), so that the user doesn’t need to code elaborate, heavy client-side JavaScript. Instead, a new, up-to-date version of the website is built every time.The new website contains mostly HTML and CSS. Pages on this site load very quickly in the browser and are safer than more JS-heavy sites, since there are fewer opportunities for attackers to enter (a concept in cybersecurity known as "attack surface").
Most developers find SSG architectures straightforward and easy to work with–a luxury compared to wrangling more complex systems. SSGs have become increasingly popular in the web development community, and as a result, a wide variety of SSG architectures have proliferated.
As the popularity of static site generation skyrocketed, different frameworks arrived to fill different niches and use cases. Broadly conceived, these types of SSGs can be split into two categories: basic SSGs are built for low-maintenance sites with frequently-updated content that's nonetheless non-interactive. For instance, documentation sites, blogs, or knowledge bases are good use cases for basic SSGs.
App-like SSGs are for more advanced use cases, where purely static pages are intertwined with more complex systems such as user authentication, sales funnels, and bespoke, interactive content. These SSGs complement other, more complicated software architectures well, so developers can easily incorporate them into bigger projects. Almost anything that involves static pages alongside dynamic content can benefit from generating its static pages via SSG.
In both cases, the front-end can be connected to a headless CMS: a decoupled content back-end that serves an API the front-end can consume. With such a set-up, a developer can enjoy a CMS experience while still serving purely static files.
This type of architecture is commonly referred to as the JAMStack. Short for Javascript, APIs, and Markup (the three building blocks of JAMStack sites), the JAMStack is an innovative approach to web development that makes it easier to build simpler, safer, and faster sites. The synergy of SSGs and headless CMS platforms plays a key role in JAMStack architectures.
If your use case is for a simple, content-focused site like a plain blog or software documentation, you've got plenty of choices in SSGs. Below are our top picks.
A lightweight, powerful SSG written in Golang, the fast, multi-threaded language from Google, Hugo is our choice for the best basic SSG. Working directly with easy-to-use Markdown documents and simple Go shortcodes, Hugo can build giant static sites in a fraction of the time it takes competitors.
Even if you don't know Go, Hugo is not especially demanding–you can comfortably learn enough to build a site within a day. The Go is mostly used under the hood to make Hugo's build times tiny. Its taxonomy system can be used to model complex knowledge relationships, which means you can tag and categorize your content to your heart's content. And its shortcodes are expressive, which give you a lot of flexibility in designing and styling the site's UI. For these reasons, Hugo is generally a great choice for blogs, docs, or other websites made exclusively of static files.
Are you a new web developer hungry to get more practice with JavaScript? Or perhaps you love well-crafted, customizable tools and have creative ideas for your website? Eleventy is a fun, developer-friendly SSG written entirely in vanilla JavaScript.
Eleventy can compile a huge variety of templating systems into the same build. Liquid, Nunjucks, Handlebars, and Pug templating languages, to name a few, are all accessible within the exact same Eleventy project. Thanks to this flexibility, Eleventy is a great choice for someone looking to tinker and experiment, as well as for web development beginners.
With Python’s characteristic concision and efficiency, Pelican offers developers an impressively full-featured SSG. Write in markdown, build and rebuild your site with a simple CLI tool, and enjoy comments, RSS support, and easy integrations to boot.
Pelican is a great choice if you love writing Python code and are looking for a basic SSG with modern features–particularly the ability to pull data in from Wordpress.
At the frontiers of web development, app frameworks now employ many of the same strategies as basic SSGs. Adding a build step for apps permits best practices like code splitting and other forms of optimization, and the rendered static content is as fast and simple as possible (a big draw for large, agile teams.) Bear in mind these tools take longer to learn than basic SSGs and require more advanced knowledge of software engineering.
While basic SSGs come in a variety of programming languages, app-like SSGs are almost exclusively written in JavaScript. However, there is quite a variety of front-end JS frameworks to choose from when selecting an app-like SSG. The leading app-like SSGs we've selected below are designed for use with React, Svelte, and Vue, respectively.
An innovative and dynamic blend of server-side rendering, static site generation, and other build tools (incremental static regeneration, anyone?), Next.js is hands-down the most popular app-like SSG framework on today's market.
Written for React developers, Next.js represents a powerful improvement on previous-gen React frameworks like Create React App. Through its use of the `getStaticProps()` function, Next.js allows developers to pull data in from a variety of sources to be statically assembled at build time–all the functionality of the basic SSGs, but with top flight support for serverless API routes, server-side rendering of dynamic content, and other complex features of app development. And by connecting a headless CMS to a Next.js app, you can have a functional content back-end in minutes.
React-based SSG Gatsby, is a solid choice for a wide variety of basic and app-like websites. In many ways, Gatsby proved the viability of using React-based SSG for the majority of projects in modern front-end web development–and to top it off, Gatsby does so with a deeply developer-friendly experience.
Through the savvy use of plugins, Gatsby enables developers to pull in dynamic content for their static sites in only a few lines of code. Gatsby also includes a data layer written in GraphQL that unifies your site's data fetching operations, as well as Reactive Site Generation (RSG) that can update your site with new content in seconds.
Built for (you guessed it) the Svelte JS framework, SvelteKit is Svelte's answer to Next.js's dominant paradigm. Because Svelte is a compiler of JavaScript, its finished code is smaller and faster than React on average. For this reason, in many cases Svelte apps load more quickly in the browser than React apps do. So while SvelteKit is still much younger in the development cycle, and will have fewer features and opportunities for support than the mature Next.js ecosystem, an enterprising developer looking to stay ahead of the curve would be well-served by learning how it works.
Using SvelteKit for SSG is as easy as running an adapter and choosing static files for your output. With support for file-and folder-based routing, as well as the ability to run server-side code, you won't lack for the latest and greatest tooling. In addition, you will be able to generate your static sites using Svelte's innovative and simple syntax in your components.
The best-in-class app-like SSG for Vue, Nuxt.js also takes many of its cues from the Next.js ecosystem but adapts them for use with the Vue framework. Putting developer experience first, Nuxt offers a zero-config initialization and sensible defaults with strong naming and folder conventions, making teamwork easier than it might be in more open-ended tools.
Nuxt offers many of the same features as its competitors: file-based routing systems, code-splitting, worry-free data fetching at build time, and the ability to swap between static and server side rendering. It's the standout choice for Vue developers.
- Static site generators (SSGs) are like the printing press to static site's handwritten book; by building a tool that can spit out a clean website of HTML and CSS, SSGs enable dynamic, rapidly updated websites to benefit from the blazing speed and simplicity of static files.
- There are two types of SSGs: those that enable basic, content-driven sites such as standalone blogs or product documentation, and those that build static content interwoven with the features of modern app frameworks.
- The leading basic SSG is Hugo, written in Google's Go programming language and renowned for its incredible build speed; the leading app-like SSG is Next.js, which dominates the current web development landscape. Other SSGs exist for a variety of programming languages and use cases, such as Pelican for Python and SvelteKit for Svelte.
Sanity: built for SSGs
A next-gen headless content platform, Sanity is a robust decoupled back end optimized for seamless integration with SSG-built sites. Enjoy best-in-class developer experience and a product built from the ground up with SSG-friendly content modeling in mind.