today I'm going to teach you how to build a simple markdown blog in just four simple step I noticed that markdown blogs are getting popular as they are easy to maintain flexible and very cheap literally you can build a Blog for free without any compromising in SEO or performance if you are new to my channel hello and welcome I make content around tech software coding and life wisdom and games if you love any of these subscribe to my YouTube channel in blog what we do is write a blog post in mark
down file and place that file in website storage or folder your website will automatically fet all markdown files from storage or folder and convert it into HTML page for website this is how any markdown blog work these are basic fundamentals and you can get creative and make it more suitable for your needs now let's build a markdown block using nextjs step one create a nextjs project and add three important dependency using npm install Mark do is JavaScript library for converting a markdown fil
e into HTML front matter is useful for getting metadata from markdown file metadata is written at the top of file in between three parallel lines HML react parer is important for converting string into HTML basically passing HTML code which is in string format step number two write a dummy markdown file for your blog create a folder in your app directory and name it blog post this folder will contain all your blog post markdown file for development purpose we will create a few dummy files with a
ll dmy content add lism text as a block content we also need to mention metadata like title category thumbnail Etc we can add metadata on top of the file in between three parallel lines we will mention all essential basic details like title thumbnail short description tags category Etc if you wish you can add more according to your requirements remember that this is your front matter which will be rendered by front matter Library this front matter metadata won't be rendered as markdown content b
ut anything you write below this three-h line will be taken as main content for blog step three create a blog engine file we have dummy blog post but we need to organize and render it into website to simplify mechanism I recommend to create a separate Javascript file to handle logic of fetching and rendering markdown file we will name it blog engine. JS file inside this file there are four functions out of which only three are exported as modules get all poost file function will fetch all the ma
rkdown file from your block post folder and return the name of all files in form of an error get HTML function will render an markdown file into an HTML string using Mark do and return a string which will contain HTML code this function has input M file which is a markdown file you will notice that I have used red file function to G get the content of the file in simple text format once we get the file content in string format then we will convert it into HTML code using Mark do and finally HTML
code is written as a string get metadata function will take in markdown file as an input as usual we will use read file function to get file content in string format here we will be using front matter to get metadata of markdown file which previously we have mentioned at the title thumbnail and description at top of the mark down file this is the metadata which we will be getting here using front matter and at the end we will be returning a Json object so all the metadata is in form of Json obj
ect which is easy to manage read file function is just simple function to read file from given file name and return return a content of the file in string format now our blog engine. JS file is completed and ready to import anywhere in website wherever it is needed step number four now we will be creating web page to display blog post to keep it simple I will be creating only two pages one homepage and one page to display block content let's create a homepage first which will display all the blo
g post along with thumbnail in small card format inside app folder open page.js file first we will import necessary functions from blog engine. JS file create a constant name post file and use the function get all post file to get all the markdown file as an error list which will be stored in post file constant now we have to get metadata from all this file and create HTML card component which will display thumbnail title short description from the metadata we will pass the metadata as a react p
rops or properties then we will add this card element into post list HTML error list here at the bottom of file I have created a react component of postcard which will take in input as props and inside this function we are using it to get value of title description thumbnail and URL now here at return function we will add post list HTML variable which will display all block Post in a homepage our homepage is ready if you open it in web browser you can see all block post with its title thumbnail
and description now we have to create a page to display entire blog article content we are using nextjs so we will create create a dynamic route in app folder and open page.js file we will import all the important functions from blog engine. JS file in next JS we generate Dynamic web pages using generate static params functions and use the generate metadata function to create metadata of web page which is essential for SEO in generate static param functions we will fetch all the files and use th
eir file name as URL we will return return an era list which will contain all urls of block post in generate metadata function we will receive input that is param object which contain URL slug which web browser has requested to view we will pass the URL stru to get metadata function to get the metadata and return return an object with all the data arranged in proper format required by nextjs below it we have block post page function which will render our HTML page and we have input params which
will contain URL slug we will use the URL slug to get the HTML code in string format along along with metadata in return section we will pass the HTML string using the HTML react parcel Library this will create HTML code to display on web page apart from this we will use metadata object to display various other informations like tags title thumbnail images Etc now our blog post page is ready you can open web browser and view the website here is our homepage and after clicking on post you can ope
n blog article page this is very basics for creating markdown blog and you will notice that I have only created two basic and simple Pages because I want you to get creative and use your own logic to build blog either way the concept Remains the Same the source code of this is available in description of video feel free to check it out and always remember that coding is all about creativity with that said have a nice day and bye-bye
Comments