Trigger Build for a Headless WordPress and Gatsby

On our latest post we talked about how the new Quema Labs redesign is a Headless WordPress and a new Gatsby site.

This means that every time a new post like this one is published, we have to run a new build for our site to create a new static files from this post. Same goes for every new content on our WordPress site.

If you don’t update your site often, you can just trigger manually a new build directly on your static web hosting like ZEIT Now or Netlify.

But if you are like me and you love to automize things, then keep reading because I will show you how to use a new WordPress plugin to trigger a webhook on your server to start a new build every time a post, page or custom post type is edited or published on your site.

I created a new plugin called WP Headless Trigger, you can go to the Github page and download the latest release.

This is a simple WordPress plugin that triggers a webhook you specify that then will trigger your build command.

So, first download the latest ZIP file from Github, then go to your Admin Panel on your WordPress site, Plugins > Add New > Upload Plugin

Select the ZIP file, install and activate the WP Headless Trigger plugin.

Once you did that, you will see a new page under Tools > Headless Trigger on your menu.

There you have only one input to add your Webhook.

The webhook URL depends on your hosting provider, for example here in Quema Labs we use ZEIT Now. So let’s see where to find our webhook to trigger a new build.

Go to your ZEIT Now dashboard, select your project and go to Settings

There you can create a new Deploy Hook, this is a URL that each time you make a HTTP request it will run a new build script on your project.

Since we are using Gatsby, every time you run a new build, it fetch all the new data from our Headless WordPress and creates the new static files that are served on our site.

So, copy that URL and paste it on the settings page from our plugin WP Headless Trigger and click Save Changes

That’s it, now every time you edit or publish a new post, page or custom post type item, it will trigger that webhook and start a new build script.

This plugin makes even easier to run a Gatsby site with WordPress as a Headless CMS.

New Quema Labs with Gatsby & Headless WordPress

I’m thrilled to announce a new Quema Labs! 🎉

Quema Labs started on 2012 and this is the 4th major redesign of the site, long awaited it features a more modern, clean and simple design.

But by far the more important change is that, Quema Labs is now a complete Gatsby site using WordPress as a Headless CMS.

This makes the site blazing fast because all the pages are static HTML files that are created at build time.

What is that Gatsby thing?

Ok, first let’s talk about Gatsby and why is awesome.

Gatsby is a Static Site Generator using React and GraphQL, this means that you can create a React app and then Gatsby instead of doing Server Side Rendering, creates all the necesary pages into already rendered HTML files by running a build script.

This way you end it up with a blazing fast static site that you can host almost any were and at an extremely low price.

Headless WordPress, what’s that?

Using WordPress as a Headless CMS is a term for saying, that here in Quema Labs we are using a regular WordPress site only as a Content Management System, we are not using WordPress as a front-end site.

Thanks to the REST API and the wonderfull plugin WPGraphQL, we can extract all the necessary data from our old WordPress site, such as pages, posts, our themes for sale, etc. and then use Gatsby to render all that on HTML files.

For example, if you go to our Themes page:

This actually and HTML file created with React and Gatsby, fetching our Custom Post Types from our WordPress site using GraphQL.

Same goes for every pages on Quema Labs, it is content extracted from a WordPress site and converted into static HTML files.

That’s why if you navigate the site every page will load almost instantly.

Let’s talk about Hosting

Our site is hosted on ZEIT Now, which is a Zero Config Static Hosting.

They also have a zero config support for Gatsby apps, so all you have to do is upload your site and you will get your Gatsby app running with a global CDN, Free SSL certificates, GitHub integration and for $0 dollars.

Yep, that’s right they have very generous Free Plan that, at least for now, is more than enough for Quema Labs, so now we have a much faster site for free.

For our Headless WordPress site we are using another great hosting company, Cloudways.

This is a Managed Cloud Hosting, this means that they take care of all of the server settings. We are using the cheapest server around $10 per month.

Since the WordPress site doesn’t receive much traffic there is no reason to have a bigger server, you can use any option out there, even a free WordPress hosting will work.

Conclusions

I’m really happy how all the developer experience was for WordPress & Gatsby. I can see a bright future for new and more complex projects with these two tools.

Although that generating a static site is not suitable for every website, I see this trend growing in the near future.

I will be posting more about Gatsby & WordPress together from my upcoming projects, including any new feature here in Quema Labs.

How To Arrange WordPress Posts in Any Order

WordPress is a high-end content management system that auto-arrange the posts based on the publish date or updated post date. However, many WordPress users find it extremely difficult to put the existing post in order.

The advanced algorithm follows the date and time of the published posts and you cannot change the order magically. Of course, there aren’t any features on the platform that assists to change the order of the posts.


Read more

5 Common WordPress Security Issues

One of the first things a budding online entrepreneur will realize is that the content management system WordPress is the most massively used website building tool on the planet. The second thing this newbie entrepreneur will likely stumble across is more than a few disgruntled users claiming its security features are crap. Don’t let these naysayers scare you away.

Read more

Top 6 WordPress Plugins for Popups Forms on Exit Intent

Are your readers not coming back to your website despite of the exceptional content you have? Are you not able to convert your potential customers? Is something missing on your website? Yes, definitely, something ought to be missing from your website. What it could be? You might be failing to add a subscription box on your site or it might have been placed in an undesirable location. No problem! We have got a fabulous solution for you.

Read more

Subscribe

Subscribe to our newsletter and receive theme updates and our latest news straight into your inbox.

And you’ll receive an exclusive tutorial for your WordPress site on:

How to change your login URL