Unique Post Styling with Jekyll

April 07, 2013 - Jake Bresnehan

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.

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 }}
{% 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:

Join over 30,000 developers & designers who get the best news and articles delivered right to their inbox each week.