DEV Community

Conor Meagher
Conor Meagher

Posted on • Originally published at conormeagher.com on

RSS Feed in a 11ty site

#11ty #rss #xml

RSS Logo

https://twitter.com/conrmahr/status/1479151678637187079(https://twitter.com/davatron5000/status/1308404187299012616?s=20&t=e4vdBOpt8sEjbCJp21Qz7A)

Dave Rupert is right. Really Simple Syndication or RSS is a great way for people to digest their favorite blog articles with a RSS reader of their choice not be bombarded with ads, click-bait, and spam. So why not do your readers a favor and add it to your 11ty blog?

Install package #

Start in your 11ty project folder and install this package.

npm install @11ty/eleventy-plugin-rss --save-dev
Enter fullscreen mode Exit fullscreen mode

Include in your 11ty configuration #

In the .eleventy.js file, require the plugin and include it in the module.exports function with any other plugins you may have.

const pluginRss = require("@11ty/eleventy-plugin-rss"); module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(pluginRss); };
Enter fullscreen mode Exit fullscreen mode

Add to feed metadata #

In the _data/metadata.json file, add the unique metadata for the feed.

{ "feed": { "subtitle": "Tech posts to educate, elevate, but mostly entertain.", "filename": "feed.xml", "path": "/feed/feed.xml", "url": "https://conormeagher.com/feed/feed.xml", "id": "https://conormeagher.com/" }, },
Enter fullscreen mode Exit fullscreen mode

Create a RSS feed #

From your top-level of your 11ty project folder, create this template file.

touch src/feed.xml
Enter fullscreen mode Exit fullscreen mode

Atom has several advantages over RSS: less restrictive licensing, IANA-registered MIME type, XML namespace, URI support, RELAX NG support. [1] Knowing this, we will copy and paste the Atom format to produce our feed template. Other formats are available such as RSS and JSON. [2]

--- # Metadata comes from _data/metadata.jsonpermalink: "{{ metadata.feed.path }}"eleventyExcludeFromCollections: true --- <?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"> <title>{{ metadata.title }}</title> <subtitle>{{ metadata.feed.subtitle }}</subtitle> <link href="{{ metadata.feed.url }}" rel="self"/> <link href="{{ metadata.url }}"/> <updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated> <id>{{ metadata.url }}</id> <author> <name>{{ metadata.author.name }}</name> <email>{{ metadata.author.email }}</email> </author> {%- for post in collections.posts | reverse %} {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %} <entry> <title>{{ post.data.title }}</title> <link href="{{ absolutePostUrl }}"/> <updated>{{ post.date | dateToRfc3339 }}</updated> <id>{{ absolutePostUrl }}</id> <content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content> </entry> {%- endfor %} </feed>
Enter fullscreen mode Exit fullscreen mode

Important: This code assumes you save your date frontmatter in UTC format, not your local timezone.

--- date: 2022-01-01T00:00:00Z ---
Enter fullscreen mode Exit fullscreen mode

That's it. You now have a Atom v1.0 feed on your 11ty website when you serve or build the project.

Check out mine and subscribe!

https://conormeagher.com/feed/

  1. "RSS compared with Atom". Retrieved June 14, 2022 ↩ī¸Ž

  2. "Sample Feed Templates". Retrieved July 12, 2022 ↩ī¸Ž

Top comments (0)