How to Convert All Your Medium Posts To A Gatsby Blog in 5 Minutes

How to Convert All Your Medium Posts To A Gatsby Blog in 5 Minutes

I built a tool to convert all your Medium posts into a Gatsby blog in five minutes. How to Convert all your Medium posts to a Gatsby Blog in 5 Minutes. I built a tool to generate a whole blog from your Medium posts with one command.

I built a tool to generate a whole blog from your Medium posts with one command

TL;DR

  • I built a tool to convert all your Medium posts into a Gatsby blog in five minutes.
  • You can use it like this:

Copy-Paste Is Never the Answer…

Last weekend, I found myself wanting to start a personal blog in order to post more “stream of consciousness”-style pieces that wouldn’t really fit on my Medium page (I’ll still be writing on Medium, though).

However, as someone who’s been writing for years, I didn’t necessarily want to start fresh. I wanted to bring my existing posts along with me, so I started to think about how to go about this.

The simplest option would be to link to the Medium posts from the blog, but that didn’t feel right.

Another option would be to copy-paste the content and manually structure it in Markdown format (which is what I want my blog to use). That’d be fine, if not for the fact that I have 40 public posts on Medium, all containing pictures, which would make this a long and tedious process.

And thus, I landed on option 3: trying to automate as much of this process as possible — even if it took me longer than it would have if I had just done it all in a mostly manual way.

However, there was one caveat: I decided to do this at 2 p.m. on a Sunday afternoon and I wanted to be done before dinner. I knew I’d have no time to even look at this in the coming week.

So, here’s how far I got.

Deciding What To Do

My first idea was to build a tool to get Medium posts into Markdown. If I could do that, I’d be over halfway there regarding my blog.

I briefly contemplated building my own “Medium HTML” → Markdown tool, but then I found that Turndown does a good job of converting the HTML from my Medium posts into Markdown, so I decided I didn’t need to reinvent the wheel there.

There were a few caveats like Medium only using pre HTML tags for code blocks and Turndown expecting a code tag inside of pre to actually create a code block. I forked Turndown with the intention of making that and other changes but decided to postpone that for later. It already covered most of what I needed.

I also tried out  Medium to Markdown, but that didn’t work for me, so I just quickly moved away from it.

At this point, if I went into a Medium post and used “inspect element” to copy all the HTML inside the one article tag Medium has on article pages and used the  online Turndown tool to convert it to Markdown, I'd already get a pretty good result. Stopping here would have already saved me a lot of time when compared to the copy-paste method.

However, the afternoon was still young, and since a lot of the work so far had been done for me already, I became a bit more ambitious. And that was when I decided to see if I could get to a point where, by just passing a Medium username to a script, I could generate a whole blog from it.

programming web-development software-development software-engineering javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Software Developer vs Software Engineer — Differences: Bogus or Real?

In this article, see if there are any differences between software developers and software engineers. What you’re about to read mostly revolves around my personal thoughts, deductions, and offbeat imagination. If you have different sentiments, add them in the comment section, and let’s dispute! So, today’s topic…

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Software Developer vs Web Developer | Difference Web Developer & Software Developer

Software Developer vs Web Developer | Difference Web Developer & Software Developer | Software development and web development are normally used interchangeably. Although both include development, a software developer has different responsibilities from that of a web developer.

Developer or Engineer? Does It Make a Difference?

To summarise the main differences between the software developer and engineer: A developer executes. ... So the software developer is mainly focused on developing code that is a part of software development cycle. An engineer designs and plans applying the principles of engineering to software development.