Publishing an RSS feed with Gatsby
Tags: gatsby, rss
Published: 2019-01-01 20:25:29

---
title: Publishing an RSS feed with Gatsby
published: true
tags: gatsby, rss
canonical_url: https://wheaton.dev/notes/gatsby-rss
---

## Wait, what's RSS?

In their article on how it's [making a comeback](https://www.wired.com/story/rss-readers-feedly-inoreader-old-reader/), Wired explains:

> Its aim is straightforward: to make it easy to track updates to the content of a given website in a standardized format ... it can give you a comprehensive, regularly updated look at all of the content your favorite sites publish throughout the day.

That standardized format is an XML file (see one for [this site](https://wheaton.design/rss.xml)) that allows apps like [Feedly](https://feedly.com/) to notify users when you post new content.

Generating this for your [Gatsby](https://www.gatsbyjs.org/) blog is fairly straightforward.

## Publishing a feed

Start by adding the [gatsby-plugin-feed](https://www.npmjs.com/package/gatsby-plugin-feed) package to your site.

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

Now add it to the array of plugins in `gatsby-config.js`.

```
plugins: [
  // Other plugins will already be here, don't forget the comma.
  'gatsby-plugin-feed',
];
```

The RSS feed is only generated in production mode. You can test it by running `gatsby build && gatsby serve` and navigating to [http://localhost:9000/](http://localhost:9000/).

Congratulations, you have an RSS feed! 🎉

Or maybe you're staring at an ugly error message like I was. Let's get that fixed.

## Customizing the feed

By default, the plugin looks for a `slug` field that's associated with each blog post. This is the part of the URL that represents a post, such as _/blog/the-post-title_. It isn't generated for each post by default.

While you can configure [another plugin](https://www.gatsbyjs.org/packages/gatsby-plugin-slug/) to generate slugs, you can have full control over your URLs by including a `path` in the front matter of each post.

```
---
path: '/blog/the-post-title'
---

The content of your post.
```

Next, update `gatsby-config.js` to replace the single line you added earlier (with default options) with an object containing your custom configuration.

```
{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMarkdownRemark } }) => {
          return allMarkdownRemark.edges.map(edge => {
            return Object.assign({}, edge.node.frontmatter, {
              description: edge.node.excerpt,
              date: edge.node.frontmatter.date,
              url: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
              guid: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
              custom_elements: [{ 'content:encoded': edge.node.html }],
            });
          });
        },
        query: `
          {
            allMarkdownRemark(
              limit: 1000,
              sort: { order: DESC, fields: [frontmatter___date] }
            ) {
              edges {
                node {
                  excerpt
                  html
                  frontmatter {
                    date
                    path
                  }
                }
              }
            }
          }
        `,
        output: '/rss.xml',
        title: "RSS Feed",
      },
    ],
  },
},
```

This isn't quite as complex as it looks. Your RSS feed is generated by the `serialize()` function. You'll see that it returns an array of posts, with an object for each post containing properties like the description and published date. Those values come from GraphQL queries of the site's metadata (top) and blog posts (bottom).

There's a good chance that the code above will work for you. If not, use the [GraphiQL](http://localhost:8000/___graphql) tool to test queries and explore the data you have available until you're able to complete the object that's returned for each post.

While it may take a few tries to get through the errors, you'll soon have a custom configuration for your blog. This is a _set it and forget it_ task that will automatically generate an RSS feed of the latest posts when your site builds.

## Next steps

- Subscribe to your blog with an app like [Feedly](https://feedly.com/) to keep an eye on your RSS feed.
- Explore [other configuration options](https://www.npmjs.com/package/rss#itemoptions) for the plugin.
- Learn more about [GraphQL queries](https://graphql.org/learn/queries/).