Migrating WordPress to Gatsby in 3 steps

This article is for those who want to stop using WordPress and would like a fast-loading static website instead.

Moving from WordPress to GatsbyJS can be useful in some cases. Below I describe an easy approach for migrating and deploying your new Gatsby website. After this you can delete your WordPress installation. The three steps involved:

1. Install WP Gatsby Markdown Exporter plugin in your WordPress
2. Export your data
3. Use the data in your Gatsby website

Needless to say step 3 is where you’ll spend most of your time, but if you’re willing to follow a tutorial and write some code, you’ll make it work.

Outline for the rest of the article, feel free to skip sections:

1. Why use Gatsby
2. How to move data into Gatsby
3. How to deploy Gatsby easily

Part 1: Why use Gatsby

Gatsby is a static website that can load quickly for your visitors. It can be easier to customize the look and behavior of your website with Gatsby than with WordPress. Writing a new blog post requires creating a new markdown file using the markdown formatting and optional inline HTML. It is easy to create custom pages as well.

There is a way to use Gatsby along with your WordPress (Headless, without having to migrate your data, but this article isn’t about that).

Part 2: How to move data into Gatsby

The WP Gatsby Markdown Exporter plugin will save a zip file with all your pages and posts as individual markdown files (they will include some metadata too!) and all your images/uploads in their original folder structure. When set up, Gatsby will render each markdown file as an individual page / post.

I started with a Gatsby starter project (pick any; I used fabe/gatsby-universal) and followed the official tutorial for programmatically creating pages from data. I then customized the look of the pages and it was ready. My working code is available here.

Part 3: How to deploy Gatsby easily

Gatsby generates a static website, so when you are done developing, you can build the assets (run the gatsby build command in your terminal) and put them on any static webhost. You are done.

Another alternative is to use some cloud platform to deploy your website. I used Vercel (formerly Zeit) which monitors my GitHub repository and builds a new version of my website when my code changes.

Happy coding!