DEV Community

Mike Wheaton
Mike Wheaton

Posted on • Originally published at wheaton.dev on

Publishing an RSS feed with Gatsby

Wait, what's RSS?

In their article on how it's making a comeback, 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) that allows apps like Feedly to notify users when you post new content.

Generating this for your Gatsby blog is fairly straightforward.

Publishing a feed

Start by adding the gatsby-plugin-feed package to your site.

npm install --save gatsby-plugin-feed
Enter fullscreen mode Exit fullscreen mode

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',
];
Enter fullscreen mode Exit fullscreen mode

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/.

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 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.
Enter fullscreen mode Exit fullscreen mode

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",
      },
    ],
  },
},
Enter fullscreen mode Exit fullscreen mode

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 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

Top comments (2)

Collapse
 
dylanesque profile image
Michael Caveney

This was such a life-saver for me, thanks for taking the time to write this up!

Collapse
 
mikewheaton profile image
Mike Wheaton

I'm way late on seeing this comment, but I'm glad it helped!