Gatsby + WordPress = New Blog!

February 22, 2022

Change happens all the time. Sometimes you have no control over that change. Other times, you are the individual responsible for all the changes. But the one constant in all change is that sometimes you make a decision and do not fully understand the consequences.

History of the Blog

I had to go back and look for this information, but the first post ever was back in May of 2011 at Tech Ed where I decided it was time to start a blog. It was a quick post; the site had no fancy graphics but under the hood was WordPress. And I used that all the way up until April of 2019 when I decided it was time to join the cool kids and move away from WordPress to a Static Website. Why? It was faster and all the cool kids were doing it!

I broke out my favorite search engine (Bing of course!) and searched for what everyone was using. The flavor of the month was Jekyll. It was so fancy and neat. You could build it locally, use themes and everything was in Markdown files. I was a “developer”, so Markdown had to be the right choice. And after about 5 months of Jekyll, I decided it was no longer cool and had to find the next cool thing. It didn’t hurt that in those five months I had issue after issue with the site. Every update broke something, and I was hosting it in GitHub pages, because I didn’t want to spend any money on hosting. During this time, I still had my WordPress site running with a simple 301 redirect to the new URL.

After Jekyll, I found Gatsby. Unlike Jekyll that didn’t make any sense, Gatsby was the exact opposite for me. It used ReactJS instead of whatever the crazy formatting was under the hood in Jekyll. And when I moved the site, this time I thought I would spend a little money, I used Azure Static Web Hosting. It was only $15 per month, and it had to be less of a pain than GitHub pages. I could still use all the cool Continuous Integration and Deployment of GitHub directly into Static Website. I used Azure DevOps, because again, why not? It was fun. There was only one other issue. Azure Static Web Hosting didn’t support naked domain (i.e. not having a www in front of the domain) so I found an article to work around it. All I needed to do was move my DNS hosting to CloudFlare and with some magic rules, it could do the redirects for me. I did have some learning curves on Gatsby as it’s all powered via GraphQL – but it’s a new tool so why not.

And there we had it. It was just these items being used:

>> Markdown > Gatsby > GitHub > AzureDev Ops > Azure Static Web Hosting > and CloudFlare for DNS

I still had my WordPress site being hosted, because that had no cost, so I left it running doing its thing.

What was the problem? I REALLY hate writing blog posts in Markdown. I mean, REALLY hate it. So much so, I have over 50 things I would like to write blogs about. Some I even started. But I just couldn’t bring myself to open VS Code and go through the fun of it. I worked in VS Code and Visual Studio all day long. Writing a blog, seemed like work now. And then there was the images! Saving them, uploading them, linking to them…just terrible.

Something New, Something Old

I spent a considerable amount of time looking for an alternative. I could scrap the entire thing and move back to WordPress. But I left it because I was always having to update, then a theme would break, or yet another security vulnerability. So going back wasn’t an option. I tried different add-ons like TinaCMS and looked at various headless CMS options, and although these had promise, there was A LOT of work to pull that off.

I then went back to the Gatsby website and found Gatsby Cloud. I’ll be honest, it had been a long time since I visited and really understood what was happening. But it made complete sense, if you are going to write a cool open-source platform, you need to make money somewhere in the game. So why not create a great hosting experience. That eliminated a lot of random extra steps from above. No longer would I need to make the GitHub > AzureDev Ops > Azure Static Web Hosting dance. Plus, I didn’t need to have any of the CloudFlare DNS anymore. And the great thing is, their Free Plan includes both automated Deployment, Hosting and plenty of bandwidth for my needs. And if I never needed, they support a bunch of hosting partners (like Azure Static Webhosting and more). So, if I needed to move because I ran out of bandwidth, I have that option.

While looking at Gatsby Cloud I ran into their Data Source integrations and all the usual suspects where there – Contentful, Cosmic and then something caught my eye. WordPress!

How does that work? I jumped into the Setup Instructions, and they were super simple. On your existing WordPress site, you load two plugins to enable GraphQL access to your blog posts. The second is to provide you a means to setup a Webhook, so when you post a new site, it automatically kicks off a new build in Gatsby Cloud. Then within your Gatsby site, you add the gatsby-source-wordpress and update your GraphQL calls and you are set.

I had not touched the blog since Gatsby 2.x, so I took this opportunity to upgrade to 4.x and update the actual pages. And I’ll be honest, what I thought was going to be a quick hour exercise did turn into a weekend of playing around to make it all right. But at the end of the day, I had back my familiar CMS tools of WordPress and with every update, a quick and static website driven by Gatsby.

After I finish cleaning up the website, I’ll move the GitHub repo from private to public. Nothing special but I did find making the tags (i.e. category) pages work correctly did take a little effort.

And with that, I have a new blog, and a straightforward way to update it. My hope is this weekend’s work makes it easier to sit down and write out some of those blog posts.

There is still some polish that needs to happen with Comments and a few other items. But once those are wrapped up then it will be set!

Built using Gatsby and Material-UI

Copyright © TheArgyleMVP 2022.