Deploy Contentful Site in China With 21YunBox (Step-by-Step Guide)

Mar 12, 2022

Deploy Contentful Site in China With 21YunBox (Step-by-Step Guide)
Deploy Contentful Site in China With 21YunBox (Step-by-Step Guide)


In this blog, we will walk through the steps of publishing websites using Contentful with 21YunBox.


Steps to publish contentful sites in China using 21YunBox:

  1. Sign up on 21YunBox
  2. Create or use existing Contentful space
  3. Fork Contentful Starter on Github
  4. 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
CONTENTFUL_SPACE_ID You can find it on Contentful Dashboard -> “Settings” -> API Keys -> “Space ID”
CONTENTFUL_ACCESS_TOKEN You can find it on Contentful Dashboard -> “Settings” -> API Keys -> “Content Delivery API - access token”

Here are the screenshots of finding the space ID and the access token for contentful.


Locate Contentful API Keys
Locate Contentful API Keys


Contentful Space ID, Contentful Delivery API - access token, Contentful Preview API - access token
Contentful Space ID, Contentful Delivery API - access token, Contentful Preview API - access token


If you are using 21YunBox to preview (before you publish the content live to the public), you can use the “Content Preview API - access token” instead. This preview feature gives you the flexibility to preview internally.

That’s it! Your website will be live on your 21YunBox URL as soon as the build finishes.


Contentful China Starter with 21YunBox
Contentful China Starter with 21YunBox


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

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

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

To automate it, you can follow the steps below to configure it.

Steps to setup auto-publish with Contentful and 21YunBox

1. On Contentful Dashboard, click “Settings” -> “Webhooks.”

Locate Contentful Webhook
Locate Contentful Webhook

2. Click “Add Webhook” on the top right

Configure Contentful Webhook
Configure Contentful Webhook

3. Then, configure it using the below values.

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

Contentful Webhook Settings for 21YunBox
Contentful Webhook Settings for 21YunBox

4. Save the webhook.

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





Ready to make your app work in China?

Get Started Questions? Talk to an expert.