Skip to main content

Tutorial: generate a faceted search interface for a Costume Core-formatted Airtable base

The tutorial will guide you in creating a web-based faceted search interface for a Costume Core-formatted Airtable base.

You will:

The end result will look like:

Screenshot of result

Before you start​

For this tutorial you will need:

  • A Costume Core-formatted Airtable base derived from the blank template. The tutorial will use the sample dataset.
  • A GitHub account to create a GitHub repository, set up GitHub Actions, and deploy your generated website using GitHub Pages

You do not need to install git or any other software on your computer.

Find your Airtable API base id​

Follow these instructions under the Finding IDs in Airtable API -> Base IDs header.

Your Airtable API base ID should resemble appgU92SdGTwPIVNg (which is the ID of the sample dataset). This identifier is specific to the Airtable API, and is not contained in the URL of the base (e.g., https://airtable.com/shryU3j5IXFxjrdEy/tblUeStXG6w5MMGlF/viwlbQDtd6H80rzVw).

Obtain an Airtable personal access token​

Follow these instructions to obtain a personal access token.

The personal access token should have at least the following scopes:

  • data.records:read
  • schema.bases:read

You should limit the token's access to your specific Airtable base.

Create and configure a GitHub repository​

Copy the template GitHub repository​

Follow these instructions on creating a GitHub repository from a template, using this template repository.

Configure GitHub Pages​

Follow these instructions on publishing GitHub Pages with a custom GitHub Actions workflow.

Configure GitHub Actions​

Following these instructions, create new repository secrets with the following names and values:

  • AIRTABLE_ACCESS_TOKEN: the Airtable personal access token you obtained in the step above
  • AIRTABLE_BASE_ID: the Airtable API base ID you obtained in the step above

Generate the site​

Follow the recipe on manually running a GitHub Actions workflow.

The GitHub Actions workflow is downloading the contents of the Airtable base, transforming them to the Paradicms data model, generating the faceted search interface, and deploying it to GitHub Pages.

Follow the recipe on visiting your GitHub Pages site.

Your site is now available on the public Internet, and you can share it with people.