Creating an RSS Feed Using Nuxt and Storyblok

RSS feeds allows users and apps to access websites' updates. In this lesson, we will create a feed.xml file with the content published in Storyblok. Then, let's see how to display our website content, using that RSS feed, in our GitHub profile.

This lesson was taken from the article Adding RSS feed to my Nuxt & Storyblok blog by @dawntraoz.

Using Nuxt Feed module

1. Install the module:

     
       
   yarn add @nuxtjs/feed # npm i @nuxtjs/feed
   
     
   

2. Add it in the modules' section of nuxt.config.js:

     
       
   modules: [
     '@nuxtjs/feed'
   ],
   feed: [
     {} // Options to generate the xml
   ]
   
     
   

3. options we need to fill in:

   • path: the route to the feed (xml file).

   • create: a function to customize the feed, populate the feed object and get API data.

     It's based on the feed package. Use it as reference for modifying the feed object in the create function.

   • cacheTime: how long the feed should be cached.

   • type: specifies a feed type; rss2, atom1 or json1.

     
       
   feed: [
     {
       path: '/feed.xml',
       async create(feed) {
   		feed.options = {
           	title: "Your name's blog",
   			link: 'https://blog-domain.com/feed.xml',
   			description: "Your name's blog feed!",
   		}
   
   		// await API call with our posts data
   	},
       cacheTime: 1000 * 60 * 15,
       type: 'rss2',
     },
   ],
   
     
   

You can find the README with the steps in detail at @nuxtjs/feed.

Add the Storyblok data in the feed

1. Import axios in nuxt.config.js.

     
       
   import axios from 'axios'
   
   export default {
       // Nuxt configuration
   }
   
     
   

2. Make an API call to get the main content by specifying the folder where it's saved '?starts_with=folder' and the token:

     
       
   const lessons = (await axios.get(
       `https://api.storyblok.com/v2/cdn/stories?starts_with=lessons&token=${process.env.STORYBLOK_TOKEN}`
   )).data.stories;
   
     
   

3. Go through lessons and add every item info to the feed with feed.addItem({}).

     
       
   import axios from 'axios'
   
   export default {
     feed: [
     	 {
     	    async create(feed) {
     	      // Wait the response
     	      const lessons = (await axios.get(
     	        `https://api.storyblok.com/v2/cdn/stories?starts_with=lessons&token=${process.env.STORYBLOK_TOKEN}`
     	      )).data.stories
     	
     	      /* START - Go through the array of lessons (stories) */
     	      lessons.forEach((lesson) => {
     	        const url = `https://blog-domain.com/${lesson.full_slug}`
     	        feed.addItem({
     	          title: lesson.name,
     	          id: url,
     	          link: url,
     	          description: lesson.content.excerpt,
     	          published: new Date(lesson.first_published_at),
     	          author: [
     	            {
     	              name: 'Your name',
     	              email: 'your-email@gmail.com',
     	            },
     	          ],
     	        })
     	      })
     	      /* END */
     	    },
     	 },
     ],
   }
     
   

Making use of the feed.xml in a README.md using GitHub Actions

1. Create a workflow at .github/workflows/lessons.yml and change the URL below to your feed.xml:

     
       
   name: Lessons
   
   on:
     # Triggers the workflow on push or pull request events but only for the master branch
     push:
       branches: [master]
     # Run workflow automatically
     schedule:
       # Runs every hour
       - cron: "0 * * * *"
   
   jobs:
     update-readme-with-blog:
       name: Update this repo's README with the list of articles
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - uses: gautamkrishnar/blog-post-workflow@master
           with:
             # comma-separated list of RSS feed urls
             feed_list: "<FEED_URL>"
   
     
   

2. Add the lines below in the README.md file:

     
       
   ### Latest Focus on Storyblok Lessons  
   
   <!-- BLOG-POST-LIST:START -->
   <!-- BLOG-POST-LIST:END -->
   
     
   

Resultant README.md after adding the workflow to the repo: