Migrating from Wordpress to Gatsby

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 which comes nicely integrated with Jekyll 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 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. 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 or Wordpress-to-Hugo 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. 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 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.