Building an Affiliation Network for Blog Posts & Tags in Hugo | Ó hAoḋa<br>Building an Affiliation Network for Blog Posts & Tags in Hugo<br>2025-06-10<br>Table of Contents An interactive affiliation network built for blog posts & tags on this websiteIntroduction§<br>Hugo websites typically consist of blog posts, which are organised into taxonomies with the use of tags.<br>In a typical Hugo website, these tags are listed for each blog post, and a tags page can be used to navigate the blog posts belonging to each tag (although I suspect that tagging blog posts is one of those features that developers implement because they feel that they should, despite the end user probably never using said feature);<br>clearly, I am one of those developers who has implemented tagging on their blog website despite not being sure that anyone actually uses it, just on the off-chance that someone might one day want to take a look at everything I’ve written on a given topic.<br>However, I wondered if there was a better way by which I could display these relationships between blog posts and tags in a way that was easier to navigate or simply more visually interesting than listing tags & blog posts, and the knowledge graph in the note-taking application Obsidian immediately came to mind: a visualisation of the interconnections between individual notes in the user’s “vault”, with each node representing a single note and each edge representing a link between that note and another.<br>While I suspect that this graph visualisation is not actually useful for navigation compared to traditional search methods, it certainly serves its other purpose of looking cool.<br>Obsidian & its graph view [WikiMedia Commons]Such a graph is not particularly suitable for my application as this website doesn’t have a great deal of linking in-between posts; in fact, at time of writing, I don’t believe there are any cross-links between posts on this website.<br>Instead, posts are tagged, and so the nature of the graph constructed on the data is very different:<br>the Obsidian graph view is a simple1 directed graph , with edges indicating the direction of the link from one note to another.<br>In contrast, to construct a meaningful graph of connections between posts on this website, an affiliation network would be the best choice: a simple1, undirected, bipartite graph wherein there are two distinct types of nodes representing two distinct kinds of entities, typically individuals & groups, and in this case, blog posts & tags.<br>A bipartite graph is a graph $G=(X,E)$ consisting of a node set $X$ and an edge set E, where $X$ can be divided into two disjoint subsets $X_1$ & $X_2$ such that:<br>$X_1 \cap X_2 = \emptyset$: that is, the two subsets are completely disjoint and share no nodes between them.<br>$X_1 \cup X_2 = X$: that is, each node in $X$ is in either $X_1$ or $X_2$ — there are no missing nodes.<br>$X_1$ and $X_2$ are both independent sets : no pair of nodes in either $X_1$ or $X_2$ are connected by an edge — any edges within the graph connect a node in $X_1$ to a node in $X_2$ (and vice-versa, as the edges are undirected), never a node in $X_1$ to another node in $X_1$, or a node in $X_2$ to another node in $X_2$.<br>Building the Graph§<br>Since this affiliation network will be part of the website and displayed on the Tags page going forward, it will almost certainly be updated repeatedly as time goes on, so the version of the code referred to here will be the first working version of the code published, and will not refer to subsequent versions.<br>Furthermore, I imagine the code may need to be tweaked or refactored as the size of the graph grows, so the graph data used for this post will be static from the time of writing:<br>the data displayed in the graph at the top of this page is not updated with subsequent builds of the website, unlike the graph displayed on the Tags page, which is updated with each build.<br>To display an affiliation graph of the relationships between tags & blog posts on this website, it was first necessary to obtain a representation of this graph in a machine-readable format.<br>When a website is built in Hugo, HTML files are produced, with the HTML file for each blog post typically containing the tags associated with that blog post, a HTML file for each tag being generated which links to all the blog posts which belong to that taxonomy, and a tags page being generated which lists all the tags used on the website.<br>I chose to use a Python script using the Beautiful Soup HTML parsing library to extract the tags from each blog post on the website:<br>8def list_blog_posts(blog_directory):<br>9 """<br>10 Returns a list of all the blog post slugs generated by Hugo in the build process, i.e.,<br>11 not the titles of blog posts but the string used to identify the blog post in its URL.<br>12<br>13 Args:<br>14 blog_directory (str): the path to the /public/blog sub-directory of the Hugo project.<br>15<br>16 Returns:<br>17 list: a list of the blog post slugs in the blog_directory, in str...