Front Matter

By Amr

How to use front matter for Jekyll pages, posts, and collections.

Estimated reading time: 3 minutes

• Share on Reddit
• Share on LinkedIn
• Share on Twitter

• ---

• Page Improvements

• Improve Page Polish content, structure, and presentation of this page
• Expand Page Add depth, examples, and missing sections to this page
• Update Page Refresh outdated content, versions, links, and screenshots
• Fix Page Issue Report a typo, broken link, layout glitch, or content bug
• SEO Optimize Improve discoverability, metadata, and structured data
• Accessibility Audit Audit this page for WCAG 2.1 AA compliance

• ---

• Site Improvements

• UI/UX Improvement Propose a design or UX refinement for the theme
• New Feature Propose a new site-wide feature or capability
• Component Enhancement Improve a Jekyll layout, include, or shared component
• Performance Optimization Improve load time, Core Web Vitals, and asset delivery

Edit on GitHub

Table of Contents

Front Matter

Front matter is YAML metadata at the top of Markdown or HTML files that controls how Jekyll processes the content.

Basic Structure

---
title: "My Page Title"
layout: default
permalink: /my-page/
---

Your content starts here...

Required Fields

For All Pages

---
title: "Page Title"      # Required: Displayed in browser tab and headings
layout: default          # Required: Template to use from _layouts/
---

For Blog Posts

---
title: "Post Title"
layout: journals
date: 2025-01-15         # Required for posts: Publication date
---

Common Optional Fields

SEO & Metadata

---
description: "A brief description for search engines (150-160 chars)"
author: "Your Name"
lastmod: 2025-01-20      # Last modified date
keywords:
  primary: ["keyword1", "keyword2"]
  secondary: ["keyword3"]
---

Organization

---
categories:
    - category1
    - subcategory
tags:
    - tag1
    - tag2
    - tag3
permalink: /custom-url/   # Override default URL
---

Display Options

---
preview: /images/preview.png    # Social sharing image
toc: true                       # Show table of contents
comments: true                  # Enable comments (if configured)
sidebar:
    nav: docs                   # Use 'docs' navigation in sidebar
---

Layout Options

Available layouts in Zer0-Mistakes:

Layout	Purpose
default	Standard page with sidebar
journals	Blog posts with metadata display
home	Homepage layout
collection	Collection index pages
landing	Full-width landing pages

Collection-Specific Fields

Documentation (_docs)

---
difficulty: beginner          # beginner, intermediate, advanced
estimated_reading_time: "10 minutes"
prerequisites:
    - Docker installed
    - Basic Jekyll knowledge
lastmod: 2025-01-15
---

Blog Posts (_posts)

---
excerpt: "Custom excerpt for listings"
preview: /images/post-preview.png
featured: true               # Feature on homepage
---

Navigation Sidebar

Control which navigation appears in the sidebar:

---
sidebar:
    nav: docs      # Uses _data/navigation/docs.yml
---

Available navigation files:

• main - Primary site navigation
• docs - Documentation sidebar
• quickstart - Quick start guide

Examples

Complete Documentation Page

---
title: "Installation Guide"
description: "Step-by-step installation instructions"
layout: default
categories:
    - docs
    - setup
tags:
    - installation
    - docker
permalink: /docs/installation/
difficulty: beginner
estimated_reading_time: "10 minutes"
prerequisites:
    - Docker Desktop
lastmod: 2025-01-15
sidebar:
    nav: docs
---

Complete Blog Post

---
title: "Getting Started with Jekyll"
description: "Learn the basics of Jekyll static site generation"
layout: journals
date: 2025-01-15
lastmod: 2025-01-20
author: "Amr"
categories:
    - tutorials
    - jekyll
tags:
    - jekyll
    - getting-started
preview: /images/jekyll-tutorial.png
comments: true
---

Related

• Jekyll Guide
• Jekyll Configuration
• Liquid Templating

See also

• [[Jekyll]]
• [[Liquid]]
• [[SEO]]
• [[Customization]]