Hugo

Published — 6 minute read

I switched this site’s generator from 11ty to Hugo today. It was surprisingly easy! And I’m happy with Hugo so far.

I’m using a basic theme called Paper for now, but I plan on making a custom theme later. I want to try out Bulma CSS.

Apologies to my RSS readers, you may see all my posts flooding your inbox.

There’s a few reasons for the change, but the short of it is, I just wanted to try something new.

While I prefer 11ty and the Nunjucks templating language, Hugo is more geared for publishing and comes with some nice features out of the box, such as drafts, sitemaps, RSS, and Open Graph tags.

Migration process

Migrating my old content was super easy, and my URLs stayed the same with no fiddling. My posts are structured as such: blog/2021/12/post-name/index.md, and just moving the blog directory to Hugo’s content/ directory worked on the first try.

From there, I added a homepage and an about page (with a new uses section), updated the RSS layout to show full content instead of a summary, and some other quick tweaks, such as the addition of the “Reply via email” button on my posts. Thanks to Bryce Wray, who already had the button in his Hugo template.

Easier to make new posts

Hugo has a feature called archetypes, which makes scaffolding a new post easy. For example, all I had to do to start this post that you’re reading right now was the following command:

hugo new blog/2021/12/hugo/index.md

This made a new directory for the post and resources, a new markdown file with frontmatter, and then opened the new markdown file in my text editor, all in one command!

Here’s what making a new post in 11ty consisted of:

  1. Make new directories for the post (by year and month, according to my structure)
  2. Make a new markdown file
  3. Add frontmatter to the markdown file, usually copy and pasted from a previous post

This is tedious! I’m sure there’s a way to make a script to automate this though.

Eventually I’d love to find a GUI editor that can do this all for me, a la WordPress or Ghost. It’s so much nicer to be able to click one button to publish an article, and reducing the barrier to publishing is important, encouraging you to write more often.

Maybe migrating to Ghost is on the cards in the future. I love writing in Markdown.

Right now I am still trying to stay away from running my own VPS again or paying for Ghost Pro (although it is reasonably priced at $11/m). While publishing is more difficult, static sites are still much cheaper and less hassle to run.

I recently came across a post by Jack Baty titled, “WordPress is a Typewriter”:

Using WordPress makes me feel like that boy at the Type-In. I feel like the words are going right onto the paper. Sure, the metaphor is a little thin, but the point is that when writing with WordPress (or any CMS, really), the distance between what I’m typing and what I’m publishing is very short. The only thing closer is editing HTML directly on a live page, but that’s something only crazy people do.

On the other hand, publishing a static site is like sending a document to a printer. I have to make sure everything is connected, that there’s paper in the machine, and then wait for the job to finish before seeing the output. If something needs editing, and something always needs editing, the whole process starts over.

Accurate description.

Faster build times

Hugo is the king of speed when building, but 11ty wasn’t that far behind for me. This isn’t a good reason to switch to Hugo from 11ty, unless you’re dealing with tens of thousands of files. This is a good comparision post on SSG build times.

Easier to change designs

With Hugo, you can change designs for your site by just adding new themes and switching between them, plus a couple layouts changes if you have them.

With 11ty, you’re going to redesign your entire site, top to bottom, touching every template, and no way to swap between them outside of git.

Nicer markdown experience

Hugo uses the Goldmark markdown renderer, which comes with niceties such as heading anchor links and syntax highlighting by default. With 11ty, I had to do extra work for those things.

I was also able to easily change all my external links in markdown to open in new tabs by default, by just adding a new layout targeting the renderer. Elliot Sachs has a nice short article on it.

Image processing is (still) a pain

I am struggling to wrap my head around how image processing in Hugo works. I remember spending a few weeks wrapping my head around eleventy-img, which is 11ty’s official plugin for processing images.

Currently none of the images on this site are optimized outside of the default stuff CloudFlare Pages does. I’d like to get the cover and portfolio images optimized first, and then try to get in-post images optimized without any changes to my existing posts. I think Hugo’s render hooks are a way to do that.

I’m sure I’ll figure this out in time, or just give up and use CloudFlare Polish, but that’s $20/m.

I want to stay away from external image hosts, which are all the rage these days it seems. Most of them want you to upload your images to their service and then link the image in your post, which isn’t good for longevity imo. That service may not be around in a few years, leaving you with broken images.

Less package management

While it’s a fact of life in modern web development, I really dislike npm and the whole experience.

I’m tired of random package updates breaking my build. The more time I have to spend fixing silly package manager issues, the less I have to actually work on the site.

As a self-contained binary, Hugo is pretty resilient to these issues. And I’m going to try my best to keep npm out of this project, relying instead on good old-fashioned downloads if I need an external JS library or CSS framework.

Conclusion/todo

Current things on my todo list for this site: