Gatsby vs Hugo for a Personal Blog
Both these sites are essentially blogs with a few extra pages. They don’t have a lot of content, 40 and 50 blog posts respectively. They’re also single-language, one in English and one in Swedish. All CSS is written from scratch for both sites, no framework. They both have categories and/or tags that you can use to find related posts. No server-side API is used, so once the build is done, everything is static. Well, Google Analytics and Disqus are used on both sites, but those are third-party API’s that I don’t have to manage. Both are also hosted at Netlify.
Both sites are lazy loading images that are generated in different sizes during build. There is also in-browser search provided with Lunr. A search index file is created during build and shipped to the browser, where the actual searching is performed.
In case you wonder, these are the sites I’m talking about:
While the sites I’ve built are pretty much the same, Gatsby and Hugo are two different animals, despite both being static site generators.
“The world’s fastest framework for building websites”
The most odd part for most web developers is probably the Go templates you use to write your logic. If you have previous experience with Go, this is of course familiar territory. I haven’t, but have managed to get things working through trial and error.
When Hugo brags about performance, it claims to be “The world’s fastest framework for building websites”, it’s all about build time. The build times are really fantastic, but anything that happens in the browser is beyond Hugo’s interest.
The documentation is okay, but sometimes I miss the context needed to understand where a piece of code is supposed to go in my project.
“Fast in every way that matters”
Compared to Hugo, Gatsby is more of a dev environment. If you’re used to React and the NPM ecosystem, Gatsby will feel familiar. Gatsby’s official blog starter has 2182 dependencies (according to
npm ls --parseable | wc -l), that’s 2181 more than Hugo’s single binary. But that also comes with some advantages: there’s a plugin for almost anything you want to do and all the optimisations for pre-loading content for other routes, only loading things above the scroll and much more, is taken care of.
The documentation is outstanding, which really helps in taking advantage of the ecosystem around Gatsby. Many plugins have both a deployed demo site and the code for it easily accessible so that you can see how to use it in context of a real site, or clone it locally and run it.
Gatsby is sort of the opposite to Hugo when talking about performance. It states “Fast in every way that matters”, which refers to everything but build time. Build time is probably the biggest weakness apart from its complexity.