GatsbyJSでRSSフィードを作成

こんにちは，むぎやんです．

GatsbyJSで作成したこのサイトにRSSフィードを追加します．オフィシャルサイトに紹介されている設定のままだとサムネイルを指定できない（本文中の最初の画像になってしまう）ので，そのあたりに手を加えました．

RSSフィードとは

RSSやRSSフィードの詳細はどこか適当なサイトをみてください．フリー百科事典『ウィキペディア（Wikipedia）』とかIT用語辞典 e-Wordsとか．

この形式で提供しておけばフィードリーダーなどで最新の情報が表示されるようです．

プラグイン導入

RSSフィードを簡単に実現する手段として，オフィシャルプラグインが公開されています． Gatsbyオフィシャルサイトに従ってプラグインを導入します．今回はgatsby-plugin-feedを使いました．

$ yarn add gatsby-plugin-feed
# npm install --save gatsby-plugin-feed

プラグインのReadMe通りでほぼほぼ動きました．このサイトではそれに加えて，オフィシャルサイトのソースも参考にgatsby-config.jsに設定を行いました．

コンフィグファイル編集

今回は，各記事のサムネイルを指定したいのでgatsby-config.jsに一部追記します．

module.exports = {
  ...
  serialize: ({ query: { site, allMarkdownRemark } }) =>
  allMarkdownRemark.edges.map(({ node }) => {
    return {
      title: node.frontmatter.title,
      description: node.frontmatter.description || node.excerpt,
      date: node.frontmatter.date,
      url: site.siteMetadata.siteUrl + node.fields.slug,
      guid: site.siteMetadata.siteUrl + node.fields.slug,
      author: node.frontmatter.author.name,
      enclosure: {        url: site.siteMetadata.siteUrl + node.frontmatter.image.childImageSharp.fluid.src,        type : `image/jpeg`,      },    }
  }),
  ...
}