npm install gatsby-plugin-feed

// ...

const config: GatsbyConfig = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-plugin-feed",
      options: {
        // 기본 쿼리.
        // RSS 피드 파일은 여러 개 만들 수도 있는데,
        // 그 모든 피드 파일을 생성할 때 공통으로 사용할 쿼리를 여기에 작성한다.
        query: `
          {
            site {
              siteMetadata {
                title
                author
                siteUrl
                description
              }
            }
          }
        `,
        feeds: [
          {
            // RSS 피드에 들어갈 글목록을 가져오는 쿼리
            query: `
              {
                allMdx(
                  filter: { frontmatter: { date: { ne: "" } } }
                  sort: { frontmatter: { date: DESC } }
                ) {
                  nodes {
                    excerpt
                    frontmatter {
                      title
                      slug
                      date(formatString: "YYYY. M. D.")
                      previewContent
                    }
                  }
                }
              }
            `,
            // 기본 쿼리와 글목록 쿼리로부터 데이터를 받아서 RSS 데이터를 만드는 함수
            serialize: ({ query: { site, allMdx } }: any) => {
              return allMdx.nodes.map((node: any) => ({
                ...node.frontmatter,
                description: node.frontmatter.previewContent ?? node.excerpt,
                url: `${site.siteMetadata.siteUrl}/posts/${node.frontmatter.slug}`,
                guid: `${site.siteMetadata.siteUrl}/posts/${node.frontmatter.slug}`,
                custom_elements: [
                  {
                    "content:encoded":
                      node.frontmatter.previewContent ?? node.excerpt,
                  },
                ],
              }));
            },
            // RSS 피드 파일이 생성될 위치
            output: "/rss.xml",
            // RSS 피드의 제목
            title: `${siteMetadata.title} by ${siteMetadata.author}`,
          },
        ],
      },
    },
  ],
};

            serialize: ({ query: { site, allMarkdownRemark } }) => {
              return allMarkdownRemark.nodes.map(node => {
                return Object.assign({}, node.frontmatter, {
                  description: node.excerpt,
                  date: node.frontmatter.date,
                  url: site.siteMetadata.siteUrl + node.fields.slug,
                  guid: site.siteMetadata.siteUrl + node.fields.slug,
                  // `custom_elements` 설정을 보면 `node.html`, 즉 블로그 내용 전문을 넣고 있다.
                  custom_elements: [{ "content:encoded": node.html }],
                })
              })
            },

            serialize: ({ query: { site, allMdx } }: any) => {
              return allMdx.nodes.map((node: any) => ({
                // ...
                custom_elements: [
                  {
                    "content:encoded":
                      node.frontmatter.previewContent ?? node.excerpt,
                  },
                ],
              }));
            },

import fs from "fs-extra";
import path from "path";
import RSS from "rss";
import merge from "lodash.merge";

import { defaultOptions, runQuery } from "./internals";
import pluginOptionsSchema from "./plugin-options";

const publicPath = `./public`;

exports.onPostBuild = async ({ graphql, reporter }, pluginOptions) => {
  const options = {
    ...defaultOptions,
    ...pluginOptions,
  };

  // `options.query` 쿼리를 실행한다.
  const baseQuery = await runQuery(graphql, options.query);

  for (const { ...feed } of options.feeds) {
    if (feed.query) {
      // `options.feeds[n].query` 쿼리를 실행한다.
      // 결과를 `options.query` 쿼리의 결과와 합친다.
      feed.query = await runQuery(graphql, feed.query).then((result) =>
        merge({}, baseQuery, result)
      );
    }

    // 옵션들을 사용하기 쉽게 합치고 나눈다.
    const { setup, ...locals } = {
      ...options,
      ...feed,
    };

    // `serialze` 함수가 없으면 쿼리 결과를 가지고 어떻게 RSS 피드 파일을 만들지 알 수 없다.
    // 그러니 warning 만 던지고 아무것도 하지 않는다.
    if (!feed.serialize || typeof feed.serialize !== `function`) {
      reporter.warn(
        `You did not pass in a valid serialize function. Your feed will not be generated.`
      );
    } else {
      // 쿼리 결과로 RSS 피드에 쓸 데이터를 만든다.
      const rssFeed = (await feed.serialize(locals)).reduce((merged, item) => {
        merged.item(item);
        return merged;
      }, new RSS(setup(locals)));

      // 설정에 맞는 적절한 위치에 RSS 피드 파일을 만든다.
      const outputPath = path.join(publicPath, feed.output);
      const outputDir = path.dirname(outputPath);
      if (!(await fs.pathExists(outputDir))) {
        await fs.mkdirp(outputDir);
      }
      await fs.writeFile(outputPath, rssFeed.xml());
    }
  }
};

