This was one of the first pro­gram­ming tu­to­ri­als ever writ­ten by me. I would­n’t ad­vise you to read it, the only rea­son I haven’t deleted it is be­cause it’s very nos­tal­gic.

This ar­ti­cle was ini­tially pub­lished on DEV.to, and ever since I wrote that ar­ti­cle a lot of stuff has changed.

I have a lot of blogs. Yep, and the thing is I like all of em. And each one uses a frame­work like Gatsby or a tem­plat­ing en­gine like Nunjucks. But it is cool to have your blog within your web­site. Now, my web­site is built us­ing Express and Express alone [used to be: now my web­site uses Vue]. I don’t use any tem­plat­ing en­gines, it’s just Express routes with HTML files. Having a blog within your web­site (all-in-one-pack) is so awe­some. In this post, I’ll be show­ing you how to cre­ate your own Markdown blog us­ing EJS and Express!

mkdir blog
touch index.ejs
touch blog.ejs

Then, in your main Node.js script file (mine is server.js, most peo­ple have their main script at index.js), we need to con­fig­ure the mark­down parser, EJS and the blog di­rec­tory. For that, we’ll need to in­stall a few pack­ages.

npm i express ejs markdown-it gray-matter body-parser

Once we’ve done that, we need to require all our de­pen­den­cies in server.js (or index.js or what­ever). We’ll also be us­ing the path mod­ule, but we don’t need to in­stall it be­cause it is an in-built mod­ule.

// body parser
const express = require('express');
const app = express();

// if you have a public dir with static scripts and styles

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));

// path for the ejs folder
const path = require("path");

app.set("views", path.join(__dirname, "blog"));
app.set("view engine", "ejs");

// gray-matter to read the .md files better
const matter = require('gray-matter');

Then, we need to de­fine our GET routes for the blog posts.

app.get("/blog/:article", (req, res) => {

// read the markdown file
const file = matter.read(__dirname + '/blog/' + req.params.article + '.md');

// use markdown-it to convert content to HTML
var md = require("markdown-it")();
let content = file.content;
var result = md.render(content);

res.render("index", {
post: result,
title: file.data.title,
description: file.data.description,
image: file.data.image

What is hap­pen­ing here is that when­ever a user vis­its /blog/article, the fs mod­ule looks in the blog di­rec­tory for a .md file named article. (The URL of the blog post is taken from the file name mi­nus the .md part). And the blog post mark­down file should be lo­cated in the blog di­rec­tory we made at first.

Now, for this to work prop­erly, every blog post mark­down file should be in the fol­low­ing for­mat:

title: Title Here
description: A nice description of this post
image: A nice image representing the blog post, mainly meant for the <meta> tags

Blog post content here

The for­mat is the rea­son why I used the gray-matter pack­age. And markdown-it con­verts the Markdown stuff to HTML.

Also, we need a GET route to show all our blog posts (blog.ejs).

app.get("/blog", (req, res) => {
const posts = fs.readdirSync(__dirname + '/blog').filter(file => file.endsWith('.md'));
res.render("blog", {
posts: posts

And fi­nally, for our EJS files.

<div id="blog">
<h1><%= title %></h1>
<p><%= description %></p>
<%- post %>

NOTE: An EJS vari­able named image (<%= image %>) is also avail­able which is the im­age url men­tioned in the blog post mark­down file header.


<div id="blog">
<% for (post of posts) { %>
<a href="/blog/<%= post.slice(0, -3) %>">
<div class="post">
<%= post.toUpperCase() %>
<% } %>

And that’s it!

Of course, this is just a ba­sic tem­plate for you to use, you can al­ways add more HTML and style us­ing CSS to cus­tomize ac­cord­ing to your needs!