Front Matter and Page Variables

Front matter is the bridge between a content file and Jekyll's page data.

The official Jekyll tutorial uses YAML between two --- lines at the top of a file.

Add front matter

Update about.md:

---
title: About Me
description: A short introduction to my work and interests.
featured: true
---

# About Me

I build things because I want to understand how they work.

During processing, custom front-matter values become available through the page variable.

For example:

{{ page.title }}

can output:

About Me

Front matter also marks a file for processing

Jekyll's variable documentation explains that files with front matter are subject to processing.

Even empty front matter can matter:

---
---

That tells Jekyll to process the file even when you have not declared custom values.

Guided experiment

Put this in a processed file:

<h1>{{ page.title }}</h1>
<p>{{ page.description }}</p>

Build.

Inspect generated HTML.

Then rename one key in front matter:

description_typo: Something else

Predict what happens to:

{{ page.description }}

Run the build and compare.

This is an important failure type: valid syntax, wrong data key.

Jekyll may build successfully while your output is incomplete.

Metadata should have purpose

Do not create forty front-matter fields because YAML feels powerful.

Good metadata supports a template or content decision.

Examples:

• page title;
• short description;
• project technologies;
• featured state;
• image path;
• publication/status value.

Portfolio action

Move page-specific information into front matter where it makes sense.

Then reference at least two values from the page source or later layout.

Checkpoint

For one page, document:

Front-matter key:
Value:
Liquid reference:
Generated result:
What would happen if the key were missing: