A human-readable RSS feed with Jekyll — Minutes to Midnight

A few days ago, while reading my Mastodon timeline, I stumbled on an article by Wouter Groeneveld, titled Cool Things People Do With Their Blogs. Two things caught my eye:

I’d forgotten about XSLT and its potential applications and what I saw in the above examples were inspiring to me. Also, I kind of ignored how OPML, which I’ve been using as a format to backup and export/import my RSS feeds, can be styled and used as a human-readable experience on the web.

After a few more clicks, I landed on the OPML blogroll on Maya’s site. As I stated on Mastodon, probably the best and most useful blogroll I’ve ever seen. Not only they explain why each link might be interesting to anyone visiting, it’s also beautifully formatted and capable of being imported in my RSS reader.

This prompted me to apply styles to my RSS feed and give a human readable format to it. It was surprisingly easy, and I wonder why didn’t I do it sooner. I’ve been using the widespread feed plugin for Jekyll, though since my main motivation for leaving WordPress was to take full control over my code, I should have managed the feed myself rather than relying on a third party.

Using Jekyll functionality

Since I wanted to have both blog posts and projects — a Jekyll collection — I created a loop that would exploit the layout type rather than the content type, iterating 20 times (my configuration value for posts_limit) through the resulting variable:

{% assign projects = site.documents | where:"layout", "project" %}
{% assign blog = site.documents | where:"layout", "post" %}
{% assign posts = projects | concat: blog | sort: 'date' | reverse %}
{% for post in posts limit:site.posts_limit %}
<item>
[code here]
</item>

Finally, I created an XSL file to style the feed page into a human readable format, following the aforementioned example by Matt Webb. Since I rewrote the RSS feed from scratch, I also decided to add new features to the .xsl file:

  • an introduction to who I am at the top of the main feed;
  • useful author information directly in each post, for easy contact information;
  • a “reply via email” link at the end of each post, visible on any RSS reader.
Author contact info at the top of a post
Author contact info at the top of a post
A reply link at the bottom of each post
A reply link at the bottom of each post

The CSS file attached to the XSL presentation is so small that I didn’t bother to minify it. The sum of 3 files are less than 5 KB.

Before & after

Here’s a link to my new human-readable RSS feed. Below, a visual comparison of the before and after.

RSS feed before refactor
RSS feed before refactor
RSS feed before refactor
RSS feed before refactor

Source code

Also posted on

Originally published at https://minutestomidnight.co.uk on May 2, 2022.

Producer, sound designer and web developer. Released the album ‘After 1989: A Trip To Freedom’ about a real-life story between two wars. Game audio enthusiast.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Simone Silvestroni

Simone Silvestroni

Producer, sound designer and web developer. Released the album ‘After 1989: A Trip To Freedom’ about a real-life story between two wars. Game audio enthusiast.

More from Medium

I Dreaded My First Colonoscopy So Much I Brought a Sharpie to the Procedure

Anthropology of Christmas Letters

Vintage Christmas card with retro Santa duplicated multiple times on Fred’s University logo.

Scratch Card Template: A Gamified Pop Up That Works — Poptin blog

Safle enhances its Cross Chain and EVM compatibility with Velas