MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Frontmatter & Metadata for Static Sites0%
Frontmatter & Metadata for Static Sites
Beginner12 min read•Updated: Jul 11, 2026
While Markdown excels at formatting readable document text, modern web publishing platforms (like Next.js, Astro, Jekyll, Hugo, and Docusaurus) also require structured data—such as post titles, publication dates, SEO meta descriptions, authors, and tag categories.
Frontmatter is a standardized block of metadata placed at the very top of a Markdown file, cleanly separated from the body text.
Click to Zoom1. YAML Frontmatter Syntax
The most popular format is YAML Frontmatter, enclosed between two lines of triple hyphens (---):
---
title: "Mastering TypeScript Generics in 2026"
description: "A comprehensive guide to building reusable, type-safe data structures with generics."
date: 2026-09-13
author: "Er. Sumit Kumar"
tags: ["typescript", "programming", "web-dev"]
featured: true
readingTime: 6
---
# Mastering TypeScript Generics in 2026
Generics allow developers to create components that work over a variety of types...
2. How Parsers Extract Frontmatter
When a static site generator (or a library like gray-matter) processes a Markdown file:
- 1It reads the top block between the
---fences. - 2It parses the YAML into a standard JavaScript object:
{
data: {
title: "Mastering TypeScript Generics in 2026",
date: "2026-09-13",
tags: ["typescript", "programming"],
featured: true
},
content: "# Mastering TypeScript Generics in 2026
Generics allow..."
}
- 1The metadata (
data) is used to populate page<title>, OpenGraph preview cards, and blog listing filters, while the body text (content) is rendered as HTML!
3. Frontmatter Formats (YAML vs JSON vs TOML)
While YAML is used by 95% of developers, other formats are supported:
| Format | Opening / Closing Delimiter | Syntax Example |
|---|---|---|
| YAML | --- | title: "My Post" |
| TOML | +++ | title = "My Post" (Common in Hugo) |
| JSON | ;;; or --- | { "title": "My Post" } |
Interactive Quiz
Multiple Choice Questions
Question 1
What delimiter lines enclose YAML frontmatter at the very top of a Markdown file?
Question 2
Which popular Node.js library is widely used to parse frontmatter and content from Markdown files?
Question 3
What happens to the frontmatter block when the Markdown is rendered to HTML in the browser?
Question 4
Which alternative frontmatter delimiter is used by the Hugo static site generator for TOML metadata?
Question 5
How are array values (such as blog tags) represented in YAML frontmatter?
Next Lesson
Markdown in Modern SSGs & MDX (Astro, Next.js)
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Issue & Pull Request Templates in GitHub | Markdown in Modern SSGs & MDX (Astro, Next.js) |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.