How to setup an RSS feed in Gatsby
Tags: javascript, gatsby
Published: 2020-09-21 18:52:45

---
title: How to setup an RSS feed in Gatsby
published: true
date: 2020-09-19 00:00:00 UTC
tags: #javascript, #gatsby
canonical_url: https://www.mariokandut.com/how-to-setup-an-rss-feed-in-gatsby/
---

_This article was originally published on [mariokandut.com](https://www.mariokandut.com/how-to-setup-an-rss-feed-in-gatsby)._

### What is an RSS feed

> "An RSS Feed is a standard XML file listing a website’s content in a subscribable format, allowing readers to consume your content in news aggregators, also called feed reader apps. Think of it as a syndicated distribution channel for your site’s content." [see Gatsby docs](https://www.gatsbyjs.com/docs/adding-an-rss-feed/#more-resources)

## Adding an RSS Feed to your gatsby site

I assume you know your way around npm, gatsby and javascript.

I will use this blog, [mariokandut.com](https://www.mariokandut.com/), as an example. The posts are in Markdown. In the Gatsby docs you can also find a good [how-to](https://www.gatsbyjs.org/docs/adding-an-rss-feed/).

Install the npm package.

```
npm install --save gatsby-plugin-feed
```

The RSS feed needs a way to uniquely identify content, typically a URL or slug or path.

In `gatsby-config.js` you need to add the plugin and **in most cases** you need to customize it. I wanted to integrate tags and exclude my blog post template.

In the rare case, you are happy with the basics, just add the plugin and your siteUrl.

```
module.exports = {
  siteMetadata: {
    siteUrl: `https://www.YOUR-WEBSITE-NAME.com`,
  },
  plugins: [`gatsby-plugin-feed`],
};
```

**Now** , let's have some fun with customizing the **RSS feed plugin**. Below is the code snippet I am using in this blog.

```
{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
            site_url: siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMarkdownRemark } }) => {
          return allMarkdownRemark.edges
            .filter(
              edgePost =>
                edgePost.node.frontmatter.isPublished === 'true',
            )
            .map(edge => {
              return Object.assign({}, edge.node.frontmatter, {
                description: edge.node.frontmatter.description,
                date: edge.node.frontmatter.datePublished,
                url:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                guid:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],
              })
            })
        },
        query: blogPostsQuery,
        output: '/rss.xml',
        title: "Mario's RSS Feed",
      },
    ],
  },
}
```

I guess the syntax looks pretty self-explanatory, so I just go through the main points. With `output` you customize the URL of the RSS feed and with `title` the title. The query field is the graphQL query, here the placeholder blogPostsQuery.

Before mapping of the edges I am filtering if the blogpost is published. I have a flag in markdown for this (isPublished).

```
.filter(edgePost => edgePost.node.frontmatter.isPublished === 'true')
```

I then map over the filtered edges and create my object. I also add customized elements to the RSS feed, such as the **html encoded content** , the **tags** `(array in markdown)` and the **featuredImage**.

```
custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],
```

Now start the project with `gatsby develop` and go to localhost:8000/rss.xml. What do you see?

Yes, a 404 page. The RSS feed won't work with gatsby develop, you have to build and serve your project. `gatsby build && gatsby serve`, now go to localhost:9000 (standard port) and check the RSS feed. You should see something similar as [here](https://www.mariokandut.com/rss.xml). If yes, commit your changes and deploy and we are done with the first step.

**YaY** , 🥳🥳🥳. Well done.

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.

Do you want to 🤖 **automate your content distribution** and **auto-post** to [medium](https://www.medium.com/) and [dev.to](https://www.dev.to)?Here is an article I wrote about [How to automatically post to medium and dev.to](https://www.mariokandut.com/how-to-automatically-post-from-gatsby-to-medium-and-dev-to/).