Adding RSS feed to my Nuxt & Storyblok blog

What is RSS feed?

RSS is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format. - Wikipedia

The RSS feeds allow a user to keep track of the new content of many different websites, e.g. get the latest articles from your favourite newspapers.

In our website, the RSS feed is an xml file in which you will have the highlighted information of the content that you publish, for example, the articles of your blog.

Why is it useful?

Imagine that you want to create a newsletter with the latest content you publish, or that you want to automate the promotion of your posts.

Since your feed.xml is updated with details about every piece of content your site publishes, you can use RSS feeds for generating email newsletters and automated social media posts.

Do you like the idea? Let's see how to implement it in our blog made with Nuxt and using Storyblok as headlessCMS.

We're going to see an example with this tech stack, but this code could be also used with any HeadlessCMS/Rest API.

How to add the feed to our Nuxt blog

With the amazing ecosystem of modules we have in Nuxt, I'm quite sure we can find a module that already does the job for us. Let's look for an RSS or feed related module in the nuxt modules explorer.

And, of course, here it is https://www.npmjs.com/package/@nuxtjs/feed!!

Following the README.md, the first thing we have to do is to install/add the package in our project:

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

Then, add the module @nuxtjs/feed in the modules section in nuxt.config.js:

modules: [
  '@nuxtjs/feed'
],
feed: [
  {} // Here you place the options needed to generate the xml file
]

Once it's ready, let's take a look at the options we need to fill in:

• path: the route to our xml RSS feed file (feed.xml).
• create: a method in which we will populate the feed object and make API calls to get the articles data.
• cacheTime: how long should the feed be cached.
• type: type of feed as rss2, atom1 or json1 (rss2 in our case).

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',
  },
],

This module is based on feed package. You can check it out for modifying the feed object passed to the create method.

It's time to customize the feed object with our Storyblok data (or your API data) using axios:

• First, we need to import axios in the nuxt.config.js file.

• Next, we wait for the API get call to finish. The call will retrieve the pages stored in the blog folder, our articles, by specifying '?starts_with=blog' and giving the token needed to identify ourselves:

    const posts = await axios.get(
      `https://api.storyblok.com/v1/cdn/stories?starts_with=blog&token=${process.env.storyblokToken}`
    )
  

• Once the call has returned a response, we go to posts.data.stories and go through the array using forEach. For each of the posts, we will run feed.addItem({}) with the data of each one, as you can see below:

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

Once you have it ready, the next time you build your project (yarn build) or run the yarn generate command, the result will be similar to the one generated at https://www.dawntraoz.com/feed.xml.

If you want to take it a step further, you can see more info on how to set up pagination and categories at how to generate an RSS feed with a headlessCMS.

Making use of our feed file

Not long ago, Github added the possibility to create a README as your profile description.

If you add a README file to the root of a public repository with the same name as your username, that README will automatically appear on your profile page.

I created a pretty basic one for myself. But this weekend, @Natterstefan made me discover the possibility of creating a workflow, using Github Actions, which reads my RSS feed automatically to display my latest published articles in a section of my Github profile.

At the post How to present your latest blog posts on your GitHub profile he explains how to do it in detail!

In my case, I only needed to create the workflow at .github/workflows/articles.yml and change the url of the workflow to my feed.xml:

name: Articles

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: "https://www.dawntraoz.com/feed.xml"

And, to see the latest articles, I added these lines in the README.md file:

### ✍ Latest Blog Posts

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

And here is the result 😍

I hope you found this post useful 🤩 See you in the next article 👋