Gatsby 블로그 RSS Feed 적용하기
Gatsby / RSS
2022.02.16
RSS피드란?
RSS(Rich Site Summary)는 뉴스나 블로그 사이트에서 주로 사용하는 콘텐츠 표현 방식이다.
웹 사이트의 콘텐츠를 XML 파일로 작성해 블로그, 뉴스 등 RSS 피드를 통해 구독할 수 있게 되는데 이로 인해 새로운 콘텐츠가 나오면 새로운 소식 알림이 뜨게 되어 지속적으로 노출시킬 수 있다.
RSS가 나오기 전에는 원하는 정보를 얻기 위해 직접 사이트에 들어가야 했지만 RSS 관련 프로그램을 이용하면 자동으로 수집이 가능해졌기 때문에 사용자는 각각의 사이트 방문 없이 최신 정보들만 한자리에서 볼 수 있다.
Gatsby RSS 라이브러리 세팅방법
RSS 피드를 생성하기 위해 gatsby-plugin-feed 라이브러리를 사용하면 쉽게 생성이 가능합니다.
npm install gatsby-plugin-feed또는
yarn add gatsby-plugin-feed플러그인 등록하기
해당 라이브러리를 설치한 후 gatsby-config.js에 플러그인을 등록해 줍니다.
module.exports = {
siteMetadata: {
siteUrl: `https://www.example.com`,
},
plugins: [
...,
`gatsby-plugin-feed`
],
}Markdown 파일에 적용시키기
다음은 Markdown 파일에 적용시키기 위해 gatsby-node.js파일에 아래와 같이 작성해 줍니다.
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}빌드
gatsby build위의 모든 작업을 마치고 빌드를 하면 {my.site.com}/rss.xml 주소에 RSS가 생긴 것을 알 수 있습니다.
gatsby-starter-blog 와 같은 Markdown 콘텐츠가 기본적으로 설정이 되어 있는 경우 여기까지만 해도 잘 작동하겠지만 그렇지 않은 경우 아래와 같은 작업을 해야 합니다.
RSS피드 플러그인 사용자 정의
gatsby-config.js 파일로 가서 블로그에 들어가는 Markdown 데이터에 맞게 feeds에 값을 넣어줍니다.
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-feed`,
options: {
query: `
{
site {
siteMetadata {
title
description
siteUrl
site_url: siteUrl
}
}
}
`,
feeds: [
{
serialize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.edges.map(edge => {
return Object.assign({}, edge.node.frontmatter, {
description: edge.node.excerpt,
date: edge.node.frontmatter.date,
url: site.siteMetadata.siteUrl + edge.node.fields.slug,
guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
custom_elements: [{ 'content:encoded': edge.node.html }],
})
})
},
query: `
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] },
) {
edges {
node {
excerpt
html
fields { slug }
frontmatter {
title
date
}
}
}
}
}
`,
output: '/rss.xml',
title: "Your Site's RSS Feed",
},
],
},
},
],
}사이트 주소에 영어가 아닌 다른 링크가 있을 경우 URI를 인코딩하는 편이 좋습니다.
serialize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.edges.map(edge => {
return Object.assign({}, edge.node.frontmatter, {
description: edge.node.excerpt,
date: edge.node.frontmatter.date,
url: encodeURI(site.siteMetadata.siteUrl + edge.node.fields.slug),
guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
custom_elements: [{ "content:encoded": edge.node.html }],
})
})
},참고 자료
안녕하세요 개발자 Min 입니다.
개발자들 사이에서 한 번쯤 들어봤을 만한 사람이 되는 게 목표입니다.
Frontend Developer