Step by Step Tutorial

3. Front Matter

Front matter is a snippet of YAML placed between two triple-dashed lines at the start of a file.

You can use front matter to set variables for the page:

---
my_number: 5
---

You can call front matter variables in Liquid using the page variable. For example, to output the value of the my_number variable above:

{{ page.my_number }}

Use front matter

Change the <title> on your site to use front matter:

---
title: Home
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

You must include front matter on the page for Jekyll to process any Liquid tags on it.

To make Jekyll process a page without defining variables in the front matter, use:

---
---

Next, you’ll learn more about layouts and why your pages use more source code than plain HTML.

  1. Setup
  2. Liquid
  3. Front Matter
  4. Layouts
  5. Includes
  6. Data Files
  7. Assets
  8. Blogging
  9. Collections
  10. Deployment