Static site generators are fantastic tools to use when making a personal website. Don’t know what a static site generator is? No problem. Read Netlify’s post explaining what they are.
While static site generators are powerful, choosing one can be difficult. There are hundreds out there, and more are cropping up all the time. Here’s a guide on how to pick one.
First, if you haven’t already, then read Where to build and host your personal website. Two of the guiding principles from the beginning are worth repeating here:
Given these principles, I’d like to add a few more principles specific to this domain.
There will be a learning process when you pick up a new static site generator, just like any other tool. Therefore, reducing the number of other new things you need to learn will speed up the process. For example, if you don’t already know React, then choosing a React-based static site generator will mean you’ll not only be learning that particular static site generator, but you’ll also need to learn React.
While creating your site, you’ll inevitably hit some roadblocks. Usually, documentation can get you past them. Occasionally though, you’ll need some help from someone with more experience.
Some static site generators have been around for more than a decade. While they may not have a thriving community anymore, there is a wealth of knowledge on blogs, Stackoverflow, and the like.
With newer static site generators, some have large, thriving communities. So while you may not find as many answers through searching the web, you’ll be able to ask questions on official gathering places like Github, Slack, and Discord.
The folks at Netlify have been maintaining a list of static site generators for more than a decade. Formerly hosted at staticgen.com, it can now be found on jamstack.org. The list currently features more than three hundred generators, though there are undoubtedly many others not listed.
The list can be narrowed by languages, license, and template and sorted by name or Github stars. Language, license, and template are not particularly useful to know for most people. We can ignore those for now.
The list is sorted by Github stars by default. This measure of popularity is a good way of narrowing down a long list. Let’s take the top thirty options and then narrow down from there.
First, we want to remove any options that aren’t explicitly targeted at static websites. Let’s remove Slate, Docusaurus, GitBook, VuePress, Doscify, MkDocs, mdBook, and Sphinx since these are used primarily for creating developer documentation. Let’s remove UmiJS and React Static since these are used to make web apps.
The next step is to remove any that aren’t in English. That removes Gridea.
Next, in the spirit of finding a project with plenty of support, let’s remove dead projects. You can usually judge whether a project is dead or not by looking at its Git history. Often projects haven’t had a commit in years or only receive the occasional security update. Removing dead projects takes out Metalsmith, Brunch, Middleman, Harp, Expose, and Assemble. You may like one of those options we just removed. If so, go for it and use it!
On a similar note, Jekyll, Hexo, and Pelican are all quite popular but not very active. These mature projects have been around for some time, so you will find many tutorials and blog posts to guide you on your way. I’ll be removing them from the list since there are some newer, stable alternatives with thriving communities.
What makes Hugo interesting is the install process. Unlike many others, Hugo is a single binary that you download and run much like another app. It’s written in Go and is blazing fast. The theme system makes it dead easy to get started. I’ll warn you that I’ve seen reports of people having trouble with broken themes, but they seem to be in the minority.
Similar to Hugo, Zola is another single binary static site generator, this time written in Rust. Just like Hugo was written by a dev frustrated with Jekyll, Zola was written by a dev frustrated by Hugo.
Gatsby is designed to transform any type of content into pages using a GraphQL middle layer that bridges the source content and templates. Its extensive plugin library and excellent support for image resizing are why I continue to use it to create this blog.
Next squarely targets web apps. It was built around a few principles, including simple configuration, code-splitting, and server rendering. Next does support static generation, but since it’s primarily for web apps, it lacks a lot of the blog and personal site features that Gatsby has. On the flip side, it is significantly simpler to configure.
Gridsome is inspired by Gatsby. It uses GraphQL to take any source like Markdown files or a content management system and transforms that data into a static site using the Vue framework.
Next inspire Nuxt. It’s simple to configure, but since it is made for web apps, it lacks some of the features you may want for a personal site, especially blogs.
In the world of Svelte, Sveltekit is the frontrunner among static site generators. It’s maintained by the Svelte team and is the successor to their previous generator of choice, Sapper.
When I started creating websites, I was scared by the sheer number of tools out there, so hopefully, this helps you narrow down your choices.
If this or other content I have created inspires you to create your own personal website, drop me a line. I would love to follow along.
Thanks to Xavier Decuyper for reading drafts of this.