Add the Eleventy RSS plugin

The first to-do I have completed in the list I have added in the homepage is a simple one: add the RSS plugin. I needed an easy win.

Besides the basic structure we got when we installed Eleventy, all extra things will be done using plugins. There are plugins for everything; some of them are official - made by Eleventy team - and some of them are created by the strong community.

RSS is one of the official plugins and it is a very simple one. Turns out this is a very good example to understand how plugins work in Eleventy.

How to install the RSS template

1. Open the terminal and type

   npm install @11ty/eleventy-plugin-rss

   You will notice that something new was added in your package.json

2. I opted for using the virtual template. So I got my eleventy.config.js and added this inside my export default function:

  
eleventyConfig.addPlugin(feedPlugin, {
  type: "rss", // or "rss", "json"
  outputPath: "/blog/feed.xml",
  collection: {
    name: "post", // iterate over `collections.posts`
    limit: 10,     // 0 means no limit
  },
  metadata: {
    language: "en",
    title: "Ana Martins - Blog",
    subtitle: "Blog about my learning path with Javascript and its friends.",
    base: "https://anamartins.github.io/blog/",
    author: {
      name: "Ana Martins"
    }
  }
});

Don't forget to import the package doing

import { feedPlugin } from "@11ty/eleventy-plugin-rss";

If you do not have a config file yet, just create a new file in the root of your project called eleventy.config.js and add this:

import { feedPlugin } from "@11ty/eleventy-plugin-rss";
export default function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight, {
    preAttributes: {
      tabindex: 0}
      });
      eleventyConfig.addPlugin(feedPlugin, {
      type: "rss", // or "rss", "json"
      outputPath: "/blog/feed.xml",
      collection: {
          name: "post", // iterate over `collections.posts`
          limit: 10,     // 0 means no limit
      },
      metadata: {
          language: "en",
          title: "Ana Martins - Blog",
          subtitle: "Blog about my learning path with Javascript and its friends.",
          base: "https://anamartins.github.io/blog/",
          author: {
          name: "Ana Martins"
          }
      }
      });
  };

3. Replace my data with your data.

And that's it! Go and check the url you added in outputPath. Mine is https://anamartins.github.io/blog/feed.xml