MENU

RSSフィードを追加しました

2020-11-06

Add an RSS Feed to Gatsby MDX Blog

タイトルの通りです。ブログのRSSフィードを追加しました。

RSSフィード生成用のプラグインをインストールします。

yarn add gatsby-plugin-feed

gatsby-plugin-feedを使うためにgatsby-configを編集します。

ドキュメント通りのgraphqlだとうまく動かなかったのでhttp://localhost:8000/___graphqlを見ながら微調整しました。slugじゃなくてpathにしたり、URLが壊れないように/を追加したりしました。

gatsby-config.plugins.js

  {
    resolve: `gatsby-plugin-feed`,
    options: {
      query: `
        {
          site {
            siteMetadata {
              title
              description
              siteUrl
            }
          }
        }
      `,
      feeds: [
        {
          serialize: ({ query: { site, allMdx } }) => {
            return allMdx.edges.map(edge => {
              return Object.assign({}, edge.node.frontmatter, {
                description: edge.node.excerpt,
                data: edge.node.frontmatter.date,
                url: site.siteMetadata.siteUrl + "/" + edge.node.frontmatter.path,
                guid: site.siteMetadata.siteUrl + "/" + edge.node.frontmatter.path,
                custom_elements: [{ 'content:encoded': edge.node.html }],
              });
            });
          },
          query: `
          {
            allMdx(
              sort: { order: DESC, fields: [frontmatter___date] },
            ) {
              edges {
                node {
                  frontmatter {
                    title
                    date
                    path
                  }
                  html
                }
              }
            }
          }
          `,
          output: '/rss.xml',
          title: `Retwpay - Retweet Flea Market App Develop BLOG`,
          site_url: `https://capsaicin.site`,
        },
      ],
    },
  },

gatsby developだとrss.xmlの確認ができないのでgatsby buildしてからgatsby serveしてhttp://localhost:9000/rss.xmlでRSSフィードが生成されてるか確認します。

任意の位置にRSSフィードのリンクを設置します。

src/pages/blog/index.jsx

import RssFeedIcon from '@material-ui/icons/RssFeed';
<a href="/rss.xml" target="_blank"><h3>RSS Feed <RssFeedIcon /></h3></a>

以上です。

この記事を共有