With the recent exodus from Medium many developers are now creating their own GatsbyJS Blogs and then cross-posting to Medium or publications like dev.to.
Cross-posting is time-consuming, but necessary to drive traffic to your personal site. Let's look at how we can automate this by adding an RSS feed to your personal GatsbyJS blog.
What is a canonical url?
A canonical url tells search engines which page is the primary or authorative page when duplicate content is found (ie. cross-posting).
Let's install gatsby-plugin-canonical-urls
Quick tip:
npm iis an alias fornpm install --save
npm i gatsby-plugin-canonical-urlsNote: If you are using
gatsby-plugin-react-helmetinstall this plugin instead: gatsby-plugin-react-helmet-canonical-urls*
npm i gatsby-plugin-react-helmet-canonical-urlsAdd plugin configuration to /gatsby-config.js
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-canonical-urls`,
// or
// resolve: `gatsby-plugin-react-helmet-canonical-urls`
options: {
// Change `siteUrl` to your domain
siteUrl: `https://tueri.io`
// Query string parameters are inclued by default.
// Set `stripQueryString: true` if you don't want `/blog`
// and `/blog?tag=foobar` to be indexed separately
stripQueryString: true
}
}
]With this configuration, the plugin will add a <link rel="canonical" ... /> to the head of every page e.g.
<link rel="canonical" href="https://tueri.io/2019-04-04-how-to-securely-deploy-to-kubernetes-from-bitbucket-pipelines/" />We'll use gatsby-plugin-feed to generate an rss feed from our blog posts.
npm i gatsby-plugin-feedAdd plugin configuration to /gatsby-config.js
// In your gatsby-config.js
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",
// optional configuration to insert feed reference in pages:
// if `string` is used, it will be used to create RegExp and then test if pathname
// of current page satisfied this regular expression;
// if not provided or `undefined`, all pages will have feed reference inserted
match: "^/blog/",
},
],
}
}
]NOTE: This plugin will only generates the
xmlfile(s) when run inproductionmode! To test your feed, run:gatsby build && gatsby serve
Here's what our feed looks like: Tueri.io's RSS Feed
For more information on configuring your feed check out the plugin docs.
The connection for Medium is not quite as straight-forward, but simple enough using Zapier.
Head on over to Zapier and create a free account.
Make sure Google gives you credit for your content by using Canonical URL's.
I hope you found this helpful and that it saves you lots of time cross-posting your content!