I recently gained access to the flagship octothorp.es instance and set up this page to automatically generate relevant links based on the categories on posts.
If you haven't heard of octothorpes before, they're basically a way to create tags across the web. For example, this page is categorized as hugo, octothorpes and web on my blog. Clicking on these links takes you to a listing of all my posts in these categories. But this creates silos and information wants to be free. Now that I've enabled octothorpes, this page is indexed by the OP (octothorpe protocol) server so I can link to the octothorpes versions of these tags (hugo, octothorpes, web) as well. These index pages show you all pages across the network using the same tags - how cool is that!
On the implementation side, indexing works by notifying the OP server of new
pages. The way the protocol works, this doesn't require any additional
infrastructure because indexing is triggered by visitors loading the page. A
<link> in the header instructs the browser to submit the indexing request for
us. This means that static sites like this one are fully supported!
Hugo templates
Implementing octothorpes in hugo is surprisingly straight forward. You'll need to adapt your templates in two places:
- add the indexing
<link>to the head of the page - add the categories as
<link rel="octo:octothorpes">to the head of the page
As an alternative to adding the tags as links in the head, you can also use anchor links in your page markup directly. I prefer the first method as this allows me to link to the categories on my page independently from the octothorpes index.
In the template containing the page <head> (probably _default/baseof.html), add a new block called
custom-head.
<head>
<!-- ... -->
{{ block "custom-head" .}}{{ end }}
</head>We'll then define this block in _default/single.html. This way, pages like category listings are not indexed.
{{ define "custom-head" }}
<link rel="preload" as="fetch" href="https://octothorp.es/?uri={{.Permalink}}">
{{- with .GetTerms "categories" }}
{{- range . }}
<link
rel="octo:octothorpes"
href="{{.LinkTitle}}" >
{{ end }}You can also refactor it into its own partial to keep things clean.
After publishing a new build of your site, you should see the links show up in your pages and find your posts on the octothorpes index after someone visits the page!
Happy octothorping!