How to automatically post from your Gatsby blog to Medium and dev.to
Tags: gatsby, javascript, automation
Published: 2019-11-06 16:50:47

---
title: How to automatically post from your Gatsby blog to Medium and dev.to
published: true
date: 2019-11-06 00:00:00 UTC
tags: gatsby, javascript, automation
canonical_url: https://www.mariokandut.com/how-to-automatically-post-from-gatsby-to-medium-and-dev-to
---

_This article was originally published on [mariokandut.com](https://www.mariokandut.com/how-to-automatically-post-from-gatsby-to-medium-and-dev-to)._

A professor at university once said to me:

> If he has to decide on hiring a lazy student or a top-notch student, assuming both get the same work in the same time done. He would always choose the lazy person, because the lazy student is more efficient.

After all these years I'd say **don't be lazy, be smart**. Automation can help you get the job done quicker and saves you time, which you can spend on the things you love. Maybe more coding? 😂

### The three steps plan

I assume you know your way around npm, gatsby and javascript. This is what we are going to do:

1. Setup an RSS feed in gatsby
2. Create a zap RSS to Medium
3. Configure RSS income stream in dev.to

## 1. Setup an RSS feed in gatsby

I will use the automation used in this blog as an example. I write the posts in markdown. In the Gatsby docs you can also find a good [how-to](https://www.gatsbyjs.org/docs/adding-an-rss-feed/).

Install the npm package.

```
npm install --save gatsby-plugin-feed
```

The RSS feed needs a way to uniquely identify content, typically a URL or slug or path.

In `gatsby-config.js` you need to add the plugin and **in most cases** you need to customize it. I wanted to integrate tags and exclude my blog post template.

In the rare case, you are happy with the basics, just add the plugin and your siteUrl.

```
module.exports = {
  siteMetadata: {
    siteUrl: `https://www.YOUR-WEBSITE-NAME.com`,
  },
  plugins: [`gatsby-plugin-feed`],
}
```

**Now** , let's have some fun with customizing the **RSS feed plugin**. Below is the code snippet I am using in this blog.

```
{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
            site_url: siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMarkdownRemark } }) => {
          return allMarkdownRemark.edges
            .filter(
              edgePost =>
                edgePost.node.frontmatter.isPublished === 'true',
            )
            .map(edge => {
              return Object.assign({}, edge.node.frontmatter, {
                description: edge.node.frontmatter.description,
                date: edge.node.frontmatter.datePublished,
                url:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                guid:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],
              })
            })
        },
        query: blogPostsQuery,
        output: '/rss.xml',
        title: "Mario's RSS Feed",
      },
    ],
  },
}
```

I guess the syntax looks pretty self explanatory, so I just go through the main points. With `output` you customize the URL of the RSS feed and with `title` the title. The query field is the graphQL query, here the placeholder blogPostsQuery.

Before mapping of the edges I am filtering if the blogpost is published. I have a flag in markdown for this (isPublished).

```
.filter(edgePost => edgePost.node.frontmatter.isPublished === 'true')
```

I then map over the filtered edges and create my object. I also add customized elements to the RSS feed, such as the **html encoded content** , the **tags** `(array in markdown)` and the **featuredImage**.

```
custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],
```

Now start the project with `gatsby develop` and go to localhost:8000/rss.xml. What do you see?

Yes, a 404 page. The RSS feed won't work with gatsby develop, you have to build and serve your project. `gatsby build && gatsby serve`, now go to localhost:9000 (standard port) and check the RSS feed. You should see something similar as [here](https://www.mariokandut.com/rss.xml). If yes, commit your changes and deploy and we are done with the first step.

**YaY** , 🥳🥳🥳. Well done.

## 2. Create a zap

Zapier provides workflows to automate the use of web applications together. It is often described as a translator between web APIs. [see wikipedia](https://en.wikipedia.org/wiki/Zapier)

So headover to [zapier.com](https://www.zapier.com) and create an account. I would recommend setting up Two-Factor-Authentification.

When you have confirmed your email and you've logged in into zapier, you see a red button **MAKE A ZAP**. Click it!

Our automation should do this. **Create a new medium post** if a **new item** is in our **RSS feed**.

Choose the app **RSS by Zapier**.

![Zapier Choose the App](https://www.mariokandut.com/static/dcd139b575e03307111a3957278a7abe/b9e4f/zap-1.png "Zapier Choose the App")

Choose the trigger event.

![Zapier Trigger Event](https://www.mariokandut.com/static/d1a016c23c2cac2f64b13481c9aedbc1/b9e4f/zap-2.png "Zapier Trigger Event")

Now add the Feed URL. ![Zapier Feed Url](https://www.mariokandut.com/static/315d834b2350e04e9bb4ea30b3e9acf0/b9e4f/zap-3.png "Zapier Feed Url")

Click continue and check if it works with clicking on **Test & Review**. ![Zapier RSS data check](https://www.mariokandut.com/static/94245130dfcb0151f056514569e11f93/b9e4f/zap-4.png "Zapier RSS data check")

I have two items in my RSS feed, so I choose one for further testing and click **Done editing**. ![Zapier RSS data](https://www.mariokandut.com/static/f58de0669a57995d0748c46535a1bc90/b9e4f/zap-5.png "Zapier RSS data")

50% done. YAY. Now we have to setup the **Do this...** part. ![Zapier App](https://www.mariokandut.com/static/7bd80619f66b7625b9b37983c8fd8b60/b9e4f/zap-6.png "Zapier App")

Choose the app **MEDIUM** and choose the action event **CREATE STORY** and click continue. ![Zapier Medium App](https://www.mariokandut.com/static/bd48b007ca4911d95f8a3e4b668e8637/b9e4f/zap-7.png "Zapier Medium App")

Now choose the medium account you want to connect. If your account, doesn't appear you have to connect your medium account to your zapier account. [Here](https://zapier.com/apps/medium/integrations) are more details on this.

![Zapier Medium Account](https://www.mariokandut.com/static/e1cec859c0b2fdf944d72f275d54da8b/b9e4f/zap-8.png "Zapier Medium Account")

Now, let's customize our story for medium. You should see a form like this: ![Zapier Custom Story form](https://www.mariokandut.com/static/ecbdc5c93997973ff4762ee144255438/b9e4f/zap-9.png "Zapier Custom Story form")

All fields marked required, need to be filled in.

- For the **title** , choose the post title.
- **Format** should be post HTML.
- The **content** filed should be the **Raw\_Encoded** post content. As the first line I am adding this, which links to the original post published on my blog and says it's a crossposting. `<p>This story was originally published ...</p>`.
- **subtitle** is optional, I use my description field.
- **tags** field is optional, I use my custom tags field.

**IMPORTANT:** for SEO purposes the original source of this content needs to be marked with a canonical tag. Otherwise, you have duplicate content and this could result in a search penalty.

- **canonical url** is optional, but we don't want to create duplicate content, so put the post url in.
- **publish status** is also optional, but I want it to go live automatically.

![Zapier Custom Story](https://www.mariokandut.com/static/02b88054763099dedd33e0654283d117/b9e4f/zap-10.png "Zapier Custom Story")

Now, click Retest & Review and your post should get send to medium. ![Zapier Medium Data Check](https://www.mariokandut.com/static/29e43a473fee8d45950367317a0b1014/b9e4f/zap-11.png "Zapier Medium Data Check")

Log into medium and verify. And **DONE**! YAY. 👍 ![Medium Stories Overview](https://www.mariokandut.com/static/52ba0d85d39c1809d7dcc27ddf19c8fa/b9e4f/zap-12.png "Medium Stories Overview")

## 3. Configure RSS income stream in dev.to

[dev.to](https://www.dev.to) is an amazing developer community, if you haven't joined yet, do it now and check it out.

To add your RSS Feed to dev.to simply go to [settings](https://dev.to/settings) and click [publishing from RSS](https://dev.to/settings/publishing-from-rss). Then **add your rss feed** and click **update**. ![Import RSS Feed into dev.to](https://www.mariokandut.com/static/f1c6413cb1529286f2b2d1e98bed8c7c/b9e4f/devto-rss.png "Import RSS Feed into dev.to")

**IMPORTANT:** The synced posts will be in your dashboards as drafts, so you can double check them. If you want fully auto-posting contact the admins and give them the right to set your posts to public. (send an email to [yo@dev.to](mailto:yo@dev.to)).

Hope you managed to automate your posts. If you have any questions, use the comment function or send me a message on twitter [@mariokandut](https://www.twitter.com/mariokandut).