Hugo or Eleventy?

If you’re looking for a SSG (Static Site Generator) to create a website, it pretty much comes down to Hugo or 11ty (Eleventy). The rest of the SSGs are either too old, poorly supported, or meant for creating web apps. I’ve tried quite a few of them, I found that I kept coming back to Hugo and 11ty.

SSGs such as Astro, Next, Nuxt, and Gatsby are really meant to create web apps, often with React or Vue for the front-end. They’re pretty heavy for just a website. Jekyll, Bridgetown, Middleman, HydePHP, Jigsaw, and Pelican are too old or based on languages that are falling out of favor on the modern web.

Hugo

Hugo has a lot going for it. It’s extremely fast generating a site, includes just about everything you need without requiring any plug-ins or other dependencies (it’s distributed as a single binary), and enjoys excellent support on Discourse. There’s not much you’d need to add to Hugo because it already has a template language, asset pipeline, code syntax highlighter, Markdown converter, universal pagination (and double-pagination), taxonomies, and multilingual support.

While 11ty offers a range of template languages, including Nunjucks, Liquid, and Vento, Hugo offers only Go Templates (Hugo is written in Go). This might be just fine for you because the Go Template language lets you do what all the others do, but it’s syntax is far from ordinary. For example, conditionals might look like {{ if eq .PageNumber 1 }} and math like {{ $end = sub .TotalPages 1 }}.

Eleventy

Affectionately known as 11ty, Eleventy is JavaScript through and through. Most web developers already know JavaScript, so they can be comfortable in 11ty right away. Support and community are excellent on 11ty’s Discord channel.

Instead of Hugo’s ‘batteries included’ approach, 11ty is more of a foundation on which to build features yourself. For example, if you want Next/Previous navigation buttons on your blog’s article pages, you write to code to do that yourself. Not just the template code to put them there, the actual JavaScript code to add the links for the next and previous pages to the article data structure.

Choices, Choices

We know there is no perfect SSG. If you don’t mind writing Go Templates, there’s a lot to like about Hugo. If you are good at JavaScript and want to make your SSG your own, 11ty lets you do exactly that. Both Hugo and 11ty are well supported, generate a site quickly, are actively developed, and have good documentation.

So pick Hugo if:

• A batteries included, ready to go, SSG is more your style.
• The Go Template language doesn’t make you crazy or you are willing to learn it.
• Hugo’s syntax highlighter (Chroma) and Markdown converter (goldmark) do what you need.

Pick 11ty if:

• JavaScript is your thing and you want to build on top of 11ty.
• There’s a particular template language you want to use. You can choose among Nunjucks, Liquid, Vento, EJS, WebC, Mustache, and several more.
• You want to pick your syntax highlighter (maybe Prism, Highlight.js, or Shiki).
• Building your own asset pipeline (if you need one) is no problem.