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
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?
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…
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.
A blog by Kevin Wang. Jazz Guitarist → Barista → Healthcare Startup Potato → Rock Climber → Front End Engineer