Add an RSS feed

استعد لـ…

• 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

Install Astro’s RSS package

Section titled Install Astro’s RSS package

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

   npm install @astrojs/rss

   pnpm

   pnpm add @astrojs/rss

   Yarn

   yarn add @astrojs/rss

2. Restart the dev server to begin working on your Astro project again.

   npm

   npm run dev

   pnpm

   pnpm run dev

   Yarn

   yarn run dev

Create an .xml feed document

Section titled Create an .xml feed document

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

2. Copy the following code into this new document. Customize the title and description properties, and if necessary, specify a different language in customData:

   src/pages/rss.xml.js

   import rss, { pagesGlobToRssItems } from '@astrojs/rss';
   
   export async function GET(context) {
     return rss({
       title: 'Astro Learner | Blog',
       description: 'My journey learning Astro',
       site: context.site,
       items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
       customData: `<language>en-us</language>`,
     });
   }

3. Add the site property to the Astro config with your site’s own unique Netlify URL.

   astro.config.mjs

   import { defineConfig } from "astro/config";
   
   export default defineConfig({
     site: "https://example.com"
   });

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

   npm run build
   
   npm run preview

   pnpm

   pnpm run build
   
   pnpm run preview

   Yarn

   yarn run build
   
   yarn run preview

5. Visit http://localhost:4321/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.

   View your RSS feed in a reader

   Download a feed reader, or sign up for an online feed reader service and subscribe to your site by adding your own Netlify URL. You can also share this link with others so they can subscribe to your posts, and be notified when a new one is published.

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

Checklist

Section titled Checklist

• I can install an Astro package using the command line.
• I can create an RSS feed for my website.

Resources

Section titled Resources

• RSS item generation in Astro