Hello World: Building This Blog with Next.js and Markdown
A look at how I built a markdown-powered blog into my Next.js portfolio site using gray-matter, remark, and rehype.
Hello, World!
Welcome to my blog! I've been meaning to start writing about the things I build and learn, and I finally got around to adding a blog to my portfolio site. Here's a quick look at how it works under the hood.
The Stack
This blog is built with a straightforward approach:
- Markdown files with YAML frontmatter for content
- gray-matter to parse frontmatter metadata
- unified/remark/rehype to transform markdown into styled HTML
- rehype-pretty-code with Shiki for syntax highlighting
No CMS, no database — just .md files in a content/blog/ directory that get statically rendered at build time.
How It Works
Each blog post is a markdown file with frontmatter at the top:
---
title: "My Post Title"
date: "2025-02-13"
description: "A short description for SEO and previews."
tags: ["Next.js", "React"]
---At build time, Next.js reads these files, parses the frontmatter, converts the markdown to HTML, and generates static pages for each post. No server required.
Code Example
Here's a simplified version of how a post gets loaded:
import matter from "gray-matter";
import { readFileSync } from "fs";
function getPostBySlug(slug: string) {
const file = readFileSync(`content/blog/${slug}.md`, "utf-8");
const { data, content } = matter(file);
return {
slug,
title: data.title,
date: data.date,
description: data.description,
tags: data.tags ?? [],
content,
};
}What's Next
I plan to write about:
- AI and machine learning — practical applications and lessons learned
- Web development — patterns, tools, and frameworks I find useful
- Building products — the intersection of technology and strategy
The best way to learn something is to teach it. Writing forces clarity of thought.
Thanks for reading — more posts coming soon!