Unique Post Styling with Jekyll

The other day Dave Rupert blogged about his new JavaScript plugin TimeJump. The Timejump post was a nice little read but the thing that caught my eye was the amount of time he had spent styling the post.

I have been following Dave’s development for a while now and have been keeping an especially close eye on his work with Jekyll.

So how did Dave actually achieve the custom styled post with Jekyll?

After digging around I worked out that he had some sort of ‘Art Direction’ voodoo happening. I have seen this done in WordPress before but not with Jekyll.

I did a little Googling to see if this was common. It’s not. Thankfully Dave replied to my tweet.

@jake_bresnehan I have a `head` key in my YAML front matter. Couldn’t be easier.

— Dave Rupert (@davatron5000) April 3, 2013

The Solution

Assuming you have the standard Jekyll structure set up, all should work a treat.


|-- _config.yml
|-- _layouts
|   |-- default.html
|   |-- post.html
|-- _includes
|-- _posts
|   |-- 1970-01-01-placeholder-post.md
|-- index.html

Inside your default.html layout add this little block of Liquid markup just below your default style sheet call.


{% if page.style %}
 <style type="text/css">
     {{ page.style }}
 </style>
{% endif %}

This checks to see if your post has any styles in the YAML Front Matter to process. If it does it will add your styles inline in the <head> (yeah it’s bad practice. Blah, blah, blah). If not it will just continue to output the rest of your post file.

With the above snippet added to your default.html layout all you need to do inside your new blog post is add the custom style variable in the YAML Front Matter like so:


---
layout: post
title: Placeholder post
style: |
  body {
		background: HoneyDew;
	}
---

Your post content

Handy Resources:

4 thoughts on “Unique Post Styling with Jekyll”

Really enjoying your posts about static sites and deploying via GitHub! Difficult stuff explained very well for beginners (me). Plus, your code examples look extremely sexy. Go orange. 🙂

Jake Bresnehan

April 10, 2013 at 9:25 pm

Cheers Jelmer!

Plenty more posts about static sites in the pipeline so keep an eye out.

Nice post! I learned a new trick today by reading the post. Thanks 🙂

Hey, thanks for this wonderful tutorial! You’re right; there’s absolutely nowhere else on the web that talks about styling jekyll posts.

I do have a question I hope you can help me out with…

I’ve added the following after my main stylesheet in my default _layout page:

{% if page.style %}

{% endif %}

When I got go to my post page and copy your following code after my title post section ….
style: |
body {
background: whatevercolor;
}

… I get the “page not found” message on jeykll and the following message in the terminal : “found a tab character that violate intendation while scanning a plain scalar at line 7 column 3.” I’ve tried changing the indentation to spaces rather than tabs, I’ve tried getting rid of the “|”, I’ve tried with the post.html layout, the default.html layout and I’m not sure what the issue could be.

Any help you could provide would be greatly appreciated!

Comments are closed.