Migrating this blog from WordPress to Gatsby

September 10, 2022

capybara working on a laptop in a renaissance style via Dalle 2

I’ve been a WordPress user for ~15 years, and I’m still a fan, but I decided to move this blog to a static site for a few reasons:

  1. Performance: Even with a light theme and few plugins, Wordpress is slower than a static site
  2. Security: I got hacked a couple times over the years, and it was a pain each time
  3. Robustness: Wordpress requires constant updates, and with each update there is a small chance that something breaks
  4. Hosting: Ditching GoDaddy, who are awful, without a LAMP stack host lined-up, and not wanting to be bothered with AWS (or paying for LightSail)
  5. Fun: The challenge of learning a new technology

I chose Gatsby; an open-source static site generator based on React and GraphQL. It was a toss-up between Gatsby and Next.js, but I chose Gatsby because:

  1. It seemed a little more lightweight than Next.js, and this is only a hobby
  2. The starter templates make getting setup super easy
  3. The official and community documentation is great
  4. Gatsby plugins, like Wordpress, give you a lot of plug and play functionality
  5. The workflow with Netlify, who I can’t recommend enough, made hosting the site a pleasure

Gastby’s homepage does claim a “2x SEO Boost vs. competitors” so how could I refuse? 😁

In practice, I just used the blog starter, customised the template a little, and migrated the content.

Workflow

Content editing is easy if you have any sort of technical background:

  1. Start a light Gastby server on your local machine with gatsby develop in terminal
  2. Edit markdown files. I use VS Code for the realtime split-screen preview
  3. Check your work locally - http://localhost:8000/ by default
  4. Add, Commit and Push to the GitHub repo
  5. Netlify grabs the content from GitHub, compiles in to static HTML and pushes it live
  6. Spot a typo and go back to #2 - repeat for at least an hour

Pros

  • Once setup, adding content via Markdown -> GitHub -> Netlify is quick and easy
  • Netlify offers free hosting for personal & hobby sites, and an auto-renewing SSL via Let’s Encrypt
  • I get 0 “Please moderate a comment” emails 🎉
  • The site is lightning fast

Lighthouse perfect score

Cons

  • The template looks bare-bones at time of writing
  • I miss spellcheck writing markdown in VS Code
  • It was a faff migrating the old content, there is a solid guide, but in practice a lot of my images didn’t make it across, and the formatting of old blog posts took a beating.

Overall I’m happy to have made the switch, and would recommend the Gatsby/Github/Netlify ‘stack’ for static personal sites run by technical(-ish) people.

Header image courtesy of Dalle-2.


Chris Reynolds is a Bay Area Product Manager with 15 years of international experience in SEO, digital marketing, UX, analytics and team management.

© 2022 Chris Reynolds