In this article, we will walk through the steps of turning WordPress sites into Headless with 21YunBox. On average any WordPress sites that turn headless gain 8x - 10x speed improvement.


Steps to turn WordPress sites to Headless:

On WordPress Admin, install the following plugins:

  • WP Gatsby
  • WP GraphQL


Install these plugins on WordPress Admin to enable 'Headless' mode
Install these plugins on WordPress Admin to enable 'Headless' mode


These plugins help us to turn a WordPress site into GraphQL callable APIs, in fact, this is the step why it is called “headless” and because now WordPress is served as the purpose of managing content, not the front-end interface.

Anyways, if you don’t get what it means by headless now, just follow the steps below, you will get it by the end of this post, and you will see your site gets ~8x speed boost too.


Set up a Headless frontend with 21YunBox

  1. Sign up on 21YunBox

  2. Fork this WordPress starter on Github.

This starter serves as the starting point of your Headless WordPress site, you can modify it later if you want.

  1. Use the following values during creation:
Runtime Static Site
Build Command yarn && yarn build
Publish Directory ./public


Click Advanced Configuration to add below environment variables:

KEY VALUE
WPGRAPHQL_URL You can find and configure this on your WordPress Admin


You can find your WPGRAPHQL_URL here:



Once you put these in the environment variables and press deploy. Your website will be live on your 21YunBox URL as soon as the build finishes.


Headless WordPress Starter: https://wordpress.21cloudbox.com/
Headless WordPress Starter: https://wordpress.21cloudbox.com/


So what happens if I add new content on WordPress, do I need to redo the steps above?

What you need to do is to press the purple deploy button on the 21YunBox console, then the 21YunBox Build system will pull the content from the WordPress server and deploy it once it’s done building.

Press the purple deploy button on 21YunBox to publish new content from WordPress
Press the purple deploy button on 21YunBox to publish new content from WordPress



Steps to setup auto-published Headless WordPress with 21YunBox

1. On WordPress Admin click “Settings” -> “GatsbyJS”

2. Then Configure it using the below values.

You can find the build “URL” on 21YunBox Console. It’s under your project’s settings tab.



3. Save the webhook.

That’s it! Now when new content publishes on WordPress, 21YunBox will automatically build and deploy the changes for you.