Blogging with Airtable

This blog is published through Airtable, a spreadsheet database hybrid as a service. The blog I had here prior ran off Markdown files, it was clever but the format didn’t facilitate quick posts here and there. Each one was required to be somewhat of an article which predictably led to hardly any blogging at all.

I knew I needed a new setup but I also knew that I didn’t want to give up Next.js. And I also most certainly knew that I did not want to recreate a blog from scratch. Enter Airtable. It had a backend scheme that was perfect for how I wanted to structure the blog and it had a nice mobile app that would allow for quick blog posts without having to be at the main computer.

The way I set it up is I have a base with a Notes table and a Books table. The “notes” can be either quick notes, like this one, or quotes, like this one. And each note can include an “official” book reference that is linked to a book in the Books table. This way if in the future I want to have each book as a page I can then link to all the posts that reference that book.

The API was for the most part easy to work with and their official JavaScript library works as advertised. What makes Airtable’s API particularly suited for a blog though are the various parameters you can pass to the API. For example I have filterByFormula: '{Publish} = TRUE()' which allows for draft posts and sort: [{field: 'Publish Date', direction: 'desc'}] which gives you the chronological blog flow.

The most difficult portion was figuring out the best way to cache the posts. (I didn’t want to have to hit Airtable’s API for each pageview.) I ended up using Redis, though the recommended solution was a microservice like micro-cacheable. I didn’t have enough time to dig in fully to microservices and to be honest it was all a little over my head.

Redis worked, and I decided to go with it for now. There were a several other quirks encountered along the way, but those would be better addressed in a more code-heavy tutorial-esque post.

In terms of tools on the front-end, I’m using Next’s built-in getInitialProps() function to load the API content as part of the initial page load and React Markdown to parse the content to HTML (Airtable doesn’t have built-in Markdown support, but you can obviously enter whatever kind of text you want). And that’s pretty much it.

The setup is proving to be pretty flexible so far. For example, Pat Dryburgh asked about a JSON feed and using the mechanisms already in place for referencing the API and caching I was able to easily create one:

Finally, a quick shout out to the community (makers of Next.js), they are very friendly, helpful, and quick with support.

I’m working on a longer, more detailed post about the setup but feel free to @ me on Twitter if you’re curious about any particular snippet of code. I’m happy to share.