I've upgraded my blog with MDX support and added a TOC and a tag system.
Table of Contents
New: TOC
I added a simple table of contents feature.
If a post contains a ## Table of Contents heading, the TOC will be generated automatically.
Setup was super easy, and MDX made it straightforward to integrate remark and rehype plugins:
- remark-toc builds the list from headings
- rehype-slug adds
idattributes so the links work
In short, remark handles Markdown, and rehype handles the resulting HTML.
New: Tags
I also added a minimal tag system so readers can browse related posts easily. It's all file-based, no database and very few dependencies.
The tags are defined in the frontmatter of each post and parsed with gray-matter, a small library for extracting frontmatter data from Markdown files.
For example:
---
title: My Post
date: 2025-09-09
tags: [blog, nextjs]
---Why MDX?
The first version of my blog used standard markdown which worked fine, but I wanted to try something new.
MDX is Markdown + JSX and it's getting popular in tech docs and blogs.
It enables writers to embed React components directly within posts. In short, it lets you create rich, clear, and readable content easily if you know React.
Why not Nextra?
I started with Nextra, a Next.js & MDX framework for building content-focused sites.
I like the built-in features, but customization often leads to messy “glue” code. On top of that, I kept bouncing between the Next.js and Nextra docs. Maybe I just don't fully understand Nextra yet, but I figured I should learn Next.js better first. So I switched to plain MDX with keeping a small, maintainable codebase.
Interactive Demo
With MDX, I can easily embed interactive components:
Give it a click! 👆
What's Next?
The blog setup is solid now, so I'm going to focus on adding posts. I'm also planning to refine the UI a bit more.