Learn to create an RSS feed for your blog

As a tech blogger, I understand the importance of keeping my readers informed about the latest updates on my blog. While email subscriptions are a great way to reach out to my audience, I also want to offer an RSS feed for those who prefer to receive updates through feed readers or aggregators.

What is an RSS Feed?

RSS (Rich Site Summary or Really Simple Syndication) is a standardized format for delivering regularly changing web content. It allows users to subscribe to updates from their favorite websites, blogs, and news outlets. Unlike email subscriptions, which require users to provide their email addresses and receive updates in their inbox, RSS feeds deliver updates directly to feed readers or aggregators.

Email Subscriptions vs. RSS Feeds: Pros and Cons

Email subscriptions are a more direct way to reach out to audiences. They allow content to be personalized and engage with readers on a more personal level. However, they require users to provide their email addresses, which can be a barrier for some users who are concerned about privacy or inbox clutter.

On the other hand, RSS feeds are more anonymous and offer a streamlined way to receive updates without sharing personal information. Users can manage their subscriptions easily and receive updates in a feed reader of their choice. However, RSS feeds may not offer the same level of engagement as email subscriptions.

Setting Up an RSS Feed for your Blog

To set up an RSS feed for your blog, you can leverage the power of Next.js, a popular React framework for building web applications. If you want to learn more about how to setup a simple blog using Next.js, you can find out more from the article that I have written here

First, install the feed package. It's a package used to generate feed files for your website.

npm install feed

Next, add the following util function so that we can automatically call and generate the required rss.xml file during the build time of the blog.

// lib/generateRssFeed.ts
export default async function generateRssFeed() {
  // Fetch all articles metadata
  const allPosts = await getAllArticles()
  const siteURL = "https://jianhowe.com"

  // Customize the feed options
  const feedOptions = {
    title: "Jian Howe's blog posts | RSS Feed",
    description: 'Welcome to my blog!',
    id: `${siteURL}`,
    link: `${siteURL}`,
    image: `${siteURL}/logo.png`,
    favicon: `${siteURL}/favicon.png`,
    copyright: `All rights reserved ${new Date().getFullYear()}, Lee Jian Howe`,
    generator: 'Feed for Node.js',
    feedLinks: {
      rss2: `${siteURL}/rss.xml`,
    },
    author: {
      name: 'Lee Jian Howe',
      email: '[email protected]',
      link: `${siteURL}`,
    },
  }

  // Create a new instance of feed
  const feed = new Feed(feedOptions)

  // For each post, create a new item using the frontmatter metadata
  allPosts.data.forEach((post) => {
    feed.addItem({
      title: post.title,
      id: `${siteURL}/blog/article/${post.pathname}`,
      link: `${siteURL}/blog/article/${post.pathname}`,
      description: post.description,
      date: new Date(post.date),
      image: `${siteURL}${post.preview}`,
    })
  })
  // Finally write the feed into a rss xml file
  fs.writeFileSync('./public/rss.xml', feed.rss2())
}

feed also supports other file formats like json or atom.

Next, add this function to your blog's index.tsx under getStaticProps. It is ideal, as it will generate an RSS file during the build time of the website and add all the new and existing posts of your blog, publishing the details into the RSS file.

export async function getStaticProps() {
    // generate RSS feed here
    await generateRssFeed()
    // other logic in be inserted below
}

Adding a link to RSS feed

At the footer of your website, add a link to the rss file directly as such

<Link
  href="https://jianhowe.com/rss.xml"
  target="_blank"
  rel="noreferrer"
>
  <RssIcon className="h-6 w-6 stroke-orange-300 hover:stroke-orange-500 stroke-2" />
</Link>

In conclusion, setting up an RSS feed for your blog is a great way to keep your readers informed about your latest updates, especially for those who prefer to receive updates through feed readers or aggregators. RSS feeds can be used to publicize content from written to images/video, making it a versatile tool for content distribution. It is up to the owner of the feed to describe and curate the feed content to best serve their audience.

While email subscriptions offer a more direct and personalized way to engage with your audience, RSS feeds provide a more anonymous and streamlined option for receiving updates without sharing personal information. By leveraging the power of Next.js and the feed package, you can easily generate an RSS feed for your blog. Simply install the package, create a function to generate the feed during the build time of your blog, and add the function to your getStaticProps method in the index.tsx file of your blog. Don't forget to add a link to your RSS feed in the footer of your website for easy access.

By following these steps, you can create an RSS feed for your blog, allowing your readers to stay updated with your latest posts easily.