Google Docs and Jekyll playing nicely together

I thought I'd share how I built a simple directory of football podcasts that started out in Google Docs and ended up as a static site generated by Jekyll. Source code can be found on GitHub.

With Jekyll you can fast and easy build static sites (as this one). It started out as the engine behing GitHub Pages and has since then grown more and more popular. If you have no past experience then I recommend that you read the following two blog posts by Development Seed, you might also want to take a look at the Jekyll documentation.

Out of the box Jekyll comes with a pretty basic functionality that can be extended by using a variety of plugins. The content that it'll create consists of blog posts and regular pages – but what if you need more than that?

When trying to find good podcasts during the euros this summer I decided to build a simple football podcast directory. At first I though of using Drupal or Symfony but decided to see if I could do it with Jekyll.

Enough background… Here's is how I did it:

1. Google Docs as data source

Each podcast conist of the following data:

  • Title
  • URL
  • Feed
  • iTunes feed
  • Description
  • Language
  • Image

A simple spreadsheet would do for that. With the help of Google Docs I could easily gather that data. For this project it was only me who provided the content but as Google Docs is an excellent collaboration tool with all its functions, we could have been a group of people doing this together.

Each spreadsheet can be published to the web in various formats – CSV being one of them. Here is my spreadsheet as CSV containing all the podcasts.

I then wrote some PHP code (here and here) that reads the CSV, downloads the images (that later on are resized and optimized) and saves the data as YAML files all ready to go with Jekyll.

2. The Jekyll Models plugin

As I mentioned earlier Jekyll only supports blog posts and regular pages out of the box. But thanks to the Jekyll Models plugin you can define your own models and store the data in YAML files.

3. Et voila

Source code on GitHub.

More details