Engineering
Introducing Liftoff: Easily Create a Static Website Powered by Airtable
Our starter kit makes updating a website as easy as filling in a spreadsheet.
Postlight Labs is our internal workshop where we play, experiment with tools and services we love, and build new apps. In this Labs project, Engineer Frankie Simms created a starter kit for anyone who uses Airtable and needs a simple CMS for their static, React-based website.
Static websites are quick to build and cheap to host, but they usually require technical expertise to update the content on them. Airtable is a beloved, hybrid spreadsheet/database product that offers a fantastic API. What if you could easily create a static website using content in your Airtable base, and be able to update that content without touching a line of code?
Meet Liftoff, a static site generator that does just that. If you know how to fill out a spreadsheet, you’re 90% of the way to creating your own website with Liftoff.
Get Liftoff for free on GitHub:
Liftoff makes it easy to generate your own static HTML websites that pull content from a table in your Airtable base. After some simple setup—covered in the comprehensive README—you’ll be minutes away from using your Airtable bases to build online travel diaries, food journals, blog sites, and more. After setting up the connection to Airtable, you’ll also be able to customize your site with CSS and custom React renderers to truly make it your own.
Why Airtable?
At Postlight, we’re big Airtable fans and users. Unlike traditional spreadsheets, Airtable supports a wide variety of field types, from images to checkboxes and dropdowns, and offers database features like one-to-many relationships between records. Out of the box Airtable also offers a simple, base-specific REST API, which makes it perfect for managing and accessing multimedia content the way you decide to organize it.
(In the past we’ve written about how we used Airtable internally as a custom sales CRM solution, and we also featured an interview with co-founder Andrew Ofstad on our podcast.)
Sample Liftoff Sites
To show off what’s possible with Liftoff, I prepared two example sites.
The first Liftoff example is a reimagining of Postlight’s blog, Track Changes, which you can see at https://track-changes-demo.netlify.com (Airtable base, source code). This site showcases pagination, a lot of custom CSS, and Markdown support, as you can see in the body of some of the articles.
The second Liftoff example is a fake blog for pizza enthusiasts, located at https://roni-rony-rone.netlify.com (Airtable base, source code). This site highlights more custom CSS as well as custom React renderers, including one that lets you copy and paste a Google Maps embed code into your Airtable row and see it on your webpage, and another that does the same for Spotify playlist links.
Who Liftoff Is For
I created Liftoff with simplicity in mind—it’s for anyone who wants to build a CMS-powered static website quickly and easily. While it really comes alive when you add custom CSS and React components, even beginners will be able to create their own basic sites from scratch with little startup time.
For engineers who are building a simple static web site they want to hand off to a less-technical friend or client who’s comfortable updating content in Airtable, Liftoff is a fantastic starting point.
Fork or clone the Liftoff repository to start building your own Airtable-powered website—and be sure to let us know what you create with it.
Frankie Simms (@fdsimms) is an engineer at Postlight. Want to talk static websites, content management systems, or React? Get in touch: hello@postlight.com.
