Back to blog

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.

Next.jsMarkdownWeb Development

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:

  1. AI and machine learning — practical applications and lessons learned
  2. Web development — patterns, tools, and frameworks I find useful
  3. 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!