This blog is powered by a simple yet powerful stack. Let me walk you through how it all fits together.

The Stack

  1. Next.js 15 with the App Router for routing and server-side rendering
  2. Base UI (@base-ui/react) for accessible, unstyled components
  3. gray-matter for parsing YAML frontmatter from markdown files
  4. remark for converting markdown content into HTML

How It Works

Each blog post is a .md file in the posts/ directory. The file name becomes the URL slug. For example, getting-started.md maps to /blog/getting-started.

At the top of each file, YAML frontmatter defines metadata like the title, date, and excerpt:

---
title: "My Post Title"
date: "2026-01-01"
excerpt: "A short description of the post."
---

The lib/posts.ts utility reads these files, parses the frontmatter with gray-matter, and converts the markdown body to HTML using remark.

Adding a New Post

To add a new post, simply create a new .md file in the posts/ directory with the appropriate frontmatter. The homepage will automatically pick it up and display it in the list.