Skip to content Skip to footer

A human-readable RSS feed with Jekyll

How I refactored my RSS feed from scratch using Jekyll functionalities, and applying XSLT for presentation to render a human-readable XML feed.

Simone Silvestroni's avatar

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 with its potential applications, so the above examples inspired me. Also, I didn’t know that OPML, which I’ve been using to import and export my RSS feeds, could 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 — likely 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. 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 widespread Jekyll plug-in.

Using Jekyll functionality

I wanted to have both blog posts and projects (a Jekyll collection), hence, 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 %}
      [code here]

Finally, I created an XSL file to style the feed page into a human readable format, following the aforementioned example. Since I was rewriting the RSS feed from scratch, I added 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 Author contact info visible in a feed

A reply link at the bottom of each post A reply via email link is provided at the bottom of each post

The weight of all the required files amounts to 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 after refactor RSS feed after refactor

Source code

Related topics

Hacker News