Create an RSS feed with Astro and Storyblok

Add an RSS feed to Astro using Storyblok's stories

Seppe Gadeyne

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.

Add an RSS feed to Astro using Storyblok's stories
Add an RSS feed to Astro using Storyblok's stories

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:

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.

Frequently asked questions

FAQ

Let's dive deeper into some frequently asked questions.

What is an RSS feed?

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. This streamlines the process of tracking updates, allowing users to save time and effort in keeping up with the latest content.

How do I create an RSS feed endpoint in Astro?

To create an RSS feed endpoint in Astro, create a new file in yoursrc/pages folder, like rss.xml.js, and import the required @astro/rss package and helper function. Define an asynchronous function that Astro will use to generate the RSS feed, fetch stories from Storyblok using the Storyblok client, prepare the items array for the RSS feed, and return the generated RSS feed using the @astro/rss package.

How do I fetch content from Storyblok?

To fetch content from Storyblok, use the provided helper function, which accepts parameters like starts_with, with_tag, excluding_slugs and version. This function fetches stories from the Storyblok API using the built-in fetch function and returns an object containing stories and their total count.