Publish Websites Using Airtable With 21YunBox

Jun 8, 2021

Publish Websites Using Airtable With 21YunBox
Publish Websites Using Airtable With 21YunBox


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


Steps to deploy publish websites using Airtable with 21YunBox:

  1. Sign up on 21YunBox
  2. Use this Airtable base to start, click the Copy base button located in the top right corner.
  3. Fork this Airtable 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
AIRTABLE_BASE_ID You can find it on your base -> “Help” -> “API documnetation”
AIRTABLE_API_KEY You can find it on Airtable Dashboard -> “Account” -> API
AIRTABLE_TABLE_NAME Destinations for this starter. If you use a custom base, you can find the name of the base on the tab (top left)


Here are the steps to locate the base ID:


Step 1) to locate Airtable's base ID
Step 1) to locate Airtable's base ID


Step 2) to locate Airtable's base ID
Step 2) to locate Airtable's base ID



Here are the steps to create an API KEY:

Step 1) to create an Airtable API KEY
Step 1) to create an Airtable API KEY


Step 2) to create an Airtable API KEY
Step 2) to create an Airtable API KEY


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.


Airtable China Starter with 21YunBox
Airtable China Starter with 21YunBox


So what happens if I add new content on Airtable, 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 Airtable server and deploy it once it’s done building.

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



Steps to setup auto-publish with Airtable and 21YunBox

Like the other CMS integration tutorials we wrote, we hope to automate the publishing experience for you. However, as of Jun 10, 2021, Airtable doesn’t seem to have a webhook out-of-the-box, for more detail and updates, you can read this thread: https://community.airtable.com/t/webhooks-for-records/1966/138





Ready to make your app work in China?

Get Started Questions? Talk to an expert.