gatsby-plugin-feedを使ってGatsbyサイトにRSSを追加する

gatsby-plugin-feed+ContentfulでRSSを生成

このサイトはContentfulをデータソースにしています。いっぽう公式ドキュメントの例はMarkdown。良いサンプルになりそうなので、このサイトのコード（/notesのRSS）をまるごと載せてみます（一部記事用に変更）。

{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allContentfulPost } }) => {
          return allContentfulPost.edges.map(({ node }) => {
            return {
              title: node.title,
              description: node.content.childMarkdownRemark.excerpt,
              date: node.createdAt,
              url: `${site.siteMetadata.siteUrl}/notes/${node.slug}`,
              guid: `${site.siteMetadata.siteUrl}/notes/${node.slug}`,
            }
          })
        },
        query: `
          {
            allContentfulPost(
              limit: 5 
              filter: { blog: { eq: "notes" } }
              sort: { fields: createdAt, order: DESC }
            ) {
              edges {
                node {
                  title
                  slug
                  content {
                    childMarkdownRemark {
                      excerpt
                    }
                  }
                  createdAt
                }
              }
            }
          }
        `,
        output: "/notes/rss.xml",
        title: "MURATAS.JP (NOTES)",
        feed_url: "https://muratas.jp/notes/rss.xml",
        site_url: "https://muratas.jp/notes",
        docs: "http://github.com/dylang/node-rss",
      },
    ],
  },
}

公式ドキュメントと基本的には一緒。このサイトでは複数のRSSを配信しているのでそれ用の書き方になっています（後述）。

site_url: siteUrl とは

公式ドキュメントのqueryはこうなっていて

query: `
  {
    site {
      siteMetadata {
        title
        description
        siteUrl
        site_url: siteUrl
      }
    }
  }
`,

最初 site_url: siteUrl を見たとき、このあとのコードで使ってないけどなんだろうなあと思ったのですが、よく見たらオプションを指定せずとも <link /> として出力してくれるおまじないだということがわかりました。GraphQLのエイリアスです。siteMetadataにrssのオプションと名前が一致するフィールドがあったらそれを使ってくれるということでしょうか。

site_url の指定がないとに次のようになってしまいますので、消さないで置いておくかフィードごとのオプションとして指定してあげる必要があります。

http://github.com/dylang/node-rss

descriptionとcontent:encodedの違いは

公式サンプルにある content:encoded は全文が入ることを想定したオプションフィールド。

custom_elements: [{ "content:encoded": edge.node.html }],

参照：content:encoded。

僕は全文を含めないことにしたので外しました。

ちなみに全文をRSSに含めない場合は description に「もっと見る」みたいなリンクを追加しておくと、続きがあることを明示的に示すことができて、読者にそれがちゃんと伝わりそうです。

1つのGatsbyサイトで複数のRSSを作るには

feeds がオブジェクトの配列になっているのでここに加えたらOKです。

rss を見て必要だと思った項目を追加しておくと良いでしょう。僕は3つ入れておきました。

• feed_url
• site_url
• docs