RSS feed for your Gatsby Site


Adding an rss feed to your gatsby js site is super simple.

https://www.gatsbyjs.org/packages/gatsby-plugin-feed/

Install

npm install --save gatsby-plugin-feed

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: 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.fields.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
                  custom_elements: [{ "content:encoded": edge.node.html }],
                })
              })
            },
            query: `
              {
                allMarkdownRemark(
                  sort: { order: DESC, fields: [frontmatter___date] },
                ) {
                  edges {
                    node {
                      excerpt
                      html
                      fields { slug }
                      frontmatter {
                        title
                        date
                      }
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "Your Site's RSS Feed",
            // optional configuration to insert feed reference in pages:
            // if `string` is used, it will be used to create RegExp and then test if pathname of
            // current page satisfied this regular expression;
            // if not provided or `undefined`, all pages will have feed reference inserted
            match: "^/blog/",
            // optional configuration to specify external rss feed, such as feedburner
            link: "https://feeds.feedburner.com/gatsby/blog",
          },
        ],
      },
    },
  ],
}

My updated graphql query

{
	allMarkdownRemark(
		sort: { order: DESC, fields: [frontmatter___date] }
		filter: {
			frontmatter: {
				templateKey: { in: ["blog-post"] }
				status: { in: ["published"] }
			}
		}
	) {
		edges {
			node {
				excerpt
				rawMarkdownBody
				fields {
					slug
				}
				frontmatter {
					title
					date
					cover {
						relativePath
					}
					twitter_cover {
						relativePath
					}
				}
			}
		}
	}
}


👀 see an issue, edit this post on GitHub

If you found value in this post
and want to send a tip.

Buy Me A Coffee

If you want to show your support, non-monetarily

🙌 Share this post on

Check out my otherblogs

.