Member-only story
Implementing backlinks in a Hugo website
Include wiki-style links on your site
Backlinks is a term used to describe the two-way, wiki-style links that are popular in note-taking tools such as Roam or Notion. Linking in two directions is useful because when you link from one article to another, you can also discover the first article from the second.
I recently used Hugo to create a site for notes, articles and other content. I quickly realised that backlinks would be a useful addition, but I didn’t want the overhead of having to edit every note I referenced to add in the backlinks. I set up my Hugo templates to add backlinks automatically, and this article explains how. You can view my website to see backlinks in action.
It’s worth noting that I’m new to Hugo, so there may be room for improvement with my implementation. If you have any suggestions for tweaks, or even an entirely different approach, I’d love to hear about it in the comments.
That said, I’m pleased with this solution. It has a couple of limitations, outlined towards the end of the article, but other than that it was quick, simple, and is working well for me. On my website, it looks like this:
What were my requirements?
I had the following requirements for implementing backlinks on my site.
- I wanted it to be low effort. i.e., I didn’t want to have to add the backlinks manually to all referenced pages.
- I wanted it to be simple enough that I could create the templates myself. I didn’t want to import a package or third-party code that would take time and effort for me to understand if I needed to make any changes.
- I didn’t want to be constrained by a particular Hugo theme. I wanted backlinking functionality to be independent of the look and feel of the site.
Implementation
There were three steps to implementing backlinks.
- Adding a custom variable to the front matter, to contain a list of all articles linked to this article.
