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.
Principles
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:
- Don’t let decisions paralyze you
- Optimize for today
Given these principles, I’d like to add a few more principles specific to this domain.
Stick to what is familiar
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.
Find a generator with plenty of support
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.
Narrowing down the list
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.
To use JavaScript or to not use JavaScript
In the last decade, JavaScript has taken every corner of the development world by storm. As a result, seven of the top ten static site generators by Github stars are built on JavaScript.
The big question for you is this. Do you or do you not want to write any JavaScript as part of building your website?
Some generators require a working knowledge of JavaScript frameworks. Static site generators built on Javascript frameworks offer interactivity out of the box and allow switching pages without page reloads. They are a good option for someone already writing in JavaScript in other projects.
Here’s the tradeoff. They have complicated dependency trees that can lead to bugs and broken builds. Also, their build times tend to be much slower than with some of the non-JavaScript generators I’ll list later.
Whichever option you choose, remember to stick to what is familiar and optimize for today. If you want to write JavaScript, then skip down to JavaScript frameworks. Otherwise, keep reading.
Top Choices
Non-JavaScript Frameworks
Hugo
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.
Zola
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.
The JavaScript frameworks
Eleventy: almost no JavaScript
Eleventy is fast, flexible, and quick to get started on. This generator allows you to use a long list of template languages and promises fast build times. I’m including here since configuration requires use of JavaScript, but templating and writing don’t require any.
Astro: the newcomer
Astro is a relative newcomer on the block that’s worth a look. It enables you to use any Javascript framework like React, Vue, etc. while compiling your site to plain HTML and CSS. However, if you decide that parts of your site need interactivity, you can “hydrate” just those parts and keep everything else plain HTML and CSS.
Gatsby: the best React option for blogs
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: the simplest React-based generator
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: like Gatsby, but for Vue
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.
Nuxt: like Next, but for Vue
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.
Svelte
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.
Go start your personal site!
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.