How to Add an RSS Feed to an Astro Blog

An RSS feed is a list of your newest posts that reader apps can follow. In Astro you add one with the official @astrojs/rss package and one small file. Astro turns that file into rss.xml when it builds your site. One extra tag in your layout helps apps find it.

Step 1: Install the package

In your project folder:

npm install @astrojs/rss

Step 2: Tell Astro your web address

A feed needs full links, like https://yoursite.com/blog/hello-world/. So Astro needs to know your address. Open astro.config.mjs and add site:

// @ts-check
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
});

Use your real address. Keep anything else that was already in the file.

Step 3: Make the feed file

Create src/pages/rss.xml.js:

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('posts');
  return rss({
    title: 'My Blog',
    description: 'New posts from my Astro site',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.date,
      link: `/blog/${post.id}/`,
    })),
  });
}

Here’s what’s going on:

• The file name rss.xml.js makes a page at /rss.xml. The .js part goes away.
• getCollection('posts') gets every post.
• title and description describe your whole blog. Change them.
• items is one entry per post. Each one has a title, a date, and a link.
• post.id is the post’s file name without .md. So hello-world.md links to /blog/hello-world/.

If your posts live at a different address, change the link line to match.

Step 4: Help apps find your feed

Open your layout. Inside <head>, add this tag:

<link
  rel="alternate"
  type="application/rss+xml"
  title="My Blog"
  href={new URL('rss.xml', Astro.site)}
/>

Now when someone pastes your home page into a reader app, the app finds the feed by itself.

Step 5: Build and check the feed

npm run build

$ npm run build
19:28:59   ├─ /rss.xml (+17ms)
19:28:59 [build] Complete!

Those are the last two lines of our build. The feed is a page like any other.

Open dist/rss.xml. It starts like this:

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>My Blog</title>
<description>New posts from my Astro site</description><link>https://example.com/</link>
<item><title>A walk by the river</title><link>https://example.com/blog/a-walk-by-the-river/</link>

We added line breaks so it fits. In the real file it’s one long line. That’s normal.

You can also run npm run dev and open localhost:4321/rss.xml. Some browsers show the code. Some offer to download it. Both mean it works.

We ran this on a fresh Astro 7.4 project with five posts. The feed had all five, each with a full link and a date. The tag showed up in the head of every page.

Building with Claude? Paste this guide into Claude Code and ask it to do it for you.

Make it better

• Add a summary. If your posts have a description field, add description: post.data.description, to each item. Reader apps show it under the title.
• Newest first. Most reader apps sort by date on their own. If you want the file in order too, sort posts by date before the map.
• Check it. Paste your live feed address into the W3C Feed Validator after you publish.

Where to go next

• How to add a sitemap to Astro, the same idea for search engines.
• How to add tags and categories to an Astro blog, so readers can browse by topic.
• How to start a newsletter for your Astro site, for readers who prefer email.