Google Docs and Jekyll playing nicely together
tl;dr
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.
- Development Seed: Build CMS free websites
- Development Seed: Using Jekyll and GitHub Pages for Our Site
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
- CSS is preprocessed with SASS.
- CSS and JS is compressed by Jammit using the Jekyll Jammit plugin.
- List.js makes the page searchable
- All text is set in Futura PT served by Typekit
- Icons are delivered by IcoMoon.
- Other open source libraries used are Modernizr, normalize.css and the jQuery.