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.
Almost a year ago I changed my website from Wordpress to Hugo, which is a static site generator written in Go and uses Go’s template libraries for templating. I have recently done a viability assessment of Gatsby, another static site generator written in React and 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.
Even though I have been using Hugo for almost a year now it wasn’t necessary for me to understand Go and I 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 and you will see that a Gatsby has more features, which is exciting, and 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.
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 and 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.
Gatsby is gaining popularity very 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.