// ...

const config: GatsbyConfig = {
  // ...
  plugins: [
    // ...
    {
      // `resolve` 에는 직접 만들 플러그인의 이름을 넣자
      resolve: "gatsby-plugin-feed-by-group",
      options: {
        // `options.query` 는 `gatsby-plugin-feed` 에 넣었던 값을 변경할 필요가 없어보인다.
        query: /* ... */
        feeds: [
          {
            // 쿼리는 series 별로 grouping 해서 글목록을 가져오는 쿼리로 변경하자.
            query: `
              {
                allMdx(limit: 2000, filter: { frontmatter: { date: { ne: "" } } }) {
                  group(field: { frontmatter: { series: SELECT } }) {
                    fieldValue
                    edges {
                      node {
                        excerpt
                        frontmatter {
                          title
                          slug
                          originalDate: date
                          date(formatString: "YYYY. M. D.")
                        }
                      }
                    }
                  }
                }
              }
            `,
            // grouping 된 쿼리 결과를 가지고 시리즈별 데이터를 만들자.
            // `gatsby-plugin-feed` 에서는 이 함수의 결과값이 배열이었지만
            // 여기에서는 시리즈별 글목록에 대한 데이터를 만드는 것이므로
            // 아래처럼 중첩 배열이 될 것이다.
            // [
            //   {
            //     fieldValue: 'seriseName',
            //     items: [글데이터, 글데이터, 글데이터, ...]
            //   },
            //   { ... },
            //   { ... },
            //   ...
            // ]`
            serialize: ({ query: { site, allMdx } }: BySeriesSerializeParams) => {
              return allMdx.group.map((grp) => ({
                fieldValue: grp.fieldValue,
                items: grp.edges
                  .sort((a, b) =>
                    b.node.frontmatter.originalDate.localeCompare(
                      a.node.frontmatter.originalDate
                    )
                  )
                  .map(({ node }) => ({
                    ...node.frontmatter,
                    description: node.frontmatter.previewContent ?? node.excerpt,
                    url: `${site.siteMetadata.siteUrl}/posts/${node.frontmatter.slug}`,
                    guid: `${site.siteMetadata.siteUrl}/posts/${node.frontmatter.slug}`,
                    custom_elements: [
                      {
                        "content:encoded":
                          node.frontmatter.previewContent ?? node.excerpt,
                      },
                    ],
                  })),
              }));
            },
            // 시리즈마다 rss 파일 위치가 달라야하므로 이 값은 문자열에서 함수로 타입을 바꿔주자.
            output: (group: BySeriesOutputParams) =>
              `/series/${group.fieldValue}/rss.xml`,
            // 제목도 바꿔주면 좋겠지만, 오늘은 패스하자.
            title: `${siteMetadata.title} by ${siteMetadata.author}`,
          },
        ],
      },
    }
  ]
}

// ...

exports.onPostBuild = async ({ graphql, reporter }, pluginOptions) => {
  // ...

  for (const { ...feed } of options.feeds) {
    if (feed.query) {
      feed.query = await runQuery(graphql, feed.query).then((result) =>
        merge({}, baseQuery, result)
      );
    }

    const { setup, ...locals } = {
      ...options,
      ...feed,
    };

    // 아래가 `gatsby-plugin-feed` 의 코드.
    // 참고용으로 주석처리했지만 지워도 무방하다.

    // if (!feed.serialize || typeof feed.serialize !== `function`) {
    //   reporter.warn(
    //     `You did not pass in a valid serialize function. Your feed will not be generated.`
    //   );
    // } else {
    //   const rssFeed = (await feed.serialize(locals)).reduce((merged, item) => {
    //     merged.item(item);
    //     return merged;
    //   }, new RSS(setup(locals)));

    //   const outputPath = path.join(publicPath, feed.output);
    //   const outputDir = path.dirname(outputPath);
    //   if (!(await fs.pathExists(outputDir))) {
    //     await fs.mkdirp(outputDir);
    //   }
    //   await fs.writeFile(outputPath, rssFeed.xml());
    // }

    // `gatsby-plugin-feed` 와 다르게 우리의 `serialize` 결과는 중첩 배열이다.
    const serializedArray = await feed.serialize(locals);
    const feedOptions = setup(locals);
    // 배열을 순화하면서
    for (const { fieldValue, items } of serializedArray) {
      // 시리즈별 RSS 데이터를 각각 만든다.
      const rssFeed = items.reduce((merged, item) => {
        merged.item(item);
        return merged;
      }, new RSS(feedOptions));

      // 당연히 RSS 피드 파일도 시리즈별로 각각 만든다.
      // `path.join` 의 두번째 인자가 `feed.output` 이 아닌
      // `feed.output({ fieldValue })` 인 것을 주목하자
      const outputPath = path.join(publicPath, feed.output({ fieldValue }));
      const outputDir = path.dirname(outputPath);
      if (!(await fs.pathExists(outputDir))) {
        await fs.mkdirp(outputDir);
      }
      await fs.writeFile(outputPath, rssFeed.xml());
    }
  }
};

// ...

const menuItems = [
  { path: "/posts", title: "모든글" },
  { path: "/series", title: "시리즈" },
  { path: "/tags", title: "태그" },
  // 다른 메뉴는 `path` 를 `<Link />` 에 넣어 사용하지만
  // RSS 링크는 `href` 를 `<a />` 에 넣어 사용해야 한다.
  { href: "/rss.xml", title: "RSS" },
  ...(isDevelopment ? [{ path: "/drafts", title: "임시글" }] : []),
];

// ...

function Header({ emphasize, title, author, siteUrl }: HeaderProps) {
  return (
    <Container emphasize={emphasize}>
      {/* ... */}
      <ul>
        {menuItems.map((item, i) => (
          <li key={i}>
            {/* 기존 구현에 영향을 주지 않으면서 RSS 링크를 추가했다. */}
            {item.path ? (
              <Link to={item.path}>{item.title}</Link>
            ) : (
              <a href={`${siteUrl}${item.href}`}>{item.title}</a>
            )}
          </li>
        ))}
      </ul>
      {/* ... */}
    </Container>
  );
}

// ...

// ...

const SeriesDetailPageTemplate = ({ pageContext, data }) => {
  // ...

  // 메타데이터로부터 siteUrl 을 가져오자.
  const { siteUrl } = data.site.siteMetadata;

  return (
    <Layout minContentHeight={500}>
      <ListPageHeader title={series} subtitle="시리즈" note={totalCount} />
      {/* `SimplePostList` 가 어떻게 수정되었는지는 "2.3. 상세 코드" 섹션을 참고하자. */}
      <SimplePostList
        data={edges}
        actions={
          // 이렇게 링크를 만들어주자.
          <RssLink href={`${siteUrl}/series/${series}/rss.xml`}>RSS</RssLink>
        }
      />
    </Layout>
  );
};

const RssLink = styled.a``;

export const pageQuery = graphql`
  query ($series: String) {
    # ...

    # 메타 데이터를 가져올 쿼리를 추가하자.
    site {
      siteMetadata {
        siteUrl
      }
    }
  }
`;

// ...