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.
Add Canonical URL's to Your 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-urls
Note: If you are using
gatsby-plugin-react-helmetinstall this plugin instead: gatsby-plugin-react-helmet-canonical-urls*
npm i gatsby-plugin-react-helmet-canonical-urls
Add 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/blog/2019-04-04-how-to-securely-deploy-to-kubernetes-from-bitbucket-pipelines/" />
Install an RSS Feed Generator
We'll use gatsby-plugin-feed to generate an rss feed from our blog posts.
npm i gatsby-plugin-feed
Add 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.
Connect dev.to to Your RSS Feed
- Log in to your dev.to account
- Go to: Settings > Publishing from RSS or https://dev.to/settings/publishing-from-rss
- Add your "RSS Feed URL" e.g. https://tueri.io/rss.xml
- Check "Mark the RSS source as canonical URL by default
- Click "Update"
Connect Medium to Your RSS Feed
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 a Zap"
- Choose "RSS" as your "Trigger App"
- Select "New Item in Feed"
- Paste in your "Feed URL"
- Select a sample from your feed.
- Choose "Medium" as your "Action App"
- Select "Create Story"
- Authorize your Medium account
- Select your fields: make sure you select your Canonical URL
- Send a test to Medium
- Finish and turn on your Zap
Conclusion
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!
Originally published at tueri.io
Top comments (0)