Skip to content

Edvins's Blog

Migrating from WordPress to Gatsby

Gatsby, WordPress2 min read

Initial version (v.1.0.0) of edvins.io was built around 2 years ago using WordPress based on Underscores as a starter theme. I've created a custom design which was heavily inspired by Todd Motto's blog (before he shut it down).

I hosted it on DigitalOcean's cheapest droplet with a back-up option. Roughly, it costs me $7 per month to maintain it. It wasn't too bad, but clearly, there were cheaper options. The main reason behind choosing DigitalOcean was a console level of access. I used Git as version control, so deploying a new version was just simply pushing local changes and pulling it on server trough the terminal/console.

On a side note, I've been using WordPress CMS for years for personal and client projects since 2012. I enjoyed working with it due to its simplicity and ability to go way beyond the blog functionality by using plugins like Advanced Custom Fields and Custom Post Type UI, etc.




Time for a change

The second version (v2.0.0) of edvins.io was built around 2 weeks ago, while I was on holidays. My ultimate goal was to migrate from WordPress to Gatsby.

Gatsby is a React-based, GraphQL powered, static site generator. It uses powerful pre-configuration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching, Markdown support, fast build and deployment times, etc.


Migration & Development

I've used gatsby-theme-minimal-blog as a Gatsby starter template. Next step was to start adding features I wanted my blog to have (e.g. filtering by tag), etc. The most important thing was to understand how Shadowing mechanism in Gatsby works. I'm still working on adding new features (e.g. search by blog post name) and I fully open-sourced this project, in case you want to have a look at the code.

The most time-consuming part was to convert blog posts from HTML to Markdown. Luckily, I had less than 10 posts, so using a Turndown (random HTML to Markdown converter) was more than enough.

Although, I finally had a chance to learn the fundamentals of GraphQL (Gatsby is powered by GraphQL) to understand how it works under the hood. I used How To GraphQL (free & open-source) which I found as a recommendation in Gatsby's docs.


Deployment

Gatsby builds static files as an output, so there is an unlimited number of deployment options. I went with Netlify due to its simplicity in set up and automatic deployments. Effectively, it means that every time I do a new git push to master, new build image is automatically generated and deployed for me.

Moreover, it's worth to mention that:

  • Every time you open a pull request, or push new changes to a branch, Netlify automatically builds a preview with a unique URL, which makes testing even easier.
  • Free tier is more than enough to host static files in my case, saving me ~$84 / per year.



Next steps

I have a set of features I plan to implement as a part of edvins.io v.2.0.0 as well as I plan to get write 1 blog post per week. Topics I'm interested to write about:

  • Software development focusing mainly on the front-end (JavaScript, React, Firebase, etc)
  • My side-hustle journey as an indie developer.
© 2020 by Edvins Antonovs. All rights reserved.