How to do post specific CSS with Jekyll has been documented, but all examples I found only explain how to include a stylesheet in individual posts, and not on a site homepage, index.html. I feature my latest post in full on the homepage and so need any styles specific to it included there, and in this case I needed a web font specific to the post too.
My site’s directory structure looks something like this:
.
├── _config.yml
├── _drafts
| └── epic-novel.md
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| └── 2013-12-23-dont-fear-javascript-the-comic.md
├── _site
├── archive
| └── index.md
└── index.html
Adding the stylesheet
I started by following Jake Bresnehan’s write up, which shows how to add inline styles to a post. The following is added to default.html, in the <head>:
{% if page.style %}
<style type="text/css">
{{ page.style }}
</style>
{% endif %}
That snippet only adds the styles to a post when it has a style variable in its front-matter. To add styles to the homepage, index.html, only when that post is the latest post, I added the following:
{% if site.posts.first.style %}
<link rel="stylesheet" href="/css/art-direction/{{ site.posts.first.style }}">
{% elsif page.style %}
<link rel="stylesheet" href="/css/art-direction/{{ page.style }}">
{% endif %}
The first if statement checks to see if the latest post on index.html has a style variable in its front-matter, if it does the link to the named stylesheet is created.
The second statement checks to see if the file being generated is a post, as in Jake’s code snippet, and if it has a style variable in its front-matter. If it does the link to the named stylesheet is created.
I opted for a separate stylesheet file, instead of adding inline styles, kept in an art-direction folder.
Adding the web font
To include the Google web font I used the same setup, only using a “googlewebfonts” variable in the front-matter:
{% if site.posts.first.style %}
<link rel="stylesheet" href="/css/art-direction/{{ site.posts.first.style }}">
{% elsif page.style %}
<link rel="stylesheet" href="/css/art-direction/{{ page.style }}">
{% endif %}
{% if site.posts.first.googlewebfonts %}
<link href='http://fonts.googleapis.com/css?family={{ site.posts.first.googlewebfonts }}'>
{% elsif page.googlewebfonts %}
<link href='http://fonts.googleapis.com/css?family={{ page.googlewebfonts }}'>
{% endif %}
And my front-matter for the Don’t Fear JavaScript: The Comic post looks like this:
---
layout: post
title: "Don’t Fear JavaScript: The Comic"
description: A short comic strip about a hero undertaking the learning of a language called JavaScript.
date: 2013-12-23 19:00:00
categories: code
tags: JavaScript, comics, fun
location: Girona, Catalonia
style: javascript-comic-001.css
googlewebfonts: Gloria+Hallelujah
---