‹ Writings

🔍 Meta

Migrating to Hugo

2022-03-03


I’ve owned amalbansode.com for about three years now, and have held some form of Internet real estate since the early 2010s. I think some of my early attempts at building websites have been lost to the business cycle (honestly, thank goodness). If you’re wondering what those looked like, think: <marquee></marquee>.

I also hopped around on Blogger and Wordpress over the years, and have taken down those blogs. Don’t worry, I backed up my articles so I can look back and cringe at my 14 year old self’s work. I think 30-year old me will probably say the same about my 2020s website.

Nonetheless, changes can be nice and it’s important to recognize the traps of falling into old thoughts and practices. New practices and technology can solve a whole set of problems and unlock new potential.

Over the past three years, I handwrote all the code and markup powering the frontend for my website. I was, and still am, a vanilla HTML/CSS/JS purist. CSS undoubtedly makes the styling process for websites easier. However, I was rewriting and reusing a ton of HTML, i.e. the entire <head>, some stuff in the <body>, and common DOM structures. A change to any of these common elements was obviously going to need a lot of work.

Dealing with raw HTML seemed to be adding a lot of friction to my thinking as well, especially when writing new articles (I know I could just use Word or something, but let’s pretend that isn’t an option). I’ve briefly described some of my (now solved) qualms below.

I’ve long considered switching to a static site generator so I can write in a more effortless and readable Markdown-like format. I even thought about creating my own generator as a side project. As fun as that would have been, I’m not sure I’m ready for that headache yet.

So I sought out Hugo after seeing it on so many other programmers’/bloggers’ websites. Truthfully I didn’t do much research, but it seems powerful and customizable enough to meet my needs. I’ve ironed out most of my website, and used the exercise of writing this article to learn about publishing with Hugo. Migrating my baseline primary design, boilerplates, and special pages to Hugo took under two hours. It’s pretty great.

Quirks of a Bygone Era

This migration means I no longer have to think about a bunch of things each time I touch my website:

These are pretty insignificant by themselves. However, with my nitpicky attitude towards design and the fact that I had a growing double-digit number of HTML files to manage, I could sense this growing out of hand. I’ve redesigned my website about three times now, and it’s been more painful each time.

Some Temporary Downsides

The move to Hugo has solved all the pain points I listed above. However, some temporary downsides caused by the transition include:

Evolution Parallels

I used AWS to first host www.amalbansode.com. After my one year on their free tier passed, I became a little annoyed at at the ~$1 I’d pay each month for the S3, Cloudfront, etc. spaghetti I was using.

I was hesitant, but made the switch to Netlify on a friend’s recommendation. Similar to this migration, I felt the switch meant giving up finer-grained control of my website’s contents. However, I’m honestly very happy with Netlify. After tinkering with their service, I can deploy my website on a simple git push, have DNS working, and can support TLS for free courtesy of Let’s Encrypt. Fancy Amazon configs and mysterious cloud pricing occupy zero real estate in mind today.

I think this migration will prove to be a similar shift, and I’m hoping it translates to more experimentation and creativity because of the lower overhead.

Resources that Helped

For my personal log but also anyone else who might be considering the change:

  1. Hugo Docs. Always read the documentation!
  2. Creating a Hugo Theme From Scratch, since I’m too stubborn to use other peoples’ themes. This is a really good, no-BS ramp up into the world of Hugo.
  3. How to Add Goatcounter Analytics to your Hugo Website. It’s fun to have some insights on what people look at, and I’ve been using the open-source and privacy-respecting Goatcounter project for over 1.5 years for this.
  4. Formatting an ISO 8601 date stamp in Hugo because ISO 8601 is the one true human-readable timestamp format.
  5. Simple Shortcode to Insert Raw HTML in Hugo to use custom HTML inside Markdown when I need it.
  6. How to Open Link in New Tab with Hugo. I’m nitpicky about user experience and don’t like having external pages open in the same tab as my webpage.
  7. Implement Hugo List and Taxonomy Pages
  8. Hugo Conditionals
  9. Omit Page from Sitemap

I don’t think I’m doing anything particularly quirky with my use of Hugo so I don’t have much to contribute to this universe of knowledge. Maybe besides this “satisfied customer” story 🙂.

~ Amal