Class Report

Faster, Stronger, Fewer Semicolons! Build a Website With Jekyll

Diagram of Jekyll data flows

Teacher: Dave Ramos
Location: MLK Digital Commons
Class Date: Jan. 4, 2014

With Jekyll, you write content in text files and generate the website locally.

Basics

Liquid

Developed by the Shopify people; popular in Ruby circles but starting to show up everywhere.

Other template languages

More with Jekyll

Sites using Jekyll

Markdown

By default, you save your pages as textfiles, with formatting described in Markdown. There are some Markdown editors, desktop and online.

Other “Indie CMSes”

There are a whole raft of tools that aim for simplicity and flexibility. Some use databases and run on the server, while others live on local machines like Jekyll. There are even a few that store data in flat files but reside server-side.

Design philosophy

We had a great question. To paraphrase:

I noticed that the sites on the list of Jekyll sites all tend to be text-based. Can you use Jekyll to make sites with images?

Yes, you can build image-based sites or ones with complicated layouts.

I don’t really pay attention to the tools that people use to maintain their sites because a skilled hand can maintain almost any site from almost any tool. I did recently note that Jessica Hische – known chiefly as a lettering designer – runs her site on Kirby, a flat-file CMS that’s similar to Jekyll. She’s got a lovely, highly visual site, especially the portfolio section.

There’s no Jekyll site “look.” With Jekyll and the indie CMSes, layout, structure, and interactivity are up to you. You want it, you can build it, but you’ll have to gather the tools yourself. That’s good and bad, depending on the task and your team’s preferences.

Let’s take the ubiquitous JavaScript image slider. Say you wanted a slider for a website. (I’ll wager that you can find a better design element than a slider, but I want a common example.) With WordPress, you could find a photo gallery plugin and install the script, supporting CSS and images, templates, and content types in the database, all with a few clicks. Jekyll won’t give you that help. You’ll have to find the script yourself, and you’ll need to assemble the templates.

Each of these approaches embodies its own kind of simplicity.

WordPress tightly integrates the frontend and backend, tying HTML/CSS/JavaScript for templates in with PHP code and the database. It’s easy to add new features – find the right plugin and click – but complexity creeps in if you want to customize anything, or if the plugin plays badly with other plugins.

Jekyll will process your text and image content, but it won’t do anything else for you. The Jekyll approach requires more knowledge at the start, but tweaks are easier, and the parts of the system are clearly and cleanly separated.

Software embodies someone’s world view. Jekyll appeals to people who want a high level of control over details, whether that means the site’s organizational structure, micro typography, or HTML markup.