DEV Community

Chloe
Chloe

Posted on • Originally published at cgweb.co.uk on

Setting up RSS feed for my Gridsome blog

I've spent a couple (read a few) hours yesterday and today attempting to setup an RSS feed for my blog which is built using Gridsome primarily so I could cross post on here. I initially had a look at the Gridsome plugins and decided to try and setup this up using the gridsome-plugin-rss adding the following to my gridsome.config.js file:

plugins: [
    {
      use: 'gridsome-plugin-rss',
      options: {
        contentTypeName: 'Post',
        feedOptions: {
          title: 'My Blog',
          feed_url: 'https://www.cgweb.co.uk/rss.xml',
          site_url: 'https://www.cgweb.co.uk/'
        },
        feedItemOptions: node => ({
          title: node.title,
          description: node.description,
          url: 'https://www.cgweb.co.uk/content/posts/' + node.slug
        }),
        output: {
          dir: './static',
          name: 'rss.xml'
        }
      }
    }
]
Enter fullscreen mode Exit fullscreen mode

This was partially successful as it generated the RSS page on my site and was correctly displaying the title of the posts, but not the links and the main content of the posts I think because I was using node.slug which was showing as undefined in the feed. I tried a couple of things which partially worked, but after a quick google I found a couple of posts for setting this up using the other available Gridsome plugin called gridsome-plugin-feed so I went back to the docs installed it via npm and using the docs as my base added the following to my config file (there are additional options you can setup such as atom or JSON outputs but I have no need for these):

    {
      use: 'gridsome-plugin-feed',
      options: {
        contentTypes: ['Post'],
        feedOptions: {
          title: 'Dev Blog',
          description:
            'My web dev blog'
        },
        rss: {
          enabled: true,
          output: '/feed.xml'
        },
        maxItems: 25,
        filterNodes: node => true,
        nodeToFeedItem: node => ({
          title: node.title,
          date: node.date || node.fields.date,
          content: node.content
        })
      }
    }
Enter fullscreen mode Exit fullscreen mode

Hope this may prove useful to someone who has had similar issues.

On a side note I also learnt how to add images to my markdown posts which is done using the following formatting:

![alt text](imageurl) 
Enter fullscreen mode Exit fullscreen mode

From this great Markdown cheat sheet how I did not know this before I've no idea but super useful to know.

Top comments (5)

Collapse
 
chrisfinnigan profile image
Chris Finnigan

This is really useful. Thanks for posting. I was having the same same issue with my RSS for cross posting.

Collapse
 
cguttweb profile image
Chloe

I'm new to gridsome and trying to get to grips with vue so I'm glad it helped. Their documentation is pretty good I don't really understand the difference between the two different plugins

Collapse
 
chrisfinnigan profile image
Chris Finnigan

Likewise, my personal site is my first attempt with Gridsome, I've not had much time to play with it since I got the site live. Liking it so far though.

I hope you enjoy Vue.js, I love it. It's very intuitive and the learning curve is pretty relaxed.

Thread Thread
 
cguttweb profile image
Chloe • Edited

It was recommended by my tech lead at work as given it's not such a steep learning curve compared to some of the other frameworks out there and yeah I really do enjoy it. Still a beginner really as my JavaScript needs improving too but I'm keen to get into the whole ecosystem and see how it goes but so far so good.

Collapse
 
alhiane profile image
Alhiane Lahcen

there is a error
with field date