In this article, I compare two static site generators, Gatsby and Hugo. I discuss framework familiarity, stability, security, tooling, build speed, performance and the community surrounding both. So let’s get started.
About a year ago, I changed my website from Wordpress to Hugo, which is a static site generator written in Go that uses Go’s template libraries for templating. I have recently done a viability assessment of Gatsby, another static site generator written in React that uses React for templating.
In this article, I compare the differences between Hugo v0.42 and Gatsby v1.93. For the comparison, I used this Hugo site and this Gatsby site. The code for each can be found on Github for the Hugo site and for the Gatsby site.
If you are not familiar with React and you don’t plan on learning React, then you should probably choose Hugo. If you know and like React, should you choose Gatsby? Well, not necessarily.
Even though I have been using Hugo for almost a year, it wasn’t necessary for me to understand Go. I also only had to learn a little bit about Go’s template libraries. However, I did find that I had to refer to the documentation more often with Hugo because of my lack of familiarity. Gatsby requires a deeper understanding of React than Hugo expects of Go. Nevertheless, if framework familiarity were the only criteria, I would choose Gatsby because it’s nice not to have to refer to the documentation while adding new features to my website.
One way of assessing stability would be to compare Hugo’s issues on GitHub with Gatsby’s issues on GitHub. You will see that Gatsby has more features, (which is exciting) but also has more bugs (which is not so exciting). I initially did not consider stability as a criteria until I found this bug and that made me realise the importance of stability in software. I may be taking this one personally because of the time and effort I expended, trying to find that bug, but I still think Hugo is more stable than Gatsby.
On the other hand, some things that require a plugin with Gatsby just come out of the box with Hugo. For example, gatsby-plugin-react-helmet is needed to edit the head tag, whereas this can be done with simple HTML in Hugo. Since I enjoyed using the tooling that came with Gatsby, I give this one to Gatsby.
Hugo is able to build my website without any additional tooling in less than 100ms. Gatsby is able to build my website in about 15 seconds, but this does include a lot of additional tooling. Adding PostCSS and Imagemin to the Hugo build bumps the build time up to about 5 seconds. Watching for changes during development was also faster using Hugo. I think Hugo is the winner here.
Both Gatsby and Hugo have really nice documentation. Hugo has a Quick Start and Gatsby has a Getting Started section. Gatsby also has a really nice tutorial, which evens out the steeper learning curve. Personally, I found it easier to get started with Gatsby, but that is because I already understood React. I think it is fair to say that both Hugo and Gatsby have great documentation.
Using Lighthouse, the performance score was 100 for my site in Hugo and 95 for my site in Gatsby. The First Contentful Paint for a 3G connection was about 1 second for the Hugo site and 1.5 seconds for the Gatsby site. Using Web Page Test the load time on a 2G connection was 8.7 seconds in Hugo and 11.7 seconds in Gatsby.
Gatsby is gaining popularity quickly, which comes with a thriving community. That is not to say that Hugo’s community is boring. If GitHub stars are anything to go by, Hugo has more than 27 thousand and Gatsby has more than 23 thousand. On Twitter, Gatsby seems to be more active than Hugo.
So which one should you choose? Gatsby uses React, which I am more familiar with, it has better tooling, and it has a thriving community. On the other hand, Hugo is more stable and spends less time building. For larger websites, build speeds become more important and some of you might not care for React at all. In my case, stability was the most important criteria, so I decided to stick with Hugo. I am very excited to see what the future brings in this space.
Before you go… Thanks for reading the article! I write about my professional and educational experiences as a self-taught software developer, so check out my blog or subscribe to my newsletter for more content.
You might also like:
- How I release updates to my personal website
- Learning material — software development (a list of learning resources, starting with Introduction to Computer Science)
- Is full-stack web development worth learning?