Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

About Markdown Frontmatter

April 19, 2020 #Markdown

This is one of the essential features you must know if you’re writing your blog in Markdown format.

Frontmattter in Markdown

They live on the top of a Markdown file, must start from line 1 like so:-

---
title: This is a title
date: YYYY-MM-DD
tags: ["tag A", "tag B", "tag C"]
excerpt: description
---

The properties and value written within the triple dashes are called frontmatter.

I’m using Gatsby.js’ markdown setup. You may have notice I didn’t write the values in quotation mark. The Gatsby.js’ setup will convert it to “String” in the background.

If you are using other markdown setup. You might need to write like this:-

---
title: "This is a title"
date: "YYYY-MM-DD"
tags: ["tag A", "tag B", "tag C"]
excerpt: "description"
---

Did you notice the different? You write the value in “String”.

What frontmatter used for?

We use frontmatter to set variables and metadata on Markdown page then output to any page we want.

We could use it to display information on our blog index page:-

blog index page

If you are using any content management system such as Jekyll or Hugo, they have predefined global variables you must follow. You could visit their frontmatter page:-

  1. Jekyll front-matter
  2. Hugo front-matter

YAML or JSON

They both do the same thing but writing format is different. The examples shown above are in JSON format. YAML format will be like so:-

title: "this is title"
date: "2020-01-31"
tags:
- tag A
- tag B
- tag C

Custom variables

If you are setting up a Markdown blog yourself, you could define your own variables name. It’s depend on the package you use. What frontmatter does is convert YAML or JSON you write to an object.

---
custom_variable: "some text"
my_address: "address"
---

If you pass the props as data, you could access it like so:-

<h1>{data.custome_variable}</h1>
<p>{data.my_address}</p>

Some example properties people often use:-

---
title:
date:
excerpt:
author:
slug:
category:
coverImage:
---

A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me