Skip to main content
  1. Posts/

Configuring my Congo themed Hugo blog to use Openring

·509 words·3 mins·

I really like Drew DeVault’s Openring, an elegant utility that generates links to blogs that I follow under my posts (scroll to the end of this article, you may find something you like!). In this post I’d like to walk you through how I set up Openring with my Congo themed Hugo blog.

Configuring Openring #

Openring takes in a Go templated HTML file (see the official example) as well as the feeds you want to display as arguments, and produces a filled out template as a result. I first wrote a simple script that stuffed a file containing a list of RSS feeds into the correct arguments needed to run openring:

#!/usr/bin/env bash


readarray -t FEEDS < $FEEDLIST

# populated below

for FEED in "${FEEDS[@]}"


This snippet reads a list of feeds and a template living in config/openring/ and spits out a Hugo partial template containing the populated list of articles in the layouts/partials directory.

My Openring template is a tweaked version of the example provided on the Openring repo. My tweaks center around playing nicely with the Congo theme which uses Tailwind for styling.

<section class="webring">
    <h3>Articles from blogs I follow around the net:</h3>
    <section class="flex flex-wrap">
        {{range .Articles}}
        <div class="article flex flex-col m-1 p-1 bg-neutral-300 dark:bg-neutral-600">
            <h4 class="m-0">
                <a href="{{.Link}}" target="_blank" rel="noopener">{{.Title}}</a>
            <p class="summary">{{.Summary}}</p>
                via <a href="{{.SourceLink}}">{{.SourceTitle}}</a>
            <small>{{.Date | datef "January 2, 2006"}}</small>
    <p class="text-sm text-neutral-500 dark:text-neutral-400 text-right">
        Generated by
        <a href="">openring</a>
{{/* For the bits I couldn't figure out how to represent in Tailwind */}}
    .webring .article {
        flex: 1 1 0;
        min-width: 10rem;
    .webring .summary {
        flex: 1 1 0;
        font-size: 0.8rem;

Loading in the generated Openring template #

Depending on your theme, the process of injecting your Openring template will differ. I’m using Congo, which specifies that a custom partial can be injected into the footer of all pages simply by naming it layouts/partials/extend-footer.html. This isn’t perfect, as I only want my Openring partial to be loaded on articles, excluding pages like my homepage, but luckily Hugo’s template syntax makes this easy to fix by using the .IsPage field:

{{/* layouts/partials/extend-footer.html */}}
{{/* Don't load the partial if it doesn't exist */}}
{{ if templates.Exists "partials/openring.html" }}
    {{ if .IsPage }}
        {{/* Only display at the bottom of articles */}}
        <div class="mt-6">
            {{ partial "openring.html" . }}
    {{ end }}
{{ end }}

Now running the previously described script followed by hugo serve should produce the results we’re looking for!

Tying it all together #

Next, I made a simple makefile that pipelines before running any relevant Hugo commands:

# Makefile


serve: openring
	hugo serve -p 8080

build: openring

build-prod: openring
	hugo --minify

Now in my deployment instead of running hugo --minify I simply run hugo build-prod.

If you’d like to see the final state of my Hugo site after making these changes, check here as a reference.