In Jekyll, Front Matter is the stuff you find at the top of posts and pages between a pair of --- triple-dashes. It is written in YAML, also known as YAML Ain’t Markup Language (I chuckled a little the first time I found out what YAML stood for because the name is so meta). Front Matter along with Liquid, Jekyll’s templating language, are a dynamic duo that could be used to do some really sweet stuff in Jekyll.
On the surface Front Matter might seem like this tame little kitty used to take care of the standard ho-hum stuff for a post such as the post’s layout and title. But with some imagination Front Matter is what can be used to make your static site feel more dynamic. To give you a feel for why Front Matter, matters, I’ll show you how I use it to add very specific call to actions to each post.
Call to action or CTA for short, comes from the marketing world. CTAs are used to get the audience to make a response. Growing up I remember days when I was sick, being stuck at home and watching infomercials. Usually towards the end of the infomercial, you’ll hear the promoter say, something like “Call now and get not just one but 3 for the price of 1!”. This is a call to action. On the Internet, a call to action is in essence the same thing, a way to get the user of your website to take action and respond to your post or page.
A common example of CTAs on blogs is the commenting section at the bottom of the post. Or on a product’s landing page, after listing the features and testimonials, there might be a buy now button or a form for users to signup for your newsletter. On my website, specifically posts about Jekyll; I have a specific CTA that informs readers that I’m writing a book on Jekyll with a big button that says “Tell me more”.
The setup
To implement the post-specific CTAs, we’ll first start but adding a subfolder with in _includes called cta. Within the new cta folder, we’ll create a file called order-pizza.html. We created a folder called cta to namespace all CTA related files so that they are all organized together. In the case of CTAs you might have multiple CTAs for different posts. The namespacing will also come into play a little later.
Within the new order-pizza.html file, we’ll have a button that let’s you order pizza.
// _includes/cta/order-pizza.html
<a href="https://superawesomeandtastypizzas.com/order-now">Order Pizza Now!</a>
Next, we’ll edit post.html in the _layouts folder and add in some liquid tags:
// _layouts/post.html
...
</div>
{% if page.cta %}
{% include cta/{{page.cta}}.html %}
{% endif %}
</article>
First we add, the {% if %} and {% endif %} tags to check if the post has a cta key defined in its front matter. You access the post’s cta key by passing page.cta. If the post has the cta key defined, then we’ll want to render the equivalent _includes/cta file. This is where the namespacing comes into play. Depending on the name of the post’s cta value, it will be able to render the correct cta.
Within the if tags we’ll add the {% include %} tag, which looks through the _includes/cta folder and renders a specific file. In this case we’ll be rendering the file but passing in the {{page.cta}} value for the cta key.
Calling your post-specific CTA
Now to call your post-specific CTA in your post, all you have to do is define a key-value pair in your post’s front matter. You do this by adding cta: order-pizza between the pair of triple-dashes.
// _posts/2016-04-20-pepperoni-pizza-is-the-bomb-yo.md
---
layout: post
title: "Pepperoni pizza is the bomb yo!"
date: "2016-04-20 13:47:33 -0400"
cta: order-pizza
---
Now when your post about how bomb pepperoni pizza is rendered, it’ll also have a CTA to order pizza at the bottom of the post.
This is just one example of how Front Matter could be used to make your Jekyll site feel more dynamic. Front Matter could be used to define post images, attribute a post to a specific author, turn on and off commenting, the possibilities are as endless as your imagination.