I recently re-developed my digital nomad blog using Gatsby on the frontend and still leveraging WP as the backend. Often, you'll hear this referred to as Headless WP built on Jamstack, which have been pretty trendy buzzwords these past few years but with good reason. To put it simply, it means you use WordPress to manage content and source data as a backend and then display the data or frontend, in whatever tech stack you'd like.

<aside> 💡 View my Github repo here.

</aside>

Why Headless WP and Gatsby?

Traditional WordPress Woes

I was facing a few interesting challenges with the WordPress community. Any developer in the WP world knows that the maintainers of WP are really pushing a block editor, which for over simplicity, is a chance to be like Wix. Upon trying to mend to to the new standards, I found enormous frustration trying to build within the block editor. Those frustrations can be a blog post another time.

Second, Google also released its core web vitals and that in June 2021, this will have direct impact on organic search ranking. WordPress has always been infamous for being bloated and requires a bit of work for optimal site speed. I personally was tired of stripping down and not building up. Jamstack and the frameworks behind this methodology pride themselves in providing modern solutions for modern problems.

A personal reason is I just wanted to explore new tech. Outside the WordPress agency world, modern JS frameworks dominate the web developer job descriptions and I wanted to see what all the hype was about.

Why Gatsby?

Gatsby really seemed to lead the forefront on static site generation. They also have a really sexy developer experience with integrating WordPress into their GraphQL layer. They have a plugin that handles sourcing all the data for you, which was officially released this year. They also provide incremental builds with web hooks which cuts down build times drastically (a common pain point once with static site generation.)

There is also an awesome community and resource system behind Gatsby and using WP with Gatsby. It was really easily to find resources, source code, and tutorials to get up and moving pretty quickly.

The End Product

I will admit, I could have done more optimizing here. Things like some images were still using PNG and not convert to WEBp, but overall, was still pretty slow.

Previous Build