2020 February 12th
Let's add some example 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 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: '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
Let's add the following two example markdown files under the notes folder.
--- 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.
--- 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.
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.