5 reasons why Hugo is better than Gatsby
Tags: gatsby, javascript, html, hugo
Published: 2020-08-16 14:34:00

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](https://github.com/evanw/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](https://www.gatsbyjs.com/features/jamstack/gatsby-vs-jekyll-vs-hugo) 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.

![Gatsby marketing, falsely claiming that Hugo does not support modern JS](https://dev-to-uploads.s3.amazonaws.com/i/dwaj4xsy0xok2lo3w9kb.png)

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](https://gohugo.io/templates/data-templates/), [data queries](https://gohugo.io/templates/data-templates/#implementation-details) and components in the form of [partials](https://gohugo.io/templates/partials/), inside of templates.
![Gatsby lying about features of other static site generators](https://dev-to-uploads.s3.amazonaws.com/i/xp32e3uoyrmrf0macpxw.png)

Also, Gatsby claims that Hugo doesn't have pair programming in it's community, **which is false**, Hugo has a [discourse](https://discourse.gohugo.io/), and they say that Hugo has no _swag store_... Does that matter? who cares?

![Gatsby showing that having a swag store is an advantage to a static site generator](https://dev-to-uploads.s3.amazonaws.com/i/z07hi4oz4xkw1j3zh0hw.png)

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](https://github.com/evanw/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](https://gohugo.io/hugo-pipes/js/) 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](https://hugo-mini-course.netlify.app)