How to automatically post from your Gatsby site to dev.to
Tags: gatsby, devto
Published: 2020-01-16 18:36:58

---
title: How to automatically post from your Gatsby site to dev.to
published: true
date: 2020-01-16 16:37:00 UTC
tags: gatsby, dev.to
canonical_url: https://labs.thisdot.co/how-to-automatically-post-from-your-gatsby-site-to-dev-to
---

When coding, I never seem to have enough time to complete everything that I want to, so I love discovering tips and tricks to speed some of my processes up.

In this article, we are going to learn how to set up automatic posting to __The Practical Dev__ site ([dev.to](https://dev.to "dev.to")), saving you significant time and effort. 

The following solution uses a static website built on Gatsby, and powered by contentful CMS, but this can actually be applied to any site that can generate an RSS feed.

The content of this article is going to be divided into 3 different sections:

1. What is an RSS feed?
2. Set up an RSS into a gatsby website
3. Configure dev.to to use an RSS feed

# What is an RSS feed

RSS has been around for quite some time. In fact, its first usable version was released in 1999 by Dan Libby ([wikipedia](https://https://en.wikipedia.org/wiki/RSS "wikipedia")). 

When first created, __RSS__ stood for __RDF Site Summary__, but then it started to be referred to as __Rich Site Summary__, or __Really Simple Syndication__, after the removal of the RDF element from version 0.91.

A simple definition of an RSS feed is:
 
> RSS (Rich Site Summary) is a format for delivering regularly changing web content. Many news-related sites, weblogs, and other online publishers syndicate their content as an RSS Feed to whoever wants it.
> [http://www.whatisrss.com/](http://www.whatisrss.com/ "www.whatisrss.com")

RSS provides a way to consume a specific website's data that is structured according to RSS specification. You can have a glimpse of what it looks like for [reddit](https://www.reddit.com/.rss)

For the past 2 decades, RSS has mostly been used to generate [News aggregator](https://en.wikipedia.org/wiki/News_aggregator "News aggregator"), but it has many other uses, as we are going to later show in our article.

# Set up an RSS into a gatsby website

In the following section, we are going to set up the feed in our Gatsby site, but as previously mentioned, RSS feed generators are available for all major frameworks and languages.

## Gatsby-plugin-feed

As you are probably aware, Gatsby has many fantastic plugins and great documentation, that makes it so powerful and easy to use. 

To achieve our goal, we are going to use a plugin called __Gatsby-plugin-feed__. There are different custom plugins that can support you in creating an RSS feed, but I have decided to use the above mentioned, as it is listed within the official gatsby site, and is well documented ([gatsby-plugin-feed documentation](https://www.gatsbyjs.org/docs/adding-an-rss-feed/ "gatsby adding rss documentation")).

## Installation

It is now time to install the plugin using a your preferred package manager.

    npm install --save gatsby-plugin-feed
    
    //or
    
    yarn add gatsby-plugin-feed
    
## Configuration
    
Configuration of a Gatsby plugin can be achieved within the __"Gatsby-config.js"__ file in the root folder of our site.


### Default config

If your Gatsby site follows the suggested configuration, you may be able to easily set the plugin using the built-in configuration, by just loading the plugin:

    module.exports = {
      siteMetadata: {
       siteUrl: `https://www.example.com`,
      },
      plugins: [
        ...,
        `gatsby-plugin-feed`
      ],
    }
    
### Custom config

Unfortuantely, not everyone is able to use the default configuration of this plugin. To help you understand how the plugin actually works, we are going to cover the steps necessary to achieve a full custom configuration for a website powered by Contenful CMS [Contentful CMS](https://www.contentful.com/ "contentful cms homepage").

Custom config can be a bit more complex to set up, than the default configuration detailed above, and it requires a number of __options__ to be set for the plugin to work:

- query
- feeds
 - title
 - output
 - query
 - serialize

### Query

In this __options__ paramenter, we are going to define a GraphQL __query__. This is necessary to fetch all the metadata required to fully define our feeds. 

In our case, we are just going to fetch the siteUrl:

     {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }
          }
        `,
      }
     }

__note:__ The plugin declaration within the gatsby-config.js file has been changed from a simple string to an object, because of the need to use a custom configuration.

### Feeds - title and output

The next step involves configuring a __title__ and an __output__ name for our file. The file name (output) is important to us, as it will later be used to dynamically fetch the content of our site.

     {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }
          }
        `,
        feeds:[
          {
            output: "/rss.xml",
            title: "My custom feed",
          }
        ]
      }
     }

### feeds - query

It is now time to fetch the data necessary for our RSS feed. This is accomplished in the __query__ paramether within the __feeds__ option, in the form of a Graphql query:

    ...,
    feeds: [
     {
      query: `
        {
          allContentfulPost(filter: { project: { eq: "blogPost" } }) {
            edges {
              node {
                createdAt
                title
                slug
                project
                markdown {
                  markdown
                }
              }
            }
          }
        }
      `,
      output: "/rss.xml",
      title: "My custom feed"
     }
    ]
      

  
### feeds - serialize

So far, we have been able to set up some basic config (such as file name and title), and create a query to collate all the data necessary for our configuration.

In this final step, we are going to define the structure of our RSS items entry, using the different collection of data available.

Depending of the usage of your RSS feed, you may be required to provide a specific structure for your RSS feed (hence the possibility to create more than one feed within the Feeds array).

In our case, for the feed to be fully consumed by dev.to, we will require our RSS feed XML file to have the following information for each of the items:

__title__: The title of the post
__link__: The absolute URL of our blog post
__pubDate__: The date in which the article was first published on your website
__content__: The markdown or HTMl content of your post

The serialize method, will expose the queried data as its parameters, and it expects an array to be returned.

It took me some time to understand the relationship between the parameters exposed by the serialize method and the XML generated, but after some playing and research, I have found out that the following structure is the correct one to produce the above mentioned architecture.

    ...,
    feeds: [
     {
      serialize: ({ query: { site, allContentfulPost } }) => {
        return allContentfulPost.edges.map(edge => {
          return {
            title: edge.node.title,
            date: edge.node.createdAt,
            url: `${site.siteMetadata.siteUrl}/${edge.node.slug}`,
            custom_elements: [
              { 'content:encoded': edge.node.markdown.markdown },
           ],
         }
       })
     },
     query: `
      ...
     `,
     output: "/rss.xml",
     title: "My custom feed"
   ]

__note__: Dev.to provides a small amount of documentation on publishing, using RSS feeds ([publishing_from_rss_guide](https://dev.to/p/publishing_from_rss_guide "https://dev.to/p/publishing_from_rss_guide"), but the information on the site seems to be a little bit outdated. In fact, it doesn't mention the use of a pubDate even though it actually uses this property.

## Usage

The configuration of our Gatsby site powered by Contentful is now completed, and it is now time to see the result of our effort.

Due to the nature of feeds, the actual feed XML file is not avaialble in a development environment. Instead, it gets generated during a build command execution. For this, we need to run "Server Side Rendering" build option:

    npm run ssr
    
Behind the scene, this command is going to __build__ the site, and then __serve__ it.

Once build is completed, you should be able to analyse the output of your feed at the location defined by the __output__ option of our plugin's config.

You can access the generated feed at __http://localhost:9000/rss.xml__

![image](//images.ctfassets.net/zojzzdop0fzx/4Bbimu2yugbv17MCFaQQWW/e303278a6f82ff997d9640670f71e62a/image.png)

As you can see from the image above, our feed includes *title*, *item*, and other elements necessary to be consumed by dev.to.


# Configure dev.to to use an RSS feed

Now that our RSS feed is ready to be consumed, we are able to complete our post automation directly within Dev.to.

## Setup the autofeed

The rest of the configuration will require you to modify your personal settings, so our first step is to log in to __dev.to__.

While in the home page, you can access the __settings page__ by hovering on  your avatar on the top right of the main navbar, and selecting __Settings__ from the dropdown menu.

The settings to publish from RSS are available within the main sidebar menu, as shown in the screenshot below:

![image](//images.ctfassets.net/zojzzdop0fzx/3nquyx3MP0o6dPEKjNKL4s/d3a5fe1e0ad9976f88883286fa5dd3ce/image.png)

Setting up the RSS (after in posses of the RSS feed endpoint) is just two clicks away.

Automatically feed our articles just requires three simple options:

1) __RSS feed URL__: This is going to be the URL defined before for our XML file. It is important to note that the URL that we are going to paste here cannot be __localhost__, and needs to be your LIVE url
2) __Canonical_URL__: If you have not heard of this before, it is a good time for your learn about it. Duplicating content on the web usually result in a bad SEO ranking. To support real authors, posting their content in multiple places, we can make use of a canonical url ([Canonical URLs: What Are They and Why Are They Important?](https://www.shopify.co.uk/partners/blog/canonical-urls "Canonical URLs: What Are They and Why Are They Important?"). This makes sure to inform search engines, which URL should really be indexed for a specific page. So in our case, setting a __canonical_URL__ from dev.to to our site, will inform google that all posts found on dev.to, should actually refer to the one published on our site.
3) __Replace links__: This option will provide you the ability to "replace" all the links of your posts. As mentioned in the description, this is suggested, when you are planning to migrate an entire blog over.


With all settings completed, it is now time to click the __Submit__ button. Doing so will initiate an immediate fetch of your content, and also schedule subsequent automatic watch over your file.

From this point onward, all the posts published on your website, are going to be automatically available within your __dev.to__ account as __Draft__.

## Publish your posts

As mentioned above, the imported posts are not automatically posted, but just created in a __DRAFT__ state. This is done, to prevent posts that do not render successfully, or that need final touches (eg. define more FrontMatter) to be published.

There are a couple of things I have personally learned in the past from enabling RSS feed:

- __ALL RSS feed items are imported__
This feature imports ALL posts. In our case, this was not what we wanted, as we were already used to do a manual fetch of all our posts. This resulted in a LOT of draft posts within our dashboard.
The best solution for this problem is to "refine" the GraphQL __query__ and/or the __serialize__ method used, while configuring your RSS feed, to export posts from a specific date, or with specific values.
- __Imported posts will reappear if deleted__
RSS feed will create a draft post, if it does not find one that match the same information. So if you encountered the problem above, removing them from the dashboard would not solve your problem, as they will magically reappear. 
- __Rendering differences__
Your imported posts may not look precisely the way they appear on your site. This may be due to custom styles you may have, unsupported embed and/or media images usage. So it is greatly suggested to always check the preview of your post, even if it looks good on your original post.


# Conclusion

Implementing RSS on our Gatsby site has been a great success. Not only, has it allowed us to focus our content development in a single platform, but it has also supported our site with great SEO gains.

As already mentioned, RSS has been around for a long time, and no matter what techstack your website is built in, it will surely have the ability (natively or with the use of a plugin), to produce an RSS feed.

I hope the above guide will help you to find out of this fantastic feature, and please do not hesitate to contact me if you require further details, or to inform me about your succesful configuration.

<em>[This Dot Inc.](https://www.thisdotlabs.com) is a consulting company which contains two branches : the media stream and labs stream. This Dot Media is the portion responsible for keeping developers up to date with advancements in the web platform. In order to inform authors of new releases or changes made to frameworks/libraries, events are hosted, and videos, articles, & podcasts are published. Meanwhile, This Dot Labs provides teams with web platform expertise using methods such as mentoring and training.</em>