Let's add some markdown content to our blog.
Create a folder in the project's root.
I've named it
notesbecause my blog's name is theRDnotes.
But you can name it
postsor something else.
You can choose to store all markdown files under
And the images can also be stored alongside.
But that's a bit of mess in the 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.
logging in lambda will go under
lambda folder will host the image assets for that post as well other posts participating under
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.
--- title: 'Markdown' description: 'Adding the first markdown content to blog' slug: '/building-a-markdown-blog/markdown' date_created: '2020-07-17' date_modified: '2020-07-17' author: 'RD' published: true show_in_recent: true ---
In GatsbyJs, we'll use
GraphQLto fetch this frontmatter data in our react components
Let's add the following two example markdown files under the notes folder.
--- title: 'My first blog post' description: 'Adding the first markdown content to blog' slug: '/first-post' date_created: '2020-07-17' date_modified: '2020-07-17' author: 'RD' published: true show_in_recent: true --- # Hello World 👋 *Welcome to my brand new blog* - It's my first post here. - This year I want to make writing a habit thus this blog.
--- title: 'My second blog post' description: 'Adding the second markdown content to blog' slug: '/second-post' date_created: '2020-07-17' date_modified: '2020-07-17' author: 'RD' published: true show_in_recent: true --- # Welcome Again! 👋 - I am trying to continue on my resolution so far... - Lets hope for the best 🤞
till next time!
As of now, GatsbyJs doesn't have any idea about the markdown files we added above.
In the next part, we will configure GatsbyJs to find and process these files into static HTML content.
This GitHub commit represents what we've done in this post 🤩
If you think this is helpful 🎈
Don't keep it to yourself 🙊
Share it with your lovely followers at twitter 🗽