loading...

Setting up RSS feed for my Gridsome blog

cguttweb profile image Chloe Originally published at cgweb.co.uk on ・2 min read

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

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
        })
      }
    }

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) 

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

Posted on Oct 26 '19 by:

cguttweb profile

Chloe

@cguttweb

Web developer (with BA in Archaeology and history) looking to develop my skills further particularly around JavaScript and VueJS

Discussion

markdown guide
 

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

 

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

 

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.

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.