👋 Hello Hugo!

2023-08-30 1124 words 6 minutes

Contents

👋 Hello Hugo

This is my new site generated using Hugo!

Ahhhh ☺ – a fresh start. A new chapter is beginning, and I’ve had my eye on Hugo for a while. Having started and abandoned SSG (static site generator) projects in the past, this might be thee one for a while. It feels stable, feature rich, and easy to work with–all characteristics that are crucial for consistently keeping up and growing a website.

If you’re looking for an SSG, the most popular ones seem to be:

Jekyll - Ruby based static site generator.
Hugo - Go based static site generator.
Gatsby - React based framework for building websites and apps.

In this post I’d like to briefly share insights from my comparative analysis of SSGs and explain why I chose Hugo over Jekyll or Gatsby this time around. Information here is not intended to be used as persuasive arguments for using one or the other, but you might draw insights from my personal journey.

🌎 Overview

I’m coming from using Jekyll, a Ruby-based static site generator, to build my previous site and had mixed feelings about it’s performance and ease-of-use. I decided to explore the current options and I found that Jekyll and Hugo are still very popular, so I’ll try to focus on them primarily and sum up all the information I gathered from Googling for an afternoon.

Jekyll still seems to be preferred if you’re looking for ease of initial setup which became a little more difficult for the beginner to deploy after Jekyll 3 which requires you to use GitHub Actions to deploy.

Hugo seems to be preferred, for those experienced with SSGs, for it’s performance (just keep an eye on JS load). For example, it comes with Render Hooks for creating responsive images.

🚢 Deployment

The argument for ease of setup and deployment of Jekyll is outdated now. If you want to use the latest Jekyll, you’ll have to use GitHub Actions, and if you don’t you’re stuck with using Jekyll 3 forever. Or, go with Hugo which is the same amount of setup, and for no reason are you locked to a specific version.

Support for Jekyll 4.0 · Issue #651 · github/pages-gem · GitHub

Why GitHub chose Actions for deployment

Using Actions to orchestrate Pages publishing provides many more options for choosing your authoring framework (Next.js, Hugo, Gatsby, Jekyll, NuxtJS or other technologies, and the associated versions thereof) as well as giving you finer control over the publishing process, such as leveraging deployment gates.

~ GitHub Pages: Custom GitHub Actions Workflows (beta) - The GitHub Blog

🏇 Performance

When it comes to evaluating the performance of SSGs PageSpeed Insights is your friend or worst enemy here. Here’s a great article explaining Google Lighthouse scores: How to get a 100% Google Lighthouse score | Usecue web development

Hugo for performance

I ditched Gatsby and migrated this site over to Hugo. Hugo is often viewed as the fastest static site generator… it is.

~ Goodbye Gatsby, Hello Hugo - Made Mistakes

Render hooks

Then there’s Hugo, which lets you customize how Markdown outputs to HTML with what it calls render hooks. These render hook templates are standard HTML with the same templating logic used to write shortcodes, partials, and layouts. Something I appreciate, as writing HTML comes more naturally to me than JavaScript or Ruby.

~ Goodbye Gatsby, Hello Hugo - Made Mistakes

🤔 Sentiment

There’s certainly more depth when it comes to comparing SSGs like Hugo, Jekyll, and Gatsby. However, this summarizes what I discovered during my initial research. There isn’t a ton of new information out there. I also ran manual sentiment analysis on this dated but relevant GitHub conversation: Is the Jekyll project dead? - Help - Jekyll Talk

	setup	complexity	scope	templating	build process	version	community	complete
jekyll	😐	😐	😐	🙂	🙂 (na)	🙂	🙂	🙂
hugo	🙁	😵	🤔	🙁	🙁	🙁	🙁	🙁

In my opinion, people were more enthusiastic about Jekyll and more unenthused by the complexity of Hugo, however in practice I’d have to say that things must have changed quite a bit from 2021-2022 because yeah Hugo can be complex if you want it to be but it doesn’t need to be. For instance, in case it’s not obvious, loveit, the theme I’m using looks great on mobile platforms and has implemented just about every feature I absolutely need for a basic site.

deployment

I mentioned Hugo has a build/deploy process you have to maintain, but these days that problem has been worked out and it can take an hour or two max to set that up if you’re unexperienced with Actions (see Resources below).

🎀 Summing It Up

While Jekyll is alive and well and continues to be used for creating impressive websites, my research didn’t uncover substantial evidence favoring Jekyll over Gatsby or Hugo.

Why I chose Hugo came down to those key characteristics I mentioned in the beginning. On top of that, no more running gem as well as bundle commands, and keeping up with dependencies is much less of a hassle to non-existent as of yet. So far, I’m really impressed with local preview builds, how fast and responsive they are, and visually the site is an exact match locally as it is deployed. Finally, the project directory feels less cluttered (and you know what they say about cleanliness).

Every body likes lists, so here’s my top 10 reasons for using Hugo in no particular order:

Stability
Features
Ease-of-use
Robust and easy to use command line
Dependency management
Clean project structure
Performance
Speedy preview builds
Rapid deployment
It’s free!

As for performance…

I’ll certainly be 👀 and 🔨ing my score, but it’s fast!

So here’s to new beginnings, Hugo. 🥂 If you’re still unsure about which static site generator is right for you, I encourage you to explore the links provided and do your own research (DYOR)! Please hit me up or share on social media if you found this content helpful or have suggestions and have a nice day!

Contents

👋 Hello Hugo!

👋 Hello Hugo

🌎 Overview

🚢 Deployment

🏇 Performance

🤔 Sentiment

🎀 Summing It Up

🔗 Resources

Discussions

Actions

Pages

Theme

Getting Started