Adding RSS feed to my Nuxt & Storyblok blog
Tags: feed, nuxt, storyblok, sharing
Published: 2021-02-09 07:59:14

In this post I would like to show you how I generated the RSS feed.xml for my blog, using Nuxt and Storyblok.

{% tweet 1358830452795011072 %}

## 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](https://en.wikipedia.org/wiki/RSS)

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](https://modules.nuxtjs.org/).

![Nuxt modules explorer](https://dev-to-uploads.s3.amazonaws.com/i/5nujr291113mgc7ahh1n.jpg)

And, of course, here it is [https://www.npmjs.com/package/@nuxtjs/feed](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:

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

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

```javascript
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).

```javascript
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](https://github.com/jpmonette/feed). 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:

  ```javascript
  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:

  ```javascript
  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](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](https://www.storyblok.com/tp/how-to-generate-an-rss-feed-with-a-headless-cms).

## Making use of our feed file

Not long ago, Github added the possibility to [create a README as your profile description](https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/about-your-profile).

> 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](https://twitter.com/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](https://blog.natterstefan.me/how-to-present-your-latest-blog-posts-and-youtube-videos-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](https://github.com/Dawntraoz/Dawntraoz/blob/master/.github/workflows/articles.yml) and change the url of the workflow to my feed.xml:

```yaml
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](http://readme.md) file:

```markdown
### ✍ Latest Blog Posts

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

And here is the result 😍

![GitHub profile latest blog posts](https://dev-to-uploads.s3.amazonaws.com/i/xfawqqzq2q8kdtqgfl49.jpg)

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