Adding an RSS feed to an Astro blog

SeriesPart of How this blog was built — documenting every decision that shaped this site.

RSS is the oldest and most reliable way to follow a blog. No algorithm, no platform dependency, no notification settings. A reader checks the feed URL, sees new items, shows them. That simplicity is exactly why it’s worth supporting.

Adding an RSS feed to an Astro site is straightforward with the @astrojs/rss package. There are a few things to get right: draft filtering, absolute URLs, and a self-referencing link that validators expect.

Installing the package

Astro doesn’t ship with RSS support out of the box, but the official integration adds everything needed:

1
pnpm add @astrojs/rss

The feed endpoint

The feed lives at src/pages/rss.xml.js. Astro treats any .js file in src/pages/ as a route, and a named GET export marks it as an endpoint that generates output at build time.

A few parts of this are easy to get wrong.

Draft filtering

The draft flag alone isn’t enough. A post with draft: false and a future pubDate is scheduled, not live. Filtering on !post.data.draft would leak it into the feed before it’s published.

This blog distinguishes three publication states:

State	Condition
`draft`	`draft: true`
`scheduled`	`draft: false`, future `pubDate`
`published`	`draft: false`, past or current `pubDate`

The isPubliclyPublished utility returns true only for the published state:

1
export function isPubliclyPublished(post: {
2
  data: { draft: boolean; pubDate: Date };
3
}): boolean {
4
  return !post.data.draft && post.data.pubDate <= new Date();
5
}

If you haven’t extracted this into a utility, the inline equivalent is:

1
const now = new Date();
2
const posts = (await getCollection("posts"))
3
  .filter((post) => !post.data.draft && post.data.pubDate <= now)
4
  .sort(/* ... */);

Do not use import.meta.env.DEV to conditionally include drafts. The RSS feed should never expose unpublished content, regardless of the build environment.

Sorting

Posts are sorted by pubDate descending so the most recent item appears first. Most RSS readers display items in the order they appear in the feed XML, so the sort order matters.

1
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())

Post links

The link value uses post.id, which in Astro’s Content Layer API is the folder name of each post. For a post at collections/posts/rss-feed-astro/index.md, post.id is rss-feed-astro. Prefixing it with /blog/ produces the correct page URL, with no slug manipulation needed.

1
link: `/blog/${post.id}/`,

Absolute URLs

The site property on the rss() call is context.site, the value set in astro.config.mjs:

1
export default defineConfig({
2
  site: "https://sourcier.uk",
3
  // ...
4
});

The @astrojs/rss package uses this to resolve relative link values into absolute URLs. Without site configured, feed items would have relative URLs that most RSS readers can’t navigate.

atom:link self-reference

RSS validators and some readers expect an <atom:link rel="self"> element in the channel, pointing back to the feed’s own URL. The atom namespace must also be declared on the root <rss> element, which the @astrojs/rss package handles via the xmlns option:

1
xmlns: {
2
  atom: "http://www.w3.org/2005/Atom",
3
},
4
customData: [
5
  `<language>en-gb</language>`,
6
  `<atom:link href="${context.site}rss.xml" rel="self" type="application/rss+xml"/>`,
7
].join(""),

Without this, the W3C validator flags a “missing atom:link” warning and some readers cannot determine the canonical feed URL.

Validating the feed

Before deploying, it’s worth running the built feed through the W3C Feed Validation Service or RSS Board’s validator. Common mistakes like missing pubDate, non-absolute link values, and invalid XML characters in post content all surface here before they cause problems in readers.

Build the site locally and check dist/rss.xml:

1
pnpm build && open dist/rss.xml

The raw XML should be readable in the browser. If the browser shows a parse error, something in the feed is malformed.

Adding the feed autodiscovery link

RSS readers look for a <link rel="alternate"> tag in the page <head> to discover the feed URL automatically. Add it to BaseLayout.astro:

1
<link
2
  rel="alternate"
3
  type="application/rss+xml"
4
  title="Sourcier RSS Feed"
5
  href="/rss.xml"
6
/>

With this in place, browsers and readers that support RSS autodiscovery will surface the feed when a user visits any page on the site.

The complete feed endpoint and autodiscovery link are in the sourcier.uk repository.

Full code listing

1
import rss from "@astrojs/rss";
2
import { getCollection } from "astro:content";
3
import { isPubliclyPublished } from "../utils/drafts";
4

5
export async function GET(context) {
6
  const posts = (await getCollection("posts"))
7
    .filter(isPubliclyPublished)
8
    .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
9

10
  return rss({
11
    title: "Sourcier — Blog",
12
    description:
13
      "Practical software engineering writing for people transitioning into tech, engineers growing in confidence, and teams improving engineering practice.",
14
    site: context.site,
15
    xmlns: {
16
      atom: "http://www.w3.org/2005/Atom",
17
    },
18
    items: posts.map((post) => ({
19
      title: post.data.title,
20
      description: post.data.description,
21
      pubDate: post.data.pubDate,
22
      link: `/blog/${post.id}/`,
23
    })),
24
    customData: [
25
      `<language>en-gb</language>`,
26
      `<atom:link href="${context.site}rss.xml" rel="self" type="application/rss+xml"/>`,
27
    ].join(""),
28
  });
29
}