DEV Community

loading...

How to setup an RSS feed in Gatsby

mariokandut profile image Mario Originally published at mariokandut.com on ・3 min read

This article was originally published on mariokandut.com.

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

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, as an example. The posts are in Markdown. In the Gatsby docs you can also find a good how-to.

Install the npm package.

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

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

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

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

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

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

Do you want to 🤖 automate your content distribution and auto-post to medium and dev.to?Here is an article I wrote about How to automatically post to medium and dev.to.

Discussion (0)

pic
Editor guide