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.

[galliani]

Yeah, that might be a good idea. I will try implement this in the version 0.4.0.

Other than “Content”, what do you think are the other similar labels? “Body” or “Text”, perhaps? I am thinking of creating a whitelist containing the labels that are usually used for long text, ie. paragraphs.

[Nicholas_Caldwe]

Any of those would do for starters, but maybe you could pass a string to the plugin through a configuration block in config.yml?

[Kingi_Gilbert]

Hi! :slightly_smiling_face: Thanks for this awesome plugin :thumbs_up: . I am way more of a front-end designer turned hacker and so was carefully following your instructions.

I was wondering if you could give any tips on this error as I can’t run jekyll serve:

I’ve run bundle install and bundle update - seems ok?

It seems the dotenv is installed

My gemfile seems to be setup correctly

I have the _plugins folder and the environment_variables_generator.rb setup

.gitignore file has the .env thing added

i am wondering if it is to do with the folder /_plugins not being compatible with GitHub?

(sorry I can only upload one image per post right now and I can’t include links in my posts)

[Craig_Watson]

Hi Guys,

I am not quite getting this working, the configuration is not giving any errors so I am wondering if someone would have a peep at the repo or point me in the right direction to debug.

Thanks :grinning_face_with_smiling_eyes:

[Nat]

@galliani good work with the Jekyll plugin - we added to resources directory here: https://builtonair.com/resources

[galliani]

Hi, sorry for the belated response. If you can, please provide me with the link to your repo, I’d happily take a look at it

[nbo]

Hi, I have the same problem. Did you have any success installing it? I installed the gem as described but get the same error-message with “jekyll serve”: