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
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
This starter serves as the starting point of your Headless WordPress site, you can modify it later if you want.
- Use the following values during creation:
Click Advanced Configuration to add below environment variables:
|WPGRAPHQL_URL||You can find and configure this on your WordPress Admin|
You can find your
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.
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.
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.
- How to Speed-Up Netlify in China
- How to Deploy Next.js to Server?
- How to host Strapi CMS with 21YunBox?
- Does Sanity CMS Work in China?