Go home

Understanding GatsbyJS frontmatter

April 11, 2019

It’s 9:00am, and I’m listening to Justin Brown’s NYEUSI, while writing this blogpost in Atom, and googling around for what exactly frontmatter is.

What is this chunk?

---
title: Understanding GatsbyJS frontmatter
date: "2019-04-11T13:09:36.236Z"
description:
tags: [code, frontmatter, blog, gatsby, yaml]
---

Currently, all my blogposts, which are .md files, begin with the above code chunk. I have a vague understanding that it is frontmatter, but, “what is that exactly?”, is my question.

First stop, Jekyll

I googled “frontmatter”, and the first result was the Jekyll docs. There was this description:

Any file that contains a YAML front matter block will be processed by Jekyll as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines

…followed by an example, pretty much identical to the block above. So it’s some YAML, at the top of a file.

Cool, but what is YAML?

YAML: YAML Ain’t Markup Language

What It Is: YAML is a human friendly data serialization standard for all programming languages.

I guess I’ll just leave it at that.

Does Gatsby use Jekyll?

Jekyll is a Ruby gem and Gatsby is a JavaScript framework, so No, Gatsby doesn’t not use Jekyll.

How does Gatsby handle frontmatter?

At this point, I’m in the Gatsby docs for gatsby-transform-remark, which is their plugin for parsing Markdown files.

Here are my key takeaways:

  • Gatsby uses Remark for parsing markdown
  • Gatsby uses gray-matter for parsing markdown frontmatter
  • All frontmatter fields are converted into GraphQL fields.

I’m not sure what other questions I have yet, so I’ll take a break here.

I did just discover that you can pass an entire HTML element (ex. <img/>) as the value for a frontmatter field, and it gets rendered properly in whatever component that sends a graphql query for that frontmatter data. Need to look into this more…

What’s next?

I want to be able to mimic airbnb.io’s RecentBlogPostsSection.jsx layout. All their blog content is hosted on Medium, but there’s a CDN for the medium-images that are displayed on airbnb.io.

Tags: codefrontmatterbloggatsbyyamlgray-matterremarkjavascriptairbnb
Kevin Wang

👋 I'm Kevin Wang. Jazz GuitaristBaristaReceptionist Front End Engineer
This is my ever growing sandbox of sorts⛱.

Discussion