In Google PageSpeed Insights, the blog would hover around a 60-70 speed score. After converting to Gatsby, the score is 99 for mobile and 100 for desktop, passing 22 audits.

Why Gatsby?

There are a lot of static site generators to choose from. Jekyll, Hugo, Next, and Hexo are some of the big ones, and I've heard of and looked into some interesting up-and-coming SSGs like Eleventy as well. At first, I thought I'd just want something that outputs straight HTML, and that a heavy JavaScript app couldn't possibly be better than simple HTML and CSS.

However, I realized that a static site generator like Gatsby utilizes the power of code/data splitting, pre-loading, pre-caching, image optimization, and all sorts of performance enhancements that would be difficult or impossible to do with straight HTML.

Since I primarily write JavaScript these days, I wanted an SSG that runs on Node.js, and if it uses React, even better. I tested out a few sites that run on Gatsby and yeah – they were fast. Blazingly fast.

A few things I really like about Gatsby

No page reloads – this site is now a SPA (single page app), and clicking on any internal page from within the website doesn't need to load a completely new resource

– this site is now a SPA (single page app), and clicking on any internal page from within the website doesn't need to load a completely new resource Image optimization – all the images are automatically stripped of metadata, optimized, resized, lazy-loaded, and compressed

– all the images are automatically stripped of metadata, optimized, resized, lazy-loaded, and compressed Pre-fetch resources – Gatsby detects what links are available on a given page and loads that data into the cache

– Gatsby detects what links are available on a given page and loads that data into the cache Bundling and minification – code is minified, bundled, and served

– code is minified, bundled, and served Server-side rendered, at build time – Gatsby builds optimized static assets, which can be hosted anywhere!

– Gatsby builds optimized static assets, which can be hosted anywhere! Articles are saved in beautiful Markdown

Every time I push to the repo, the site gets automatically deployed (thanks to Netlify)

Very little boilerplate code was necessary to get started with Gatsby. I just forked the Gatsby Advanced Starter, a very simple, minimalist, completely UI-free foundation after my own heart, and started working with it.

I should mention I moved my host to Netlify, which has been a great experience. I really can't say enough positive things about them. I've been highly impressed with how quick and easy it is to set up and deploy my new site.

My Migration Process

I've been putting off migrating to a static site for months and months, because I knew it would be a huge time sink, obsession, and a lot of work. I had over 100 guides and tutorials to migrate, and in the end I was able to move everything in 10 days, so it was far from the end of the world.

If you've been thinking about moving your blog from WordPress to a static site but have been putting it off due to fear of how long it will take and how much work it will be, I highly recommend giving it a shot. I'll give you the basics of what I did in case you also want to make the switch.