Migrating from Wordpress to Gatsby
Tags: gatsby, github, markdown
Published: 2019-08-29 21:08:49

---
title: Migrating from Wordpress to Gatsby
published: true
tags: gatsbyjs, github, markdown
canonical_url: https://www.ankursheel.com/blog/migrating-from-wordpress-to-gatsby
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rmubcx94qq7wlwvrz4uq.png
---

## My Blogging Journey.

I started blogging in 2008 with a free Blogspot account. If you are wondering what I am talking about, Blogspot was the free blogging platform provided by Google. But it was not until 2014, that I decided to get my domain and have more control over the content and structure of the blog. Enter self-hosting. At that time, Wordpress was probably the most popular service and I moved to a self-hosted blog leveraging all the power of Wordpress.

## Reasons for moving away from Wordpress

There were a few reasons that the Wordpress solution was not working for me anymore. In no particular order,

- Slow
  - Let’s face it, shared hosting does not make for a fast site. Also, Wordpress is itself sluggish and the various plugins I had added were not helping.
- Cost
  - Most hosting platforms have a heavily discounted first-year plan after which the price rises astronomically. This resulted in me having to migrate my site every year to a new platform. There were also a few providers that made it difficult to cancel the plan and get back the data unless you did it a month in advance. It was getting harder to justify the expense of 100+ USD. Even the cheapest option would easily set me back by 50-60 USD.
- Degraded Experience of writing posts
  - With the release of the new generation editor and having to do everything with content blocks, I felt like I was spending more time than what I felt was required to create a new post.
  - I did not want to login to the site every time I wanted to create a new post or work on an existing draft.
- Programming Language that I don’t use anywhere else
  - I never enjoyed the process of writing PHP to make modifications. The few custom modifications that I made on the site felt like a chore. The fact that I could never see myself use PHP anywhere else probably did not help either.

## Why Gatsby

Recently, it has become easier to have a relatively cheap solution for hosting static content by using a static site generator. There are quite a few options out there. The first that comes to mind is [Github pages](https://pages.github.com/) which comes nicely integrated with [Jekyll](https://jekyllrb.com) which is a static website generator. Although it ticked 3 of the 4 boxes above, I did not feel it was the ideal solution for me mostly because the development language was Ruby, another language I couldn’t see myself using anywhere else. It was a similar story with Hugo, which uses Go.

Just when it seemed that I would have to resign myself to use Github Pages, I found out about [Gatsby](https://gatsbyjs.org) which is based on Javascript. I have been using Typescript increasingly at work so this seemed like the perfect solution. 

Let’s see how it stacks up against my concerns from the previous section.

- ~~Slow~~
  - Gatsby sites are fast. Blazingly fast.
- ~~Cost~~
  - It’s free to host it on [Netlify](http://www.netlify.com). You can’t beat free. Netlify is awesome. It requires almost no setup and every time I push to master, a new version of the site is deployed.
- ~~Degraded Experience of writing posts~~
  - It supports markdown and MDX which means I can write and edit the posts in any text editor and anywhere. I can also embed react components.
- ~~Programming Language that I don’t use anywhere else~~
  - It's built on the **JAM** stack ( **J** avascript **A** PI **M** arkup) All the custom tooling that I would want to do uses ReactJS, GraphQL, JavaScript/Typescript and CSS. All of these are what I am using at work so I can easily transfer the learnings from one place to the other.

### Other Advantages

- Build reusable components and use them to construct views.
- Hot Reloading and code-splitting are built-in.
- Can easily be configured to use Typescript.
- A bunch of plugins and starters (both official and unofficial).
- Support for CSS-in-JS.
- Responsive and optimized images.
- No reloads between pages.
- Gatsby detects what links are on the page and prefetches the content.
- Support for MDX which means I can embed React components into the posts.

It’s also not difficult to move your blog from Wordpress to Gatsby. I will give you the basics of what I did in case you also want to make the switch.

## My migration process

- Download the XML from Wordpress using the “Tools-\> Export” section.
- Use the [ExitWP](https://github.com/thomasf/exitwp) or [Wordpress-to-Hugo](https://github.com/SchumacherFM/wordpress-to-hugo-exporter) tool to convert the XML to markdown.
- Download all the images and other content from the server.
- Find a Gatsby start starter so that it’s easy to to get started.
- Add Git LFS as some of my posts are image-heavy.
- Connect to Netlify and setup automatic deploys.
- The one I used was written in Javascript so I had to migrate the javascript to typescript and a few more plugins to enable typescript. Also, change styling options to use CSS-in-JS.
- Update styling, colours and layout.
- Update the starter so that all the blog content is under “/blog/“.
- Add a redirect rule as I decided to remove the date from the URLs.
- Add the converted markdown.
  - Fix indent and other issues.
  - Build missing react components depending on the post content.

## You said it was easy to move from Wordpress to gatsby. But I don’t see all of your posts. Did you lie?

Depending on when you read this post, you might notice that a lot of the posts seem to be missing. At the very least it doesn’t seem as if I have been blogging for so many years. the main reason for this is that the original blog had a lot of varied content. I have decided to move some of it away to a different blog. For example, I am moving the book reviews to [Discoveries in Bookland](https://www.discoveriesinbookland.com/). Some of it might not even make it to this blog because of the limited value it adds.

I have taken this opportunity to revisit what content I want to show.

## Conclusion

Although it’s an ongoing process, I am happy with how the migration is progressing. [my blog](https://www.ankursheel.com) is now built with React, Node.js, Gatsby, Markdown and hosted on Netlify. I still have control over my content and blog structure. All the posts are in version control so there is no need for tons of backups.

I will be adding more posts related to things I had to go hunting for on google. If you would like to know more about something specific, let me know in the comments.