5 reasons why Hugo is better than Gatsby

Hugo is an amazingly underrated static site generator and this post is aimed to provide some examples on why it may be a better choice than Gatsby for your next static site!

TLDR;

1. Hugo builds are way faster than Gatsby
2. Hugo's template system is simple
3. Hugo's built-in features are better than Gatsby's plugin features
4. Hugo doesn't require any JS to be used, but supports JS with ESBuild
5. Hugo has a small learning curve

1. Build Times

Gatsby

Gatsby is notorious for having long build times that depend on which plugins you use and amount of data you have in each page.

It is not unusual for Gatsby builds to take more than 20+ minutes to build a production site that only has a couple hundred pages. If you use popular plugins like gatsby-image, then expect your build times to skyrocket even higher.

If you use Gatsby's internal GraphQL implementation for saving and querying data nodes inside your pages, then expect longer build times as well.

Gatsby will promote their new incremental builds and cloud build capabilities, but they are marginally faster, buggy, and cause serious vendor lock-in to their Gatsby Cloud CI service.

Hugo

Hugo on the other hand, is known for it's extremely fast builds.

On average every page can be generated in less than 1ms, so a site with 10,000 pages can take just 10 seconds to build, whereas a Gatsby site with 10,000 pages, with the same amount of data, would take 30+ minutes or even hours to build.

Hugo also has native image processing similar to gatsby-image but is way faster and would marginally increase build time.

2. Templates

Gatsby

Gatsby is built on top of React, and therefore uses JSX as it's template system.

JSX is transformed into HTML at build time for the first page load and then re-rendered so Javascript can take control of all document nodes at runtime.
Using React and JSX for static sites, that don't necessarily need complex interactions and logic, means that you ship large JS bundles (that include the React library, Gatsby library, plugins, 3rd party npm libraries, polyfills and more) with every page - whereas the equivalent vanilla JS would most likely be a fraction of the size.

Computers or phones with low processing power or memory can struggle to display sites with large JS bundles and can feel laggy and unresponsive.

Hugo

Hugo uses the Go Template language for it's templates which has simple, easy to read syntax that doesn't require knowledge of JS to be written.

The Go Templates are converted to HTML at build time and if their is optional JS included on the page, it can be minified, inlined, and even compiled using ESBuild which is included in Hugo automatically.

3. Features

Gatsby is marketed to have a large amount of features that other static site generators do not have, largely attributed to it's plugin system. But even with Gatsby's plugin system, Hugo has all the important features built-in to it's core instead of needing to install it separately.

In one of Gatsby's thousands of marketing pages, they show a breakdown of Gatsby vs Hugo vs Jekyll and they show how Gatsby wins or ties in every category, but most of these comparisons don't make any sense or are completely false.

For example, Gatsby shows that Hugo has no modern javascript syntax even though Hugo has ESBuild which is orders of magnitudes faster than Gatsby's webpack implementation for compiling modern javascript syntax.

Another example is that Gatsby claims that Hugo does not have declarative data queries or UI building which is completely false. Hugo has data templates, data queries and components in the form of partials, inside of templates.

Also, Gatsby claims that Hugo doesn't have pair programming in it's community, which is false, Hugo has a discourse, and they say that Hugo has no swag store... Does that matter? who cares?

There are more examples in that chart of Gatsby trying to make themselves seem better but are just lying, and it'll take awhile to dispute all of them, so we will just move on.

4. JavaScript Support

Gatsby is built on top of React so it of course has JS support by using Webpack and Babel to compile down for browser support.

But as mentioned above, Hugo also has JS support by leveraging ESBuild, which is a JS bundler and minifier written in Go and is orders of magnitude faster than the Webpack and Babel combo.

Hugo also makes it way easier to code-split your JS code by just declaring which files you want loaded in each template. You can even include React if needed for more complex components.

Details here in their docs.

5. Learning Curve

Gatsby has an incredibly large learning curve, to get started writing useful Gatsby sites, one must know:

• JS / NodeJS
• JSX
• NPM
• React
• GraphQL
• Gatsby's complicated build system, transform plugins, source plugins, Gatsby Themes, Gatsby Recipes, and Gatsby's CLI
• HTML
• CSS
• Markdown - optional

And some of those are very large topics, like React and GraphQL.

To get started with Hugo, one must know:

• HTML
• CSS
• Hugo Template Syntax and Template Lookup order
• Markdown - optional

It is a lot easier to get started with Hugo and scale out Hugo for complicated and large sites.

Honorable Mention

Gatsby is a for-profit business and will push their products like Gatsby Cloud on you even if there are better alternatives.

To learn more about Hugo, check out my mini course about it at hugo-mini-course.netlify.app