Astro RSS Feed: add a Blog Feed to your Astro Site | Rodney Lab - JOYK Joy of Geek, Geek News, Link all geek

NEXT POST >

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

Published: 5 hours ago

0 minute read Gunning Fog Index: 5.5

Content by Rodney

🍼 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 frontmatter in your blog posts into your RSS feed. Essentialy 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 for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 Video #

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

🗳 Poll #

What’s most important in an Astro starter for you?

Accessibility,
Markdown support,
SEO,
Responsive banner image,
Speed optimisations,
something else... drop a comment below to say what!

Voting reveals latest results.

🖥 Code #

Astro Config #

astro.config.mjs

javascript

1 import { defineConfig } from 'astro/config';

3 import svelte from '@astrojs/svelte';

5 // https://astro.build/config

6 export default defineConfig({

7 buildOptions: {

8 site: 'https://example.com',

9 sitemap: true,

11 integrations: [svelte()],

12 });

`getStaticPaths` #

2 import BaseLayout from '$layouts/BaseLayout.astro';

3 import { Markdown } from 'astro/components';

5 import website from '$config/website';

8 * Astro API see: https://docs.astro.build/en/reference/api-reference/#getstaticpaths

9 * @returns {Promise<{params: {slug: string;}; props: { content: string; title: string; metadescription: string;}}[]>}

11 export async function getStaticPaths({ rss }) {

12 /** @type {Promise<{ astro: {source: string;}; datePublished: string; postTitle: seoMetaDescription: string; string; file: URL;}[]>} */

13 const posts = await Astro.fetchContent('../content/posts/**/index.md');

15 const { siteLanguage, siteTitle, siteUrl } = website;

17 const items = posts

18 .sort(

19 ({ datePublished: datePublishedA }, { datePublished: datePublishedB }) =>

20 Date.parse(datePublishedB) - Date.parse(datePublishedA),

22 .map(

24 datePublished,

25 file: { pathname },

26 postTitle: title,

27 seoMetaDescription: description,

28 }) => {

29 const slug = pathname.split('/').at(-2);

31 return {

32 title,

33 description,

34 link: `${siteUrl}/${slug}/`,

35 pubDate: datePublished,

40 rss({

41 title: siteTitle,

42 stylesheet: true,

43 description: `${siteTitle} Blog Posts`,

44 customData: `<language>${siteLanguage.toLowerCase()}</language>`,

45 items,

46 });

48 return posts.map(

50 astro: { source: content },

51 file: { pathname },

52 postTitle: title,

53 seoMetaDescription: metadescription,

54 }) => {

55 const slug = pathname.split('/').at(-2);

57 return {

58 params: { slug },

59 props: { content, metadescription, title },

65 const { content, metadescription, title } = Astro.props;

66 const { slug } = Astro.request.params;

68 const seoProps = {

69 metadescription,

70 slug,

71 title,

73 ---

75 <BaseLayout {...seoProps}>

76 <h1>{title}</h1>

77 <div>

78 <Markdown {content}>

80 </Markdown>

81 </div>

82 </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 to .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 #

RSS Apps #

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

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 Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.

Astro RSS Feed: add a Blog Feed to your Astro Site | Rodney Lab