One of Jekyll’s key features is front matter, a set of metadata placed at the top of a markdown or HTML file. It controls various aspects of your site’s pages and posts, making your site more dynamic. If you’re new to Jekyll or want to master front matter, this guide will cover everything you need to know.

What Is Front Matter?

Front matter is YAML-formatted metadata enclosed by triple dashes (—). It appears at the beginning of a file and allows Jekyll to process content dynamically. Here’s a basic example:

---
title: "My First Jekyll Post"
author: "Annie"
date: 2025-04-16
layout: post
categories: ["jekyll", "Tutorial"]
tags: ["front matter", "jekyll", "guide"]
---

Why Is Front Matter Important?

Front matter plays a vital role in Jekyll by providing metadata that controls various aspects of how content is structured, displayed, and processed.
Here’s why it’s so useful:

Essential Front Matter Fields

Below are five commonly used fields, along with explanations of how they impact your site.

1. Basic Metadata

What It Does: This sets fundamental properties of a page or post.

---
title: "Understanding Front Matter"
date: 2025-04-16
author: "Annie"
layout: post
permalink: /front-matter-guide/
---

2. Categories and Tags

What It Does: These fields classify posts for better navigation and filtering.

---
categories: ["tutorial", "jekyll"]
tags: ["front matter", "metadata", "guide"]
---

3. Custom Variables

What It Does: Custom variables provide additional metadata for templates to use dynamically.

---
featured: true
image: /assets/img/front-matter.jpg
summary: "An in-depth look at Jekyll's front matter and its capabilities."
---

Templates access these variables via Liquid, making content more dynamic.

4. Excluding Pages

What It Does: By setting published to false, you can prevent a page or post from appearing when the site is built.

---
published: false
---

This is useful for draft articles that aren’t ready for publication. It also ensures certain pages remain hidden without needing manual deletion. This is particularly beneficial for sites with ongoing content updates.

5. Using Collections

What It Does: Collections allow grouping of non-post pages into structured sets.

---
collection: projects
order: 1
---

Collection assigns a page to a specific custom group (projects, portfolio, etc.). Setting an order helps define sequencing when listing items dynamically. This is useful for organizing portfolios, documentation, and project showcases.

Advanced Front Matter Techniques

Front matter can also be used to create dynamic content, automate workflows, and structure websites efficiently. Here’s an in-depth look at some advanced techniques.

1. Dynamic Variables in Layouts

Once front matter variables are set, they can be accessed directly within Jekyll’s Liquid templates. This allows layouts to dynamically adapt based on page-specific settings.

Example: Displaying Metadata in a Post

<h1>{{ page.title }}</h1>
<p>Written by {{ page.author }} on {{ page.date | date: "%B %d, %Y" }}</p>

What happens here:

This approach ensures that each page uses its own metadata without manually inserting values.

2. Conditional Rendering

Front matter can be used to conditionally show or hide elements in templates. This is useful for highlighting featured posts, creating customized sections, or even hiding unpublished content.

Example: Display Featured Articles

{% if page.featured %}
  <div class="featured">
    <h2>Featured: {{ page.title }}</h2>
  </div>
{% endif %}

What happens here:

Conditional rendering ensures pages behave dynamically without manual intervention.

3. Default Values in _config.yml

Instead of manually defining front matter for every post, Jekyll allows default values to be set in _config.yml. This is helpful for consistency across pages and reducing repetitive code.

Example: Setting Default Author and Layout

defaults:
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      author: "Annie"

Every post automatically gets the post layout unless overridden. In this example, the default author is Annie, but it can be changed in individual posts. Defaults simplify management and help maintain a structured site.

4. Using Front Matter to Generate Navigation Menus

Front matter can be leveraged to build dynamic navigation menus based on page metadata.

Example: Defining Navigation Items

In front matter, define page title and navigation order as nav_order.

---
title: "About Us"
nav_order: 2
---

Then, in a template:

{% assign sorted_pages = site.pages | sort: "nav_order" %}
<ul>
  {% for page in sorted_pages %}
    <li><a href="{{ page.url }}">{{ page.title }}</a></li>
  {% endfor %}
</ul>

What happens here:

This technique allows structured navigation without manually editing menu lists.

5. Creating Structured Collections

Jekyll supports collections, which are useful for organizing non-blog content, such as portfolios, case studies, or documentation.

Example: Using Collections in Front Matter

---
collection: projects
order: 1
---

The collection field assigns a page to a custom content set. The order field defines sorting inside the collection. Collections provide structured ways to manage non-post content dynamically.

6. Managing SEO with Front Matter

Front matter fields can also be used for improving SEO by setting metadata like descriptions and canonical URLs.

Example: SEO-Friendly Metadata

---
title: "Mastering Jekyll's Front Matter"
description: "A complete guide to Jekyll's front matter with examples and techniques."
canonical_url: "https://example.com/jekyll-front-matter-guide"
---

The description field improves search engine previews, while the canonical_url field prevents duplicate content issues. These fields ensure better visibility and proper indexing in search engines.

In Closing

Front matter is an essential feature in Jekyll, allowing users to structure and control content dynamically. By mastering front matter, you can create well-organized, functional static sites with ease.

See you