Lesson 4: Front matter basics

Learn about what Front Matter is, why it’s useful and how we can use it to super-charge our site’s content.

Front Matter is like metadata for your page or template. It’s generally powered by YAML that, when added between a set of ---, lets you add extra content to a markdown file, template, or pretty much anything in Eleventy contexts.

YAML is human readable, structured data that’s normally used in configuration files. It’s been used by SSGs for metadata for a long time because it’s generally a pretty-darn simple way for people to manage content.

In this lesson, we’re going to dip our toes into the Front Matter water.

Adding Front Matter to our home page permalink

Open up eleventy-from-scratch/src/index.md in your text editor and take a look at what we’ve got:

Code language
Diff - don’t copy
---
title: 'Hello, world'
layout: 'layouts/home.html'
---

This is pretty _rad_, right?

Our existing Front Matter contains a title and layout key. If we were to convert this YAML into JSON, it would look like this:

Code language
Diff - don’t copy
{
"title": "Hello, world",
"layout": "layouts/home.html"
}

Let’s add some more Front Matter to this file. With index.md still open, add the following after the line that contains layout:

Code language
text
intro:
eyebrow: 'Digital Marketing is our'
main: 'Bread & Butter'
summary: 'Let us help you create the perfect campaign with our multi-faceted team of talented creatives.'
buttonText: 'See our work'
buttonUrl: '/work'
image: '/images/bg/toast.jpg'
imageAlt: 'Buttered toasted white bread'

Your index.md file should look like this now:

Code language
Diff - don’t copy
---
title: 'Hello, world'
layout: 'layouts/home.html'
intro:
eyebrow: 'Digital Marketing is our'
main: 'Bread & Butter'
summary: 'Let us help you create the perfect campaign with our multi-faceted team of talented creatives.'
buttonText: 'See our work'
buttonUrl: '/work'
image: '/images/bg/toast.jpg'
imageAlt: 'Buttered toasted white bread'
---

What’s all of this indenting business about? What we’re doing here is adding properties inside an intro. To do that in YAML, we indent items, instead of wrapping them in brackets like we do with JSON.

Let’s see how this looks as JSON again:

Code language
Diff - don’t copy
{
"title": "Hello, world",
"layout": "layouts/home.html",
"intro": {
"eyebrow": "Digital Marketing is our",
"main": "Bread & Butter",
"summary": "Let us help you create the perfect campaign with our multi-faceted team of talented creatives.",
"buttonText": "See our work",
"buttonUrl": "/work",
"image": "/images/bg/toast.jpg",
"imageAlt": "Buttered toasted white bread"
}
}

Hopefully the JSON example makes that relationship make a bit more sense. What will help even more is putting it into practice, so let’s first add some Front Matter to our home page.

Open eleventy-from-scratch/src/_includes/layouts/home.html and replace the existing <article> element with this one:

Code language
HTML
<article class="intro">
<div class="[ intro__header ] [ radius frame ]">
<h1 class="[ intro__heading ] [ weight-normal text-400 md:text-600 ]">
{{ intro.eyebrow }}
<em class="text-800 md:text-900 lg:text-major weight-bold">{{ intro.main }}</em>
</h1>
</div>
<div class="[ intro__content ] [ flow ]">
<p class="intro__summary">{{ intro.summary }}</p>
<a href="{{ intro.buttonUrl }}" class="button">{{ intro.buttonText }}</a>
</div>
<div class="[ intro__media ] [ radius dot-shadow ]">
<img
class="[ intro__image ] [ radius ]"
src="{{ intro.image }}"
alt="{{ intro.imageAlt }}"
/>

</div>
</article>

What we have here is our page intro. It’s pre-wired up with class attributes ready for when we add some CSS later. But for now, let’s focus on those {{ }} sections.

Remember how our new content was indented under intro? This now gives us a handy shortcut for our templates. For example: if we want to read the summary, we use {{ intro.summary }}.

Wrapping up permalink

As your Front Matter gets larger and more complex, indenting and structuring the content becomes more and more useful. We’re going to get into even more detail with that as the course progresses.

For now though, I hope you understand a bit more about Front Matter. Let’s move on and get that image working!