logoAli Tarakzai

Building a Personal Blog with Next.js and Markdown

·2 min read·
nextjsreactwebdev

Having a personal blog is one of the best ways to share knowledge and build your online presence. In this post, I'll walk through how this very blog was built.

The Stack

  • Next.js — React framework with static generation
  • Tailwind CSS — Utility-first CSS framework
  • Markdown — Write posts in plain .md files
  • gray-matter — Parse frontmatter metadata
  • remark / rehype — Markdown to HTML pipeline
  • highlight.js — Syntax highlighting for code blocks

How It Works

Each blog post is a Markdown file in the content/posts/ directory:

content/
  posts/
    my-first-post.md
    another-post.md

Each file has frontmatter at the top:

---
title: "My Post Title"
date: "2026-04-25"
description: "A brief description"
tags: ["tag1", "tag2"]
---

Your content here...

Rendering Pipeline

The markdown goes through a processing pipeline:

  1. gray-matter extracts frontmatter and content
  2. remark-parse parses the markdown AST
  3. remark-gfm adds GitHub Flavored Markdown support
  4. remark-rehype converts to HTML AST
  5. rehype-highlight adds syntax highlighting
  6. rehype-stringify converts to HTML string

Deployment

The blog is deployed on Vercel with automatic deployments on every push to main. Custom domains are configured through the Vercel dashboard.

Writing New Posts

To write a new post:

  1. Create a new .md file in content/posts/
  2. Add frontmatter with title, date, description, and tags
  3. Write your content in Markdown
  4. The blog automatically picks it up — no configuration needed

That's it! Simple, fast, and focused on writing.