Site Updates - Related Content and LastMod

For a little over one year ago I migrated this site from Wordpress to Hugo and I am still very happy about the move. I'm writing blog posts with Markdown in VS Code, verify it on my local Hugo installation on my laptop and when I'm happy I can just commit the changes and push it to Github. When a new post is pushed my hosting provider Netlify will pick up the change, build a new version of my site and update it's CDN. And when the new version is published I get notified through a Slack notification.

I haven't really done much tweaking and updating of the site since the migration although I have had some ideas of changes that could be nice to do. So when I saw a tweet from my colleague Christian Mohn a couple of nights ago where he mentioned he had added some tweaks to his site I got the much needed inspiration to do some changes myself.

Christian had added a "Related posts" section as well as a "Last modified" stamp to his posts, both of these is something I want to add.

And as always, when you first start making some changes you will end up doing much more than planned.

I have had some warnings in my build for a while, and I am way behind on the Hugo version so this is also something I needed to fix. I cover this in a separate post.

Let's start with Christian's two tweaks.

Related posts

To add related content to your posts you first need to add a Related section in your site config. The config includes things like what stuff should be considered as "related content".

Check the Hugo documentation for details about the config. You will probably want to play around with the weighting of the different indices.

Now we can add the actual code for showing a related posts section. This is also explained in the Hugo documentation.

I added the code in layouts/partials/related.html, and then I added a reference to this file in the file displaying content. This can differ a bit based on the theme you are using. I added the reference in a specific div section so I can configure the style easily.

Last modified

As Christian stated, this is even easier.

Hugo already supports Gitinfo and in your site config you enable it through the setting enableGitInfo = true. Then we need a place to add the last modified timestamp. I put this in the same content file as mentioned previously with the Hugo shortcode {{ .Lastmod.Format "January 2, 2006" }}

I wanted to add the commit message as well, but couldn't get that to work so I need to revisit this later.

Update 2020-06-01:

I discovered that I had put the enableGitInfo = true in the wrong section of the config.toml file. After fixing that, I could get the commit message as well by adding {{ .GitInfo.Subject }}

With these two in place I pushed the changes to Github and verified the site in "production" before I continued with fixing the build warnings.