Adding an RSS feed to your VuePress blog

This is a quick, but helpful tutorial on adding an RSS feed to your VuePress website.

First we should install the RSS plugin by using yarn add vuepress-plugin-rss -D or npm i vuepress-plugin-rss -D depending on your chosen package manager.

Next, we need to update our config.js in /docs/.vuepress/config.js and add the following.

module.exports = {    plugins: [      [        'vuepress-plugin-rss',        {          base_url: '/', // required          site_url: 'https://michaelbrooks.co.uk', // required          copyright: '2019 Michael Brooks', // optional          // filter some post          filter: (frontmatter) => { return [true|false] },          // How many articles          count: 20        }      ]    ]}

If you already have a plugins array, then you can copy and paste the section inside of that array. You can remove the comments and update base_url, site_url and copyright as needed. If you need more or less than 20 posts within your website, then go ahead and update as nessecary.

Then our bare minumum frontmatter within our markdown files should look like the following.

---title: "Example frontmatter title"date: "2019-01-05"---

If you want some or all of your text to display within your RSS feed, then you should add a <!-- more --> comment. Then any content above the comment will be extracted and exposed as $page.excerpt which is then used through the RSS plugin. It can also be used to render excerpts on your blog’s index page.

Stay tuned because next time we’ll learn how we can use our RSS feed to automatically post to our Facebook and Twitter profiles using IFTTT.

If you like this post and want to see more in the future, please feel free to signup below.