Set up RSS Feed in Gridsome

Jan 19, 2020 by Jose Garrido

When you set up your Gridsome blog you also want to have an RSS feed working to have semless integration with services such as a mailing list for example. When a new post is created, the RSS feed is updated automatically and your newsletter provider is notified of the change and sends an email to your readers with the new page or post.

There are many other examples where creating an RSS feed in Gridsome is useful and the good news is it's very easy to set up. You just have to install the plugin and write the configuration. Once that's set up it will update automatically when you add content to your website.

Install the RSS Feed plugin in Gridsome

You just have to run this command to install the necessary requirements for the feed: npm install gridsome-plugin-rss

Once that's done in the plugins section of your gridsome.config.js file add the following object customizing the contents with your website specific data:

{
  use: 'gridsome-plugin-rss',
  options: {
    contentTypeName: 'Post',
    latest: true,
    maxItems: 1000,
    feedOptions: {
      title: 'Your Website Name RSS',
      feed_url: 'https://yourwebsite.com/rss.xml',
      site_url: 'https://yourwebsite.com'
    },
    feedItemOptions: post => ({
      title: post.title,
      description: post.description,
      url: 'https://yourwebsite.com/' + post.slug,
      author: post.fields.author
    }),
    output: {
      dir: './static',
      name: 'rss.xml'
    }
  }
}

With that you should see your RSS feed automatically generated and updated in http://yourwebsite.com/rss.xml

You need to replace the title, feed_url, site_url and url inside feedItemOptions with the name and url of your website. Also the field names inside feedItemOptions might change depending on how you structured your Markdown files. For example if instead of description you have a summary for each post the you'll need to replace that field name in the configuration above.

Configure RSS feed in Gridsome

  1. The contentTypeName field is required and it tells the plugin what is the name of the Type used to represent a blog post. In our example we call our blog posts Post but in your case it can be BlogPost of Article depending on your Gridsome configuration or starter used.

  2. The (optional) latest field in the configuration is options. If set to true then it will order chronologically the results in your RSS feed with the newest items at the top.

  3. The (optional) maxItems field denotes the maximum amount of results that will be added to the feed.

  4. The output object field explains the feed how and where to place the RSS feed file generated. The dir field denotes where the file is located and the name field denoted the name of the file itself. So if you want to call it /my-awesome-rss.xml you can replace the name there.

Did you like the article? Consider subscribing to the newsletter.

The latest articles and resources, sent directly to your inbox. The best part? It's free.