Add an RSS feed to Astro using Storyblok's stories

Seppe Gadeyne

As a freelance web developer with expertise in optimizing website performance, I specialize in creating lightning-fast and SEO-optimized websites.

Freelance web developer

In this article, I will guide you through creating an RSS feed, like mine, for your Astro and Storyblok projects. We will cover fetching content from the Storyblok API, creating an RSS feed endpoint, and generating the RSS feed objects.

Contents

1. Introduction

2. Prerequisites

3. Install dependencies

4. Setting up environment variables

5. Creating a helper function

6. Creating the RSS feed endpoint

7. Conclusion

Introduction

An RSS feed is essential for content distribution and consumption in the digital age. It lets users stay updated easily with their favorite websites, blogs, or news sources. By aggregating content from multiple sources into a single feed, RSS streamlines the process of tracking updates, allowing users to save time and effort in keeping up with the latest content. 

Prerequisites

Before you can begin, ensure that you have the following prerequisites installed on your system:

• Node.js (version 16.12.0 or higher)

• Astro (version 2.0.0 or higher)

You also need to have a Storyblok space with stories in it.

Install dependencies

We will incorporate the desired integrations into our project. Execute the following commands from within the Astro project folder.

npm install @astrojs/rss storyblok-js-client

Setting up environment variables

First, set up a .env file in your Astro project with the following public variables that we will use in our functions:

STORYBLOK_TOKEN="your-storyblok-api-token"
STORYBLOK_VERSION="published"

Replace your-storyblok-api-token with your existing domain and Storyblok API token.

Creating a helper function

For this RSS feed endpoint, we will need a JavaScript function that makes our lives easier when fetching data from Storyblok. We will use the universal JavaScript SDK for Storyblok's API. You can use this client in any other framework as well. In our example, we save sb.js in src/library.

import StoryblokClient from 'storyblok-js-client';

export const sb = new StoryblokClient({
	accessToken: import.meta.env.STORYBLOK_TOKEN
});

export const defaultConfig = {
	version:
		import.meta.env.STORYBLOK_VERSION === 'draft' || import.meta.env.DEV
			? 'draft'
			: 'published'
};

Creating the RSS feed endpoint

Now, make the RSS feed endpoint in your src/pages folder, like rss.xml.js. Double check you've configured a site in your project's astro.config and add the following code:

// Import the required @astrojs/rss package and helper function
import rss from '@astrojs/rss';
import { sb, defaultConfig } from '../library/sb';

// Define an asynchronous function that Astro will use to generate the RSS feed
export async function get(context) {
  // Initialize items variable
  const items = [];

  // Fetch stories from Storyblok using the Storyblok client
  const data = await sb.getAll('cdn/stories', {
	starts_with: 'blog/',
	with_tag: 'Blog',
	...defaultConfig
  });

  // Iterate through the stories and prepare the items array for the RSS feed
  data.forEach((story) => {
    items.push({
      link: `${context.site}${
        story.full_slug === 'home' ? '' : `/${story.full_slug.replace(/\/$/, '')}`
      }`,
      title: story.content.title,
      pubDate: story.first_published_at || story.created_at,
      description: story.content.description
    });
  });

  // Return the RSS feed using the @astrojs/rss package
  // Donwload the Pretty Feed v3 default stylesheet from https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl 
  return rss({
    title: 'My Blog',
    description: 'My blog description',
    site: context.site,
    items,
    customData: '<language>en-us</language>',
    trailingSlash: false,
    stylesheet: '/pretty-feed-v3.xsl'
  });
};

Conclusion

In this blog post, we have walked you through creating an RSS feed for your Astro and Storyblok project. Following these steps, you have successfully fetched content from Storyblok, created an RSS feed endpoint, and generated the RSS feed objects. Now, your users can easily stay updated with the latest content from your website through the convenience of an RSS feed.