How to Automatically Cross-post from Your GatsbyJS Blog with RSS

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 i is an alias for npm install --save

npm i gatsby-plugin-canonical-urls

Note: If you are using gatsby-plugin-react-helmet install 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 xml file(s) when run in production mode! 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

Blog