Gatsby with WordPress

I had this idea of having a Gatsby frontend for my WordPress blog since I started learning Gatsby in May 2019. I even wrote a blog about it. But it had not been straight forward.

Initially, I used gatsby-source-graphql and wp-graphql plugin in WordPress. WP-graphql plugin exposed the data in WordPress in a graphql endpoint, which could be used as a source in the Gatsby app with gatsby-source-graphql.

I found out about gatsby-source-wordpress, With gatsby source WordPress, I had been very optimistic but the issue for me was building in production.

Gatsby announced incremental builds. WordPress integration was possible. Everything looked so wonderful. But yeah, the incremental build is still a premium feature in Gatsby’s cloud service.

But to be honest, my plan from day 1 was to bring my CMS/ WordPress down to my local system only and the only thing online will be the Gatsby frontend.

Local development is fine but the issue is with having any CI/CD pipeline. Manually uploading build artifacts to some s3 bucket would also be okay but does not feel very 2020 :D. I have been doing that for my Cocktail Meister project. The difference is, the site does not change that much, the content is almost static, only case when there is a need for the build is when I add new recipes. Unlike my blog will need more frequent updates.

NGROK

I used ngrok for quite a while now. It is awesome. What it does is, it provides a public URL for your locally hosted apps. Works as intended. But there is a problem. Ngrok generates a random subdomain every time you start a new URL forwarding. The problem with WordPress is the hard set base URL and homepage URL in the MySQL Database.

So with ngrok, every time I forward a URL to my local server hosting WordPress, I’ll have to change the base URL and homepage URL in the Database.

The SQL query goes something like this:

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldurl', 'http://www.newurl') WHERE option_name = 'home' OR option_name = 'siteurl';

Not very practical if you want that to be built every time content changes.

Ngrok offers static domain name in their paid service, I did not want to spend on this.

Instead, I went on with my old friend Heroku. It’s free. The setup was painless, took a couple of hours. I will write a blog post about that too.

So now my blog’s backend is hosted in Heroku.

Update: It does not end here 🙂 Read my blog post for the follow up.