How to easily use Airtable Data in Jekyll

[Ryan_Hayden]

It’s super easy to use Airtable data in Jekyll. Here are the steps:

Step 1: Include the Airtable Gem in your gemfile.

gem 'airtable'

You may also need:

gem 'bigdecimal'
gem 'activesupport'
gem "json"

Step 2: Add a script to your _plugins folder

Make sure it has a .rb extension. The script should look something like this:

require 'json'
require 'airtable'
require 'active_support/all'
# require 'active_support/all'

# Pass in api key to client
@client = Airtable::Client.new("YOUR_API_KEY")

# Pass in the app key and table name

@table = @client.table("YOUR_APP_ID", "YOUR_TABLE_NAME")
@records = @table.records(:filterByFormula => "published", :sort => ["date", :desc], :limit => 100)

# Change the filename here below but make sure it's in the _data folder.
File.open("_data/YOUR_FILENAME.json", "w") do |f|
    data = @records.map { |record| record.attributes }
    f.write(data.to_json)
end

Step 3: Use that data in your themes.

Jekyll will run that script as part of it’s build process and make that data available to your themes. All you have to do it something like this:

{% for item in site.data.airtable %}

<p>{{item.name}}</p>
<p>{{item.description}}</p>
{% if  item.attachment %}
<img src="{{item.attachment[0].url}}" alt={{item.title}} />
{% endif %}

{% endfor %}

Check out rowandtable.com for some examples.

[Nicholas_Caldwe]

Do you have any guidance for getting Airtable data into Jekyll Collections? I’ve been casting around for a straightforward content platform to build a page-per-record system and Jekyll looks the most user-friendly for a non-programmer tinkerer like myself.

[galliani]

nic, how savvy are you with tinkering code in jekyll? because you can definitely do that using the guide provided above by Ryan_Hayden by modifying this bit:

File.open("_data/YOUR_FILENAME.json", "w") do |f| data = @records.map { |record| record.attributes } f.write(data.to_json) end

[Nicholas_Caldwe]

HI galliani, I’m not a Ruby expert by any means. I know there’s a WordPress-based solution but I want a static-site-generated option and Jekyll has always seemed like the most recommended. So altering that function is probably a bit of a stretch without a bit of hand-holding, I’m afraid.

[Nicholas_Caldwe]

I have now got something working using the data-page-generator plugin, and currently stuck on the best way to output multiple tables from the same Base. I tried setting up an array of the tables then looping the above code but my level of Ruby understanding wasn’t quite enough to get that to work.

[galliani]

Ah yes, I have looked at that plugin, quite useful.

I have integrated Airtable with Jekyll few times successfully however it is for work purposes so I cannot show the code, as a rubyist I would not mind at all to help you with the problem you are having on the loop because it is definitely doable.

Either you provide me with the github repo link or some code snippets of the loop.

[Nicholas_Caldwe]

You can tell I’m not a programmer because I haven’t set up a git repo yet!

Anyway, I had some other things broken and I got it to work like the following code, though if there’s a more elegant way I’d love to hear it!

items = ["paints", "makers"]

items.each do |item|
    @table = @client.table("BASE_ID", item)
    @records = @table.records(:limit => 100)

    File.open("_data/#{item}.json", "w") do |f|
        data = @records.map { |record| record.attributes }
        f.write(data.to_json)
    end
end

I guess my next question is to how to pull in more than 100 records without hitting the API limits! I suppose a further loop of some kind but that probably will be beyond me.

[galliani]

Hey Nic, I thought you were not a programmer so I decided to hack something up real quick today. Kudos for your effort in hacking something up, though.

I see that you already managed to fetch the data correctly from Airtable, however I made a custom Jekyll plugin that you can use here to store Airtable records as collections into your Jekyll repo (no need for the Data Page Generator plugin), all you have to do is following the steps listed under the “Usage” section, there are at least 9 steps, but the instructions are well detailed. At the moment, I have not made it to be able to pull more than 100 records, but I plan to implement it this weekend the earliest.

As for how to display the collections, you can take a look at this file in my sample github repo for the Jekyll with that plugin installed, the Index page and the partial for the loop.

Welcome to Ruby, hope this helps, keep trying!

[Nicholas_Caldwe]

You are a hero! Thank you. I’m sure something like this will be useful to a lot of people!

Yeah, basically I’m a front-end designer who’s pretty comfortable with template languages like Liquid and Twig (and, ugh, even Smarty) so loops, at least, are something I can do. I learned about variable interpolation from learning Sass! I do like what I’ve seen of Ruby over the years.

[Nicholas_Caldwe]

I’ve finally had a chance to try this out and it does pretty much everything I would need!

At this stage the only real issue I’m bumping up against is that doesn’t escape multi-line content in the YAML front matter correctly. One thing that might be handy is that any column labelled “content” in Airtable could populate the body of a markdown post.