DEV Community

Cover image for Migrating from Wordpress to Gatsby
Ankur Sheel
Ankur Sheel

Posted on • Originally published at ankursheel.com on

4 2

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay