Gatsby에서 RSS 피드를 설정하는 방법

이 기사는 원래 mariokandut.com에 게시되었습니다.

RSS 피드란?

"An RSS Feed is a standard XML file listing a website’s content in a subscribable format, allowing readers to consume your content in news aggregators, also called feed reader apps. Think of it as a syndicated distribution channel for your site’s content." see Gatsby docs

개츠비 사이트에 RSS 피드 추가하기

npm, gatsby 및 javascript에 대한 방법을 알고 있다고 가정합니다.

이 블로그 mariokandut.com 을 예로 사용하겠습니다. 게시물은 Markdown에 있습니다. Gatsby 문서에서 좋은 how-to 도 찾을 수 있습니다.

npm 패키지를 설치합니다.

npm install --save gatsby-plugin-feed

RSS 피드에는 일반적으로 URL, 슬러그 또는 경로와 같은 콘텐츠를 고유하게 식별하는 방법이 필요합니다.
gatsby-config.js에서는 플러그인을 추가해야 하며 대부분의 경우 사용자 정의해야 합니다. 태그를 통합하고 블로그 게시물 템플릿을 제외하고 싶었습니다.

드문 경우지만 기본 사항에 만족하고 플러그인과 siteUrl을 추가하기만 하면 됩니다.

module.exports = {
  siteMetadata: {
    siteUrl: `https://www.YOUR-WEBSITE-NAME.com`,
  },
  plugins: [`gatsby-plugin-feed`],
};

이제 RSS 피드 플러그인을 사용자 정의하는 재미를 느껴 봅시다. 아래는 이 블로그에서 사용하고 있는 코드 스니펫입니다.

{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
            site_url: siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMarkdownRemark } }) => {
          return allMarkdownRemark.edges
            .filter(
              edgePost =>
                edgePost.node.frontmatter.isPublished === 'true',
            )
            .map(edge => {
              return Object.assign({}, edge.node.frontmatter, {
                description: edge.node.frontmatter.description,
                date: edge.node.frontmatter.datePublished,
                url:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                guid:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],
              })
            })
        },
        query: blogPostsQuery,
        output: '/rss.xml',
        title: "Mario's RSS Feed",
      },
    ],
  },
}

구문이 꽤 자명해 보이는 것 같아서 요점만 살펴보겠습니다. output을 사용하여 RSS 피드의 URL을 사용자 정의하고 제목을 title으로 사용자 정의합니다. 쿼리 필드는 graphQL 쿼리이며 여기에서는 자리 표시자 blogPostsQuery입니다.

가장자리를 매핑하기 전에 블로그 게시물이 게시되었는지 필터링하고 있습니다. 이에 대한 마크다운 플래그가 있습니다(isPublished).

.filter(edgePost => edgePost.node.frontmatter.isPublished === 'true')

그런 다음 필터링된 가장자리를 매핑하고 개체를 만듭니다. 또한 html로 인코딩된 콘텐츠 , 태그 (array in markdown) 및 특징 이미지와 같은 사용자 정의 요소를 RSS 피드에 추가합니다.

custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],

이제 gatsby develop으로 프로젝트를 시작하고 localhost:8000/rss.xml로 이동합니다. 무엇을 볼 수 있습니까?

예, 404 페이지입니다. RSS 피드는 gatsby 개발에서 작동하지 않으므로 프로젝트를 빌드하고 제공해야 합니다. gatsby build && gatsby serve , 이제 localhost:9000(표준 포트)으로 이동하여 RSS 피드를 확인합니다. here 과 비슷한 것을 볼 수 있을 것입니다. 그렇다면 변경 사항을 커밋하고 배포하면 첫 번째 단계가 완료됩니다.

야, 🥳🥳🥳. 잘했어요.

읽어주셔서 감사합니다. 질문이 있으면 댓글 기능을 사용하거나 메시지를 보내주세요.

🤖 콘텐츠 배포 및 자동 게시를 medium 및 ?여기에 How to automatically post to medium and dev.to에 대해 쓴 기사가 있습니다.