I have always love WordPress. I have been using it for a decade now and I love how it has evolved overtime. You can even read some old posts about WordPress theming and plugin ideas. At one point, I even contributed a WordPress Plugin that has a decent amount of followers but it is now unmaintained. To prove my love for WordPress, here’s a photo of me and Matt Mullenweg.

Me and Matt Mullenweg at a WordPress meetup in Singapore. Circa 2014 – 2015.

My love for WordPress stops at theming. Developing themes on WordPress is definitely not one of my favorite things. The front-end stack is quite outdated if you compare it to the latest and greatest tools out there. No hot reload, PHP syntax to deal with, and the many subfiles I have to edit and manage. Maybe the front-end stack has evolved too or maybe there are recipes to workaround these woes but I just never bother to look it up.

I used GatsbyJS on my latest project, a microblog that chronicles my travelling. I must say that the dev experience is amazing. I enjoy working with GraphQL to query only the subparts of data that I need. As someone who used React at work, I am well-verse with using components in order to break apart small components and use them to avoid repetitions.

Last year, I decided to migrate my blog from being hosted on DigitalOcean to Netlify. But because I love WordPress so much, it is not a complete migration. I do still use WordPress but I use it as a headless CMS in order to write and store content on my blog.

Now, this post isn’t strictly a how-to instructions. I merely want to chronicle the process of migrating and some extra fun things I did in order to make my blogging experience better.

Ensuring no down time during migration

Since I know that my current WordPress installation will need to go through some breaking changes that can cause down time, I decided to clone my current WordPress droplet. That’s pretty trivial with DigitalOcean’s snapshots. I just need to create a new droplet based on the snapshot and I can start poking around without worrying about the current state of my blog.

Helpful plugins

Several plugins that I had used to make working with headless WordPress a bit easier:

• WP Headless CMS Framework
• JWT Authentication for WP-API
• Deploy with NetlifyPress
• WP Preview Link Update

WP Headless CMS does provide JWT authentication. In hindsight, I believe I do not need to use another JWT auth plugin but I think I had trouble making it work and so I had installed a second plugin.

WP Headless CMS does not need configuration unless if you want to enable advance features. It works out of the box for the basic things I need. My only complain is the documentation’s vagueness about how to configure advance features. I can see how it can stump users who are not used to working with WordPress. This could have been solve by providing an admin panel but the author has his reasons.

Note that you don’t need JWT authentication in order to get blog data from WordPress. The REST API is accessible by default and it doesn’t need authentication. I just needed JWT authentication for further enhancement. More on that later.

Serving blog posts on GatsbyJS is simple. You just need the gatsby-source-wordpress plugin and configure it to match your needs. I did remember excluding multiple routes that I don’t need in order to speed up build time.

Configuring domain on Netlify and DigitalOcean

Configuring a custom domain on Netlify is quite straight-forward for most cases. You can just use Netlify DNS to automate the domain configuration. But since I still want my WordPress to be hosted as a subdomain under the same domain name as my blog, I had to manage domain through DigitalOcean instead of Netlify.

A quick search lead me to this short instructions on how to properly configure the domain on DigitalOcean. Luckily for you, an official document from Netlify already exist on this topic. It wasn’t there when I was trying to set this up.

Setting up WordPress preview feature with GatsbyJS

At this point, I am quite happy with the blogging experience. Only one feature that is missing and that is the WordPress preview feature. It is one of the features that is important to me as I will never publish without previewing and I happen to be one of those people who abused the preview button too many times. So I decided to come up with a solution and that involves adding a JWT Auth token.

WordPress APIs give you access to most of your published data without the need to login. Unpublished posts require credentials and this is where the JWT Auth token comes in.

My solution is quite simple and could be more sophisticated had I put in more effort but I just want things to work so I can start blogging right away:

• Add a preview page on GatsbyJS
• Show a login form. This credentials will be use for WordPress authentication to access unpublished data. You can pass it to /wp-json/jwt-auth/v1/token
• Grab the post from /wp-json/wp/v2/posts/postId
• Display posts for previewing!

In the future, I would like to explore the possibility of implementing a single sign-on so that I do not have to log in twice. Either that or find a more sophisticated way to do this. I also created a WordPress plugin in order to hijack the preview button on draft posts. It only takes a few lines of code that you can just copy paste to functions.php.

Things I missed from WordPress

I certainly do not miss WordPress theming but I do miss WordPress plugins! While it is true that some plugins could slow down my site but I do miss the convenience it provides. For example, I could’ve easily add things like Facebook and Twitter meta tags including adding an accompanying image to my blog posts whenever I share them on social media. Right now, my posts have no accompanying images so I doubt that it is enticing for people to click on but I am planning to fix that soon!

I want something dead simple: add meta tags information through meta boxes. Query that information from an API and serve it on GatsbyJS. Perhaps this requires another WordPress plugin but nothing is impossible with my rudimentary PHP skillz!

My blogging experience stays the same since I have added most of the features that I consider valuable from WordPress. The only difference is the theming experience. Theming has never been so easy with Gatsby. The performance gain is amazing too and my blog has never been so fast! I highly recommend using GatsbyJS together with WordPress especially if you love both of these tools as much as I do. You’ll never really look back again.