theRDnotes

2020 February 12th

Part3: Markdown

Let's add some example markdown content to our blog.

Create a folder in the project's root.

mkdir notes

I've named it notes because my blog's name is theRDnotes. But you can name it posts or something else.

Directory structure

You can choose to store all markdown files under notes folder.
And the images can also be stored alongside.

But that's a bit of mess in future when your blog will host like 1000s of articles.

In my case, the website will be hosting notes on different technical topics.
So having nested folders felt a good option to start with.

Example:
Notes on logging in lambda will go under aws/lambda/logging-in-lambda.md
and the lambda folder will host the image assets for that post as well other posts participating under lambda folder.

Frontmatter

Frontmatter is the additional data that is relevant to your post.
You can specify this data as key-value pairs at the beginning of the file separated by three dashes at the start and end of the block.

Example:

---
title: 'My first blog post'
author: 'RD'
description: 'Markdown | Build a markdown blog with gatsby'
date_created: '2020-02-12'
date_modified: '2020-02-12'
published: true
---

In gatsby, we'll use GraphQL to fetch this frontmatter data in our react components

Add content

Let's add the following two example markdown files under the notes folder.

  • notes/first-post.md
---
title: 'My first blog post'
author: 'RD'
description: 'Its my first blog post.'
date_created: '2020-02-12'
date_modified: '2020-02-12'
published: true
---

<h1>Hello World</h1>

Welcome to my brand new blog's first post.

This year I want to make writing a habbit thus this blog.
  • notes/second-post.md
---
title: 'My second blog post'
author: 'RD'
description: 'Yes! second post'
date_created: '2020-02-12'
date_modified: '2020-02-12'
published: true
---

<h1>Welcome again</h1>

I am trying to continue on my resolution so far...  

Lets hope for the best.  

Till next time!

As of now, Gatsby doesn't have any idea about the markdown files we added above.

In the next part, we will configure Gatsby to find and process these files into static HTML content.