Upgrading Hugo and Fixing Build Warnings

==========================================

It’s been over a year since I migrated my site from WordPress to Hugo, and I’m still very happy with the move. I’ve been writing blog posts using Markdown in VS Code, verifying them on my local Hugo installation on my laptop, and when I’m happy, I commit the changes and push them to Github. My hosting provider, Netlify, picks up the change, builds a new version of my site, and updates its CDN. When the new version is published, I get notified through a Slack notification.

Recently, I saw a tweet from my colleague Christian Mohn about some tweaks he had made to his site, which gave me the much-needed inspiration to do some changes myself. He mentioned two tweaks he had made: one was fixing RSS link warnings, and the other was upgrading the Hugo version. I decided to take on both challenges and document my process here.

Fixing RSS Link Warnings

————————

When I saw the RSS link warning in Christian’s tweet, I knew I had to fix it too. I use a custom theme, so I searched for files with “.RSSLink” in them using VS Code’s “Find in Files” search function. I found two files in my theme that contained this text: metas.html and rss.html.

The issue was caused by the fact that the RSS link was hardcoded to point to my old WordPress site. I simply replaced .RSSLink with .RelPermalink in both files, and my site rebuilt without any warnings.

Upgrading Hugo Version

————————-

I also wanted to upgrade the Hugo version on my laptop to see if my site still worked. My site is currently running on Hugo version 0.54, which is quite old. The current version is 0.71.1! One of the reasons I haven’t tried the update earlier is because of the build warnings in combination with my theme, which hasn’t been updated since I chose to use it.

I ran the brew upgrade hugo command to update Hugo on my Mac and fired up the development server. However, when I accessed my site, I found that it was displaying only my recent posts. This was fixed by changing {{ $paginator := .Paginate (where .Data.Pages “Type” “post”) }} to {{ $paginator := .Paginate (where .Site.RegularPages “Type” “post”) }}.

The last fix I did after upgrading the Hugo version had to do with syntax highlighting. I use a lot of syntax highlighting in my posts, and normally, I use codefence blocks. However, after upgrading, the code blocks were displayed differently. I found that the issue was caused by the default syntax highlighting functionality not being configured properly.

To fix this, I added a site config for highlighting and chose a different style for highlighting. There are plenty of styles available, and after testing a few of them, I ended up using the “friendly” style. In the config, I can also add line numbering and more. The config can be overridden on a page and in a specific code block, which I find quite useful.

With all fixes in place, I pushed the changes to Github, and I can now change the HUGO_VERSION environment variable to the current 0.71.1.

Conclusion

———-

I’m still very pleased with my move to Hugo. Even though it takes some work to maintain the site, I find it more fun to work with Hugo functionality than testing multiple WordPress plugins to do a simple thing. Next up for me is replacing my current Hugo Bootstrap Premium theme as this hasn’t been updated the last year. There’s plenty of themes to choose from and I bet there will be a few things to fix after the change as well, so I might do a post on that later on. Stay tuned!

Copyright 2017-2023 RUDIMARTINSEN.COM. All Rights Reserved.