Help

How to easily use Airtable Data in Jekyll

Topic Labels: Integrations
10501 16
cancel
Showing results for 
Search instead for 
Did you mean: 
Ryan_Hayden
5 - Automation Enthusiast
5 - Automation Enthusiast

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.

16 Replies 16

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.

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

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:
53

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
6 - Interface Innovator
6 - Interface Innovator

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
6 - Interface Innovator
6 - Interface Innovator

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

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

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”: