What is Front Matter and How is it Used to Create Dynamic Webpages
One of the biggest mental shifts that comes with learning to code is the idea of automation over manual effort. Whether it’s our education system or too much Excel, we are largely conditioned to do things the hard and repetitive way without ever questioning if an easier way exists.
This approach to any task extends to building websites for items such as marketplace product pages and blogs. The natural reaction for populating either medium is to create a template page and then add hardcoded copies of each page as new blog posts or products are created.
Approaching websites this way is not only labor inefficient, but also impossible to scale. If Twitter had to hand build a new page every time a user submitted a Tweet, their support staff would have to number in the hundreds of thousands. Luckily this is not how websites work.
Instead of manually creating copies of each page with new content, modern websites work through a union of flexible page templates and structured data that convey specific meaning to the template.
This union is static as the template is merely a guide of how to display the data, but the data can vary in how it’s formed and sent. Many people are familiar with API requests in which a resource is retrieved from a server. However, less known is the idea of server side rendered pages that store the data content on the server hosting the site and build the full page on request instead of having a page request and a separate data request.
Today I would like to look at server side generated content, specifically content created with markdown, and talk about its components including front matter.
What is Markdown?
Markdown is a plain text file format that allows users to create plain text copy for internet use. It is a way to structure plain text documents with context that allows it to be converted directly to HTML without having to include HTML tags.
This method of structuring text without HTML tags is pervasive and included in many editors you use everyday including Facebook and Slack. Below is an example of HTML and the markdown plain text equivalent:
Why would we want to use markdown? First, it converts directly and easily to HTML. If you are writing valid markdown then you are writing valid HTML. Second, it is a steady technology and is not likely to become outdated soon. While the new JavaScript framework of the month may not last through your next release, markdown is based on plain text so as long as we are using plaint text in our programs, you should have complete interoperability.
A final reason to use markdown is that it doesn’t require special editors or environments. You can just as easily write a markdown file in your VS Code editor as you can by opening TextEdit and jotting your notes in a basic text file with an “.md” extension.
What are the parts of a Markdown File?
There are two main parts of a Markdown File: the front matter and the content. The content part is similar to what it sounds like, so for now we’ll focus on what front matter is and how it lends itself to populating modern webpages.
As with many new tech terms, the term front matter is borrowed from another domain; books. In the literary world, front matter refers to the information found in the first pages of a book. This could be the title page and include the book’s title and author, it could be the table of contents with an outline of all the sections and chapters, it could even include dry information such as the publisher’s name and address, ISBN, date of publication, copyright information, etc.
Front matter in literary terms is the collection of information stored at the beginning of books that explains what the book is and how it was produced. For programming front matter refers to the section of a markdown file that gives context to the content of the file (though the concept is not specific to markdown and can be applied to other file types including yaml, toml and json as well).
This data allows us to do a wide range of actions with the file including creating dynamic routing for where the composed template is placed, access a title and cover photo, create preview cards and even sort collections based on creation dates.
Front matter allows us to access all of the context of a file, without having to rely solely on file attributes or parsing the file itself. Because front matter has special syntax to separate it from the content of the markdown file, we never need to worry about incorrectly parsing it.
The other section of a markdown file is the content section. I won’t go too much into this beyond saying that the content section is simply valid markdown. This is where you put your actual record content whether it be a formatted blog post or some information for a product page.
How to Use Front Matter in NextJS
We’ve established that markdown is a great file format to create HTML for web pages, but where does front matter come in? If you’ve used a front end framework like NextJS or Gatsby, you know that along with creating the resource page, it is necessary to create connecting links and components that draw traffic to that resource page (resource page being a blog post or product page).
If we are making blog post previews then we may want to create a card that catches the readers eye. This card could include things like the title, author, cover photo, date, a url path to the resource and an excerpt from the article. We want to display all of this, but don’t want to have to deal with the full article, especially if we are showing 10 or more of these preview cards. That quickly becomes an unmanageable amount of data.
Here is where front matter shines. By having the markdown file contain two sections, one front matter and one content, we can quickly retrieve and parse the part of the document we need for our content cards, without dealing with the entire file. With a framework like NextJS this is especially important as we need a relative url from the front matter to make sure we display the correct path for our dynamic “blog-posts” page.
Pairing markdown with NextJS allows content creators to effortlessly upload markdown files and reuse beautiful templates without any extra lift.
Final Thoughts
The programming world borrows and reshapes so many terms from the physical world. Sometimes it is just as good a method to search a term in the dictionary as it trying to find a good blog post explaining the tech term. I hope that this article helped you understand what front matter is as well as how you may use it in your front end applications.
Notes
https://www.ultraedit.com/company/blog/community/what-is-markdown-why-use-it.html
