Gatsby.jsのRSSフィードへのリンクは<a>を使う
Gatsby.jsのプラグインgatsby-plugin-feed
を使って生成したRSSフィードrss.xml
に対するリンクに<Link>
を使うと404になってしまいました.
プラグインの設定は次のような感じです.
gatsby-plugin-feed.js
`gatsby-plugin-feed`,
{
resolve: `gatsby-plugin-feed`,
options: {
feeds: [
{
serialize: ({ query: { site, allBlogPost } }) => {
return allBlogPost.nodes.map(node => {
return Object.assign({}, node.frontmatter, {
title: node.title,
description: node.parent.excerpt,
date: node.date,
url: site.siteMetadata.siteUrl + node.slug,
guid: site.siteMetadata.siteUrl + node.slug,
custom_elements: [{ "content:encoded": node.parent.html }],
})
})
},
query: `
{
site {
siteMetadata {
siteUrl
}
}
allBlogPost (
sort: { fields: date, order: DESC }
limit: 100
) {
nodes {
date(formatString: "YYYY-MM-DDTHH:mm:ss+09:00")
title
slug
parent {
... on MarkdownRemark {
excerpt
html
}
... on Asciidoc {
excerpt
html
}
}
}
}
}
`,
output: '/rss.xml',
title: siteName,
},
],
},
},
これを,次のような感じでリンクを張っても,404になってしまいました.
layout.js
<Link
style={{
boxShadow: `none`,
textDecoration: `none`,
display: 'flex',
alignItems: 'flex-end',
}}
to={'/rss.xml'}
>
<IoLogoRss size="2em" color="inherit" />
</Link>
そこで次のように<a>
タグに変えるとちゃんとアクセスできるようになりました.
layout.js
<a
style={{
boxShadow: `none`,
textDecoration: `none`,
display: 'flex',
alignItems: 'flex-end',
}}
href={'/rss.xml'}
>
<IoLogoRss size="2em" color="inherit" />
</a>
rss.xml
を生成するタイミングが違うから,<Link>
でアクセス可能なルートに入ってないのかな?ちょっと原因はわかってないですが,回避策ということで.