All Articles

Migrate from Wordpress to GatsbyJS

I finally came back to write a new post :) A few months ago, I decided to migrate my blog from Wordpress to any SSG (Static Site Generator). I was between Jekyll and GatsbyJS and chose GatsbyJS because it’s written on JavaScript, most popular SSG nowadays and has many additional futures.

As a starter, I’ve chosen gatsby-starter-lumen because IMO it’s the best one for blogs.

Why you should migrate from Wordpress to Gatsby:

  • Your blog don’t need any paid hosting service anymore (You can use your GitHub/GitLab instead)
  • You can easily add/edit blog pages and posts as Markdown documents with a special header where you need to place necessary information set by your starter or yourself such as title, slug, description etc.
  • You can easily add necessary plugins provided by Gatsby instead of choosing around many Wordpress ones
  • Main advantage - Gatsby pages load like a rocket while Wordpress is a slow piece of shit

After reading this post you will be able to:

  1. Start your Gatsby Website
  2. Configure your website according to your personal data
  3. Export your Wordpress posts as Markdown
  4. Add exported posts in Gatsby
  5. Assign your own domain name

Start your Gatsby website

You can easily start your website using any existing starter. Almost all starters have instructions how to deploy a particular starter on GitHub Pages and/or Netlify. As I’ve written before, I used gatsby-starter-lumen. It’s has a button 2020 10 14  deploy to netlify button which you just need to press once to deploy the starter on Netlify. It will suggest you to give GitHub/GitLab permissions and choose a name for your new repository. After finishing all initialization steps, you can clone your website’s repo and add/edit any file you need.

Configure your website according to your personal data

After deploying I suggest you to change your personal information in config.js according to your starter. In my config I’ve changed url, website name, social links and other necessary fields.

Export your Wordpress posts as Markdown

I’ve used WP Gatsby Markdown Exporter to simply export posts I’ve already written and their media.

2020 10 14  wp export screenshot

You can also use similar tools such as ExitWP.

Add exported posts in Gatsby

After deploying your starter and exporting Wordpress posts you need to change each post header according to the template given in sample posts from your starter. You can see the instance for my starter below.

2020 10 14  post header

You also need to add all media from your posts into /media/ directory of your website.

Assign your own domain name

Using Netlify you can easily assign your own domain name to your new website. You just need to click 2020 10 14  domain settings button on your blog’s Netlify page and add your domain and nameservers. As for me, I’m using Namecheap and I’ve just chosen Custom DNS in my domain settings and provided this custom DNS nameservers to Netlify.

2020 10 14  custom dns

I hope this post will help you to migrate your blog from old and slow Wordpress to modern and fast GatsbyJS. Have a nice day!