Opens an external site in a new window
Pride Month Hold my hand 🫱🏾‍🫲🏼
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Astro RSS Feed: add a Blog Feed to your Astro Site # Astro RSS Feed: add a Blog Feed to your Astro Site #

blurry low resolution placeholder image Astro RSS Feed
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Astro Astro Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Astro RSS Feed: add a Blog Feed to your Astro Site #

Published: 4 years ago
5 minute read
Gunning Fog Index: 5.5
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🍼 Why you’d add an RSS Feed to your Astro Site #

In this video, you will see you can add an Astro RSS feed to your site without any external packages: the feature comes for free with Astro. What is an RSS feed, though? You can use a podcast app to find and subscribe to podcasts. Similarly, there are RSS apps which let you subscribe to written content and have new content appear in your feed as well as let you read written content. That is all powered by RSS feeds. On top, you can use RSS feeds in automation. For example, add a self-updating list of your latest blog posts to your GitHub feed. In fact, we will see how you can go about doing just that in this video.

As well as introducing RSS feeds, the video shows you how you can link Markdown front matter in your blog posts into your RSS feed. Essentially, you can set up your RSS feed in Astro and then forget about it. New content is automatically added so long as your posts contain the right meta. With Astro, by default, the generated RSS feed is available at https:/example.com/rss.xml. Astro even styles the RSS feed for you… what more could you ask for 😅?

Anyway, enough chat, here’s the video. You can drop a comment below or reach out for a chat on Element  as well as Twitter @mention  if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Astro RSS Feed: add a Blog Feed to your Astro Site

🗳 Poll #

What’s most important in an Astro starter for you?
Voting reveals latest results.

🖥 Code #

Astro Config #

    
1 import { defineConfig } from 'astro/config';
2
3 import svelte from '@astrojs/svelte';
4
5 // https://astro.build/config
6 export default defineConfig({
7 site: 'https://example.com',
8 sitemap: true,
9 integrations: [svelte()],
10 });

getStaticPaths #

    
1 ---
2 import BaseLayout from '$layouts/BaseLayout.astro';
3
4 import website from '$config/website';
5
6 /**
7 * Astro API see: https://docs.astro.build/en/reference/api-reference/#getstaticpaths
8 * @returns {Promise<{params: {slug: string;}; props: { content: string; title: string; metadescription: string;}}[]>}
9 */
10 export async function getStaticPaths({ rss }) {
11 /** @type {Promise<{ Content: AstroComponent; frontmatter: {datePublished: string; postTitle: seoMetaDescription: string;}; file: URL;}[]>} */
12 const posts = await Astro.glob('../content/posts/**/index.md');
13
14 const { siteLanguage, siteTitle, siteUrl } = website;
15
16 const items = posts
17 .sort(
18 (
19 { frontmatter: { datePublished: datePublishedA } },
20 { frontmatter: { datePublished: datePublishedB } },
21 ) => Date.parse(datePublishedB) - Date.parse(datePublishedA),
22 )
23 .map(
24 ({
25 file,
26 frontmatter: { datePublished, postTitle: title, seoMetaDescription: description },
27 }) => {
28 const slug = file.split('/').at(-2);
29
30 return {
31 title,
32 description,
33 link: `${siteUrl}/${slug}/`,
34 pubDate: datePublished,
35 };
36 },
37 );
38
39 rss({
40 title: siteTitle,
41 stylesheet: true,
42 description: `${siteTitle} Blog Posts`,
43 customData: `<language>${siteLanguage.toLowerCase()}</language>`,
44 items,
45 });
46
47 return posts.map(
48 ({ Content, file, frontmatter: { postTitle: title, seoMetaDescription: metadescription } }) => {
49 const slug = file.split('/').at(-2);
50
51 return {
52 params: { slug },
53 props: { Content, title, metadescription },
54 };
55 },
56 );
57 }
58
59 const { Content, title, metadescription } = Astro.props;
60 const { slug } = Astro.params;
61
62 const seoProps = {
63 metadescription,
64 slug,
65 title,
66 };
67 ---
68
69 <BaseLayout {...seoProps}>
70 <h1>{title}</h1>
71 <div class="container">
72 <Content />
73 </div>
74 </BaseLayout>

Timestamp snippet #

Add this snippet to your shell profile file. This has been tested on macOS using zsh. If you use other shells or operating systems, you might need to drop it into .bashrc, .profile or .bash_profile. Also, on Linux and Unix, swap pbcopy for xclip to copy the timestamp to the clipboard.

~/.zshrc
shell
    
function timestamp {
ts=$(echo -n $(date +"%Y-%m-%dT%H:%M:%S.000%z"))
echo -n $ts | pbcopy
echo ${ts}
}

Use tabs for indentation here for best results.

🔗 Links #

  • Getting started with the Astro Blog Markdown Starter
  • Example RSS Feed: Rodney Lab Site
  • Astro Blog Markdown GitHub repo 
  • Stefan Natter post on linking your GitHub profile to your RSS Feed 
  • Astro docs on getStaticPath API 
  • Vite Glob imports 
  • Twitter handle: @askRodney 

RSS Apps #

  • Raven RSS Reader App 
  • NetNewsWire RSS Reader App 

🏁 Astro RSS Feed: Summary #

What is an RSS feed? #

RSS feeds are just lists of website content which you can publish on your website. Just like you have podcast apps to discover and subscribe to podcasts, there are also RSS apps for finding written content. To let folks subscribe to your content feed, you just have to make sure your RSS feed is in the right format. Typically, you publish an rss.xml file on your site which contains information on the language of the content and a description as well as links to the actual articles. Ideally, you want to set and forget RSS for your blog, so your site builder refreshes rss.xml each time you make new content available.

How can you use an RSS feed with a blog #

Adding an RSS feed to your blog makes it easy for your followers to subscribe to your content. As well as this, you can use the RSS feed in automation. For example, if you are technically minded, you might consider wiring up services like IFTTT and Zapier. If you are a developer and have a GitHub page, you can also have GitHub actions automatically generate an up-to-date list of your latest posts right in your profile.

What plugins and packages does Astro need to generate an RSS feed? #

Astro is a kind of batteries included tool. As such, you do not need to add a single plugin or package to generate an RSS feed on every build. We have seen you just need to add a couple of lines to your config. You also need to let Astro know how to map meta on your posts to the expected RSS fields. You leave the rest to Astro, it generates your feed in the format expected by RSS apps as well as automation platforms.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

Just dropped a new video talking all about how you can add an RSS feed to your new Astro blog.

If you're using the 🚀 Astro Blog Markdown starter, this is all already in there, and tested on Astro v0.26 just spin it up!

Hope you find is useful!

https://t.co/GUFXfNKLGn

— Rodney (@askRodney) April 4, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
ASTRO

Related Posts

blurry low resolution placeholder image Astro Server-Side Rendering: Edge Search Site

Astro Server-Side Rendering: Edge Search Site

plus
astro
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.