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.


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:

3 Comments

  1. 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. :)

    • Cheers Jelmer!

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

  2. Nice post! I learned a new trick today by reading the post. Thanks :)

This post currently has 3 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *