Backlinks on a Micro.blog hosted website

One of my goals when transforming my website into a digital garden was to include backlinks on my posts. A backlink is a link to a post that refers to the current post that you are viewing. There are several blog posts out there that explain how enable this for Hugo blogs that I used for inspiration. Here are the steps I used to get this functionality on my blog.

You will need to edit your theme for single blog posts which is located at layouts/posts/single.html (or if using a theme that supports Matt Langford’s microhooks, add/edit one for microhook-after-post.html)

The first thing that needs to happen is to grab the url of the page (in this case the relative permalink) and create a variable to store the matches you come across. That’s the {{ $pages := slice }}

You then iterate through all the blog pages… {{- range .Site.Pages -}} and store {{ $pages = $pages | append . }} any that contain the text of the relative permalink {{- if strings.Contains .Content $relpermalink -}}

	{{ $relpermalink := .RelPermalink }}
	{{ $pages := slice }}
	{{- range .Site.Pages -}}
		{{- if strings.Contains .Content $relpermalink -}}
			{{ $pages = $pages | append . }}
		{{- end -}}
	{{- end -}}

Next you’ll want to iterate through those pages and display them. For simplicity of this post I’m just using a basic HTML list. If the backlinking post has a title, let’s display that, otherwise just take the summary or truncate it.

{{ with $pages }}
	  
	{{ end }}

Result on my website after some extra styling

You can checkout the full code snippet here:

Updated 4 Apr 2025 based on a comment by Leon Mika to stop backlinks to newsletter pages.

	{{ $relpermalink := .RelPermalink }}
	{{ $pages := slice }}
	{{- range .Site.Pages -}}
		{{- if strings.Contains .Content $relpermalink -}}
		  {{- if not (strings.HasPrefix .RelPermalink "/newsletters") -}}
			  {{ $pages = $pages | append . }}
			{{- end -}}
		{{- end -}}
	{{- end -}}
{{ with $pages }}
  <ul class="backlinks">
		  {{ range $pages }}
			{{- if .Title -}}
			<li>
			  <a class="p-url" href="{{ .Permalink }}">{{ .Title }}</a>
			</li>
			{{- else -}}
			<li>
			  <a class="p-url" href="{{ .Permalink }}">{{ .Summary | truncate 150 }}</a>
			</li>
			{{- end -}}
		  {{ end }}
		</ul>
{{ end }}

Dispatches from the fleet

What passing ships signaled back

Unfurl the messages

Pen yer reply

Scratch a message on the parchment and cast it off. After you sign in you may need to re-open this modal.