Jekyll Front Matter

Jekyll uses “front matter” to assign properties to the Markdown files on your site. The Jekyll documentation says that front matter is actually YAML. Jekyll sites must contain front matter at the top of the file. Front matter is contained in a block set off by the hyphens on their own line. The front matter for this page as I create it right now looks like this:

---
ADD FRONT MATTER LATER
---

Without front matter, the Jekyll will not recognize the file as a Jekyll page or post to build so it won’t function as part of your site. Anything without front matter won’t be structured or styled like the rest of your site, it won’t be included in categories or menus, and just will not function as part of the website.

If you have been following along, you created a Contact Me page in Build Content for Your First Jekyll Site. But that page is not going to display in any site menus or any site navigation at all until you add Jekyll front matter.

Open contact.md.
Use the Enter key to create several lines of white space at the top of the file.
On line 1, type three hyphens: ---.
On line 2, type layout: page.
On line 3, enter a page title: title: Contact Me.
On line 4, enter in another three hyphens: ---.
Save the file.
Run bundle exec jekyll serve again.
When you reload the page, the Contact page appears in the left sidebar and you can click on it to open the page.

Here’s what contact.md looks like with the update:

---
layout: page
title: Contact Me
---

# Contact Me

You can email me at [email@email.com](mailto:email@email.com).

I promise I will receive the email and get back to you.

To make Jekyll process a page without defining variables in the front matter, add the two lines of three hyphens each at the top of your page:

---
---

Next we will use Jekyll front matter to perform some Cleanup and Site and File Organization.