Porting articles from Medium to create a blog in Gatsby

I recently built my personal website using Gatsby JS. The logical next step was to add a blog section where I wanted to display all the articles that I had written on Medium.

While I wanted to continue writing on Medium as it gives a great writing & publishing platform, I also wanted to display the Medium articles on my website as well.

But to burst my bubble, I found out through this twitter thread that Medium does not provide an easy to use API to pull all the articles from Medium. Though I got a few suggestions to make this work, I wanted to try something new.

This is how I ended up accomplishing the task!

1. Node script to pull RSS feed from Medium & convert it to JSON

I wrote a simple node script to fetch the Medium RSS feed which is in XML format. The RSS feed URL for an account would look something like https://medium.com/feed/<username>

In this RSS feed, there would be an <item> tag for each of the articles posted on medium by the username provided in the URL. It would look something like this:

Medium RSS Feed

After fetching this RSS feed, I converted the XML to JSON using xml2js npm package and wrote the resulting JSON for each of the articles in their respective files under content/blog/ directory in my main project directory.

The complete node script for this can be found here.

You can run this node script independently or as part of the deployment process as mentioned in step 3.

2. Inject JSON data from the file into a component using Gatsby filesystem plugin

Next, I used the gatsby-source-filesystem plugin to source each article’s JSON data that is now present in my file system under content/blog/ directory into my Gatsby application. I also had to use the gatsby-transformer-json plugin to convert the JSON string from the JSON file into JavaScript objects that could be used in my components.

To use these two plugins in your Gatsby application, add the following to the plugins section in gatsby-config.js

plugins: [
   {
      resolve: `gatsby-source-filesystem`,
      options: {
          name: `blog`,
          path: `${__dirname}/content/blog/`
      },
   },
   "gatsby-transformer-json"
]

I finally used the useStaticQuery hook to pull in the JSON data into my Blog component.

const data = useStaticQuery(graphql`
     query blogDetailList {
        allBlogJson {
            edges {
               node {
                  title
                  pubDate
                  link
                  id,
                  content_encoded
               }
            }
         }
     }
`);

Here content_encoded will have the entire article data that I used to display the blog content.

3. Add the node script as part of your deployment process

As I use Github Pages to deploy my website, I added these two lines into the script section of my package.json so as to make sure to fetch all the latest articles from Medium every time before deploying the website.

"scripts": {
    "deploy": "npm run medium && gatsby build --prefix-paths && gh-pages -d public",
    "medium": "node medium.js"
}

This helps me keep the articles in my website’s blog section to always be in sync with those on Medium.

That’s all there is to it!