In this showcase, we’re taking a peek behind the curtain to see how the Jekyll Feed plugin works.
If you’re an avid reader of blogs, you might have a list of websites you check out every day. Working through this list every day is a hassle, especially when there’s no new content. You could sign up for a newsletter for each blog, but do you want to read long-form content in your inbox? Wouldn’t it be better to have something similar to email but specifically for the blogs you read? Well, that’s exactly what an RSS reader is. An RSS reader periodically checks an XML feed of the blogs you follow, pulls in the content, and displays them in an interface similar to an email inbox. The XML feed commonly comes in two formats RSS or Atom, which lists the latest posts on the site, including the HTML content of the post and associated metadata such as the published date, title, and author. The two formats are so similar I’m not going to get into the details of how they differ. You can read more about it here.
XML is a text-based format for encoding documents. It looks very similar to HTML, and while they are related, they’re not the same thing. HTML is used for displaying data, whereas XML is used for transferring data. XML is stricter than HTML:
Nowadays, JSON is a more popular format for transmitting data because it’s less verbose and typically easier to work with.
Let’s skip straight to the exciting part - how is the feed generated? The plugin has a file called feed.xml that generates the feed from the site posts. There’s nothing particularly complicated going on here. It’s a file that uses Liquid to generate the output, just like you would on a regular page in Jekyll.
To start, feed.xml has boilerplate code to set up the XML file. Here’s a small snippet:
Then we get into the posts. By default, the feed.xml contains the ten most recent posts:
The title runs through four different filters before its output:
Let’s have a look at what each one is doing:
"hi") into opening and closing quotes (
Next Liquid outputs the link, published date, last updated date, and ID for the post.
There’s a configuration option to only output the post’s excerpt rather than the entire content to keep the feed shorter:
The post’s author matches a data file containing more information like the email, a URI for the author, and full name.
The categories and tags for the post are listed next:
Followed by the excerpt (if there is one):
And finally, an associated image:
That’s it. It’s relatively easy to follow along and is sure better than building it by hand.
There are two other pieces of this plugin: a Liquid tag and a generator.
The Liquid tag has one job - output the metatag to link to the RSS feed. It finds the path and title from the config file and returns a string in this format:
The generator is more involved. It’s mostly setting up where to output the feed, which collection to run it on, and normalizing data. In the end, it calls the feed Liquid file we dissected above to generate the feed.
Jekyll plugins can be a black box, but they’re usually relatively straightforward when you dive into them. Hopefully, this has given you a glimpse into what it takes to generator your Jekyll feed. If you’re interested in more deep dives on Jekyll plugins, reach out on Twitter.
If you’re interested in using Jekyll for your next project, take a look at this Jekyll tutorial to get started.
29 November 2021
22 November 2021
15 November 2021