Building a Blog with MDX

MDX lets you write JSX directly in your Markdown files. It's the perfect format for a developer blog — you get the simplicity of Markdown with the power of React components.

Why MDX?#

There are several options for blog content:

• Plain Markdown — simple but limited
• CMS (Contentful, Sanity) — powerful but adds complexity
• MDX — best of both worlds for developer blogs

The Stack#

Here's what powers this blog:

const stack = {
  framework: "Next.js 15",
  content: "MDX with gray-matter",
  styling: "Tailwind CSS",
  syntax: "Shiki via rehype-pretty-code",
  deployment: "Vercel",
};

Setting Up MDX Parsing#

The key packages are:

1. next-mdx-remote — compiles MDX in Server Components
2. gray-matter — extracts YAML frontmatter
3. remark-gfm — adds GitHub-flavored Markdown support
4. rehype-pretty-code — syntax highlighting with Shiki

Frontmatter Example#

Each post starts with YAML frontmatter:

---
title: "My Post Title"
date: "2026-03-17"
slug: "my-post-title"
tags: ["example"]
excerpt: "A short description of the post."
---

What's Next#

In upcoming posts, I'll cover:

• Custom MDX components for interactive examples
• Building a tag-based filtering system
• Adding search functionality
• Optimizing images in MDX content

"Write the content, let the tools handle the rest."

Thanks for reading — and welcome to the blog!