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

📹 Video #

🖥 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.

    
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.

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.