✅Gatsby Blog Transfer - Success!

July 23, 2019 - 5 min read 🍵🍵🍵

Tags: webdev

I’ve gone from paying $200 yearly down to $0 dollars for hosting my blog. Initially, I ran Wordpress to run my blog and paid for hosting; when I found out you can have hosting for free, I became motivated in learning how its done.

My friend told me about Hugo, a static site generator and I stumbled upon a few other blogs running Hugo. I noticed how quickly they load and found out more about static site generators. I tried creating with Hugo but quickly realized I would have to learn Go as a new programming language and failed to make decent progress after struggling to run Hugo locally.

Another friend of mine briefly mentioned Gatsby, a framework based on React. It is a PWA (Progressive Web App) generator, similar to Hugo. It comes preloaded with Webpack and has a built in database system running on GraphQL.

Since Gatsby is based on React, a library that I’m familiar with, I was able to follow their tutorials via their documentation and was able to have a simple blog up and running.

I found that it deploys with Netlify via Github which made updating and adding posts very seamless through commits. Most importantly, the hosting from Netlify is completely free!

Features I Added

My current blog is based off of a Gatsby Starter Blog found here.

However, the blog provided was very barebones in terms of features. It was missing pagination of blogs, categories, pages and many other features that I wanted in a blog. This lackluster template allowed me to figure out all of the features I wanted all on my own.

Below are the changes I’ve made to the starter blog provided by Gatsby. 50+ commits and 575 minutes later, my final project from transferring to Gatsby from Wordpress has been completed! Dan Abramov’s blog inspired me to build a blog similar to his. I love the simplicity and minimalistic style that it had.

All the changes made to the Gatsby Starter Blog, in the exact order of changes and additions:

  1. Edited CSS - inspired by Material Design from a Visual Studio Code theme
  2. Added extra pages - about me and contact pages
  3. Added reading time and number of teas - number of teas based on length of post, reading time like medium
  4. Added tags page - followed documentation but had a hard time with a preloaded template initially, played around with template code until it worked
  5. Added clickable tag categories on the front page with posts - Gatsby has a great documentation for tags. I still do not have a full understanding of graphQL and how it handles the database but I do know how to access certain data.
  6. Pagination with posts - Gatsby's documentation had different code sample from template. I had to moved my index.js file to a template folder. This will allow me to serve it as a template instead of a main index.js file.
  7. Dark mode toggle - finally added this following documentation and from a tip from Tania. I sent her an email and she got back to me with a direction on how to implement dark mode. Big thanks to her!
  8. Adding Font Awesome to my React Pages using react-icons
  9. Adding PrismJS - helps add colour to my code snippets. PrismJS

Wordpress Blog Posts to Gatsby Blog Posts (Markdown)

After completing all the features I wanted in this blog, I had to figure out a way to convert all my Wordpress blog posts into a markdown file. I tried multiple plugins from Wordpress but all had failed as they were no longer up to date. I exported all of my blog post into a single xml file using the Wordpress export settings and found that xml can be converted over to markdown files.

I found a Python tool to convert Wordpress blogs to the Jekyll blog engine which uses Markdown exitwp. I was unable to get the Python script to work locally and stumbled upon a cloud version of this script which is called Travis Exitwp. I followed the instructions and was able to generate my Wordpress xml blog posts to the markdown format required for Gatsby.

This basically did 50% of the work, the rest was adding it into the Gatsby folders and making sure I still had my images.

Overall, I’m extremely happy with the result, I love how fast Gatsby is and I’ve learned a lot through this project.

I wish I had finished this earlier but due to a recent surgery, my productivity has been set back quite a bit. I’m hoping my second set of antibiotics will help me recover so I can get back to programming; I definitely needed this win!

Things to complete

  1. Adding clickable categories tag on blog post

  2. Change style of tags based on categories (visual improvement)

  3. code refactor bio component

My Gatsby repository on Github can be found here. I have left my blog open source, please feel free to reference the code on how I made these changes.


A blog by Kien