5 • Beef up your blog

Add an RSS feed

Get ready to…

  • Install an Astro package for creating an RSS feed for your website
  • Create a feed that can be subscribed to and read by RSS feed readers

Astro provides a custom package to quickly add an RSS feed to your website.

This official package generates a non-HTML document with information about all of your blog posts that can be read by feed readers like Feedly, The Old Reader and more. This document is updated every time your site is rebuilt.

Individuals can subscribe to your feed in a feed reader, and receive notification when you publish a new blog post on your site, making it a popular blog feature.

  1. Quit the Astro development server and run the following command in the terminal to install Astro’s RSS package.

    npm install @astrojs/rss
  2. Restart the dev server to begin working on your Astro project again.

    npm run dev
  1. Create a new file in src/pages/ called rss.xml.js

  2. Copy the following code into this new document, replacing the site property with your site’s own unique Netlify URL. Customize the title and description properties, and if necessary, specify a different language in customData:

    src/pages/rss.xml.js
    import rss from '@astrojs/rss';
    
    export const get = () => rss({
      title: 'Astro Learner | Blog',
      description: 'My journey learning Astro',
      site: 'https://my-blog-site.netlify.app',
      items: import.meta.glob('./**/*.md'),
      customData: `<language>en-us</language>`,
    });
  3. This rss.xml document is only created when your site is built, so you won’t be able to see this page in your browser during development. Quit the dev server and run the following commands to first, build your site locally and then, view a preview of your build:

    npm run build
    
    npm run preview
  4. Visit localhost:3000/rss.xml and verify that you can see (unformatted) text on the page with an item for each of your .md files. Each item should contain blog post information such as title, url and description.

  5. Be sure to quit the preview and restart the dev server when you want to view your site in development mode again.