KrittIT Blog Setup Part 3
Previously
We configured the site-settings-and-info.js file. Your blog should really be taking shape now. All that is missing are blog posts.
Your First Blog Post
In this section we'll go through putting together your first blog post. Going over the directory structure, how to format your .md file, as well as how to use images within your post
Directory and File Structure
First you will create a directory that will ultimately go in your public folder. The name of the directory need to be in all lowercase without any spaces or special characters.
Example
Post name - KrittIT Blog Setup Part 3 :: directory name - krittit-blog-setup-3
Within that directory you need to create a .md file with exactly the same name.
krittit-blog-setup-3.md
.md File Header
At the top of your md file will be a header that contains all the needed information for the blog post to work. After we are done it should look like this.
--- title: KrittIT Blog Setup Part 3 image: krittit-blog-setup-3.png date: 2022-3-26 filterKeys: NextJS, JavaScript, React excerpt: In this part we will go through creating your first blog post. series: KrittIT Blog Setup numberInSeries: 3 ---
The tree dashes (---) must be before and after the header information.
title: The title of your blog post that will be displayed in the preview as well as the top of the blog post.
image: This is the image that will be displayed in the preview. It must be inside your blog post's directory.
date: The date of the blog post in YYY-MM-DD format.
filterKeys: Words that are seperated by a coma and space. They should correspond to the filter keys you set in the site-settings-and-info.js file.
excerpt: And excerpt or a short description from your blog post that will be displayed in the preview.
All the above are required fields. All except filter keys requires a value. The ones below are optional and will only work if you set series to true in the site-settings-and-info.js file.
series: The name of the series this posts belongs to. This will be shown on the series page and have all posts with its name inside it.
numberInSeries: The number this post is within the above series. The series must start at 1 and increment by 1.
And again close off the header with three dashes (---).
Your Blog Post
After your header you will put the content of your blog post in Markdown format. If you are unfamiliar with Markdown I recommend going to this link to see how to properly format your post in the way you want.
Images
Images inside your post must either be inside the same directory as your blog post or on another website.
Example
 
Code
The default supported code formats are as follows.
- PHP as php
- JavaScript as js
- Markdown as md
- Java as java
- CSS as css
- Shell as shell
I will go over how to add more code styles in a later post. The code snippet must have three backticks(```) above and bellow. After the top three backticks you will specify the code style as shown bellow.
```js console.log(x); ```