jsschools
RSS

Build an RSS Feed in 20 Lines

RSS

`@astrojs/rss` generates a feed from your content collection. Just point it at the collection, set the site URL, done.

3 min read Level 1/5 #astro#rss#feed
What you'll learn
  • Install `@astrojs/rss`
  • Author a feed endpoint
  • Include posts from a collection

@astrojs/rss builds an RSS feed from anything iterable — usually a content collection.

Install

npm install @astrojs/rss

A Feed Endpoint

// src/pages/rss.xml.ts
import rss from "@astrojs/rss";
import { getCollection } from "astro:content";

export async function GET(context) {
  const posts = await getCollection("blog", p => !p.data.draft);
  return rss({
    title: "My Blog",
    description: "Latest posts",
    site: context.site!,           // requires `site` in astro.config
    items: posts.map(p => ({
      title: p.data.title,
      pubDate: p.data.pubDate,
      description: p.data.description,
      link: `/blog/${p.id}/`,
    })),
  });
}

After npm run build, the feed is at /rss.xml (or wherever you named the file). Subscribe to it in any RSS reader.

Including Full Content

items accepts a content field for the full HTML body:

items: await Promise.all(posts.map(async p => {
  const { Content } = await render(p);
  // ... or use a Markdown renderer to get HTML ...
  return {
    title: p.data.title,
    pubDate: p.data.pubDate,
    link: `/blog/${p.id}/`,
    content: /* html */ "",       // fill in
  };
})),

Required Config

For the feed to have absolute URLs, set site in your config:

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

Tell browsers and feed readers about the feed:

<link
  rel="alternate"
  type="application/rss+xml"
  title="My Blog"
  href="/rss.xml"
/>

Put it in the base layout <head>. Feed readers find it automatically.

Up Next

Testing your Astro site.

Testing →