RSS
Astro supports fast, automatic RSS feed generation for blogs and other content websites. For more information about RSS feeds in general, see aboutfeeds.com.
Setting up @astrojs/rss
Section titled Setting up @astrojs/rssThe @astrojs/rss
package provides helpers for generating RSS feeds using API endpoints. This unlocks both static builds and on-demand generation when using an SSR adapter.
First, install @astrojs/rss
using your preferred package manager:
npm install @astrojs/rss
pnpm install @astrojs/rss
yarn add @astrojs/rss
Then, ensure you’ve configured a site
in your project’s astro.config
. You will use this to generate links in your RSS feed via the SITE
environment variable.
Now, let’s generate our first RSS feed! Create an rss.xml.js
file under your src/pages/
directory. rss.xml
will be the output URL, so feel free to rename this if you prefer.
Next, import the rss
helper from the @astrojs/rss
package and call with the following parameters:
import rss from '@astrojs/rss';
export const get = () => rss({
// `<title>` field in output xml
title: 'Buzz’s Blog',
// `<description>` field in output xml
description: 'A humble Astronaut’s guide to the stars',
// base URL for RSS <item> links
// SITE will use "site" from your project's astro.config.
site: import.meta.env.SITE,
// list of `<item>`s in output xml
// simple example: generate items for every md file in /src/pages
// see "Generating items" section for required frontmatter and advanced use cases
items: import.meta.glob('./**/*.md'),
// (optional) inject custom xml
customData: `<language>en-us</language>`,
});
Generating items
Section titled Generating itemsThe items
field accepts either:
- An
import.meta.glob(...)
result (only use this for.md
files within thesrc/pages/
directory!) - A list of RSS feed objects, each with a
link
,title
,pubDate
, and optionaldescription
andcustomData
fields.
1. import.meta.glob
result
Section titled 1. import.meta.glob resultWe recommend this option as a convenient shorthand for .md
files under src/pages/
. Each post should have a title
, pubDate
, and optional description
and customData
fields in its frontmatter. If this isn’t possible, or you’d prefer to generate this frontmatter in code, see option 2.
Say your blog posts are stored under the src/pages/blog/
directory. You can generate an RSS feed like so:
import rss from '@astrojs/rss';
export const get = () => rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: import.meta.env.SITE,
items: import.meta.glob('./blog/**/*.md'),
});
See Vite’s glob import documentation for more on this import syntax.
2. List of RSS feed objects
Section titled 2. List of RSS feed objectsWe recommend this option for .md
files outside of the pages
directory. This is common when generating routes via getStaticPaths
.
For instance, say your .md
posts are stored under a src/posts/
directory. Each post has a title
, pubDate
, and slug
in its frontmatter, where slug
corresponds to the output URL on your site. We can generate an RSS feed using Vite’s import.meta.glob
helper like so:
import rss from '@astrojs/rss';
const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });
const posts = Object.values(postImportResult);
export const get = () => rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: import.meta.env.SITE,
items: posts.map((post) => ({
link: post.url,
title: post.frontmatter.title,
pubDate: post.frontmatter.pubDate,
}))
});
Including full post content
Section titled Including full post contentBy default, the Astro RSS integration does not support including the content of each of your posts in the feed itself.
However, if you create the list of RSS feed objects yourself, you can pass the content of Markdown files (not MDX), to the content
key using the compiledContent()
property. We suggest using a package like sanitize-html
in order to make sure that your content is properly sanitized, escaped, and encoded for use in the XML feed.
import rss from '@astrojs/rss';
import sanitizeHtml from 'sanitize-html';
// Works with Markdown files only!
const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });
const posts = Object.values(postImportResult);
export const get = () => rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: import.meta.env.SITE,
items: posts.map((post) => ({
link: post.url,
title: post.frontmatter.title,
pubDate: post.frontmatter.pubDate,
content: sanitizeHtml(post.compiledContent()),
}))
});
Adding a stylesheet
Section titled Adding a stylesheetYou can style your RSS feed for a more pleasant user experience when viewing the file in your browser.
Use the rss
function’s stylesheet
option to specify an absolute path to your stylesheet.
rss({
// ex. use your stylesheet from "public/rss/styles.xsl"
stylesheet: '/rss/styles.xsl',
// ...
});
If you don’t have an RSS stylesheet in mind, we recommend the Pretty Feed v3 default stylesheet, which you can download from GitHub and save into your project’s public/
directory.