← All notes
buildingNext.jsbehind the scenes

How I created this blog

A look at the small decisions behind this lightweight, MDX-powered personal blog.

•4 min read

I wanted a place to write that felt personal without becoming another project I had to manage. This blog is the result: a small, fast home for notes about software, design, and whatever I am learning at the time.

Starting with a small stack

I built the site with Next.js 15 and React 19 using the App Router. The pages are statically generated, which keeps the reading experience quick and means I do not need a database or a CMS just to publish a note.

Each post is an MDX file in content/posts. Its frontmatter contains the pieces the index needs, such as the title, excerpt, date, and tags. A small server-side helper reads those files, calculates a reading time when one is not provided, and sorts the posts by date.

That workflow is intentionally simple. To publish something new, I can copy the template, write the note, and give the file a URL-friendly name. The filename becomes the route, so a post called my-new-note.mdx is available at /notes/my-new-note.

Why MDX?

The blog started with a small hand-written Markdown renderer, but I wanted the content format to grow with the site. MDX gives me familiar Markdown syntax while leaving room for interactive React components in a post when a note needs more than text, images, or code.

The current renderer compiles each post on the server with @mdx-js/mdx and an explicit React JSX runtime. That keeps the content pipeline small and avoids turning every post into a separately bundled page. Frontmatter is still handled by the blog's filesystem loader, so metadata and article content remain easy to inspect in one file.

Making it feel like mine

The first version was mostly functional, but it felt too much like a starter template. I wanted the landing page to feel more like an editorial notebook than a dashboard, so I focused on a few details:

  • a quiet, dark matcha palette with warm text
  • a simple leaf mark for the blog identity
  • a large introduction followed by a date-led notebook feed
  • readable metadata that does not compete with the title
  • small transitions and responsive spacing instead of heavy visual effects

The design is still deliberately restrained. The writing should be the most interesting thing on the page, while the interface gives it a clear rhythm and enough room to breathe.

Keeping the workflow simple

MDX keeps the content portable and easy to edit. I can write in a plain text file, keep everything in version control, and avoid building an admin interface before I know I need one.

It also gives the blog a useful constraint: every post starts as an idea, not as a form to fill out. The frontmatter is just enough to create a consistent index, while the body can use headings, lists, links, code, and eventually custom components.

A small dev-mode lesson

The production build was straightforward, but development exposed a subtle problem. The first MDX runtime I tried could produce a React component whose development metadata did not match Next's Webpack runtime. The page would compile, then fail with an internal server error when I navigated to a note.

I fixed that by compiling MDX directly with the non-development JSX output instead of relying on the higher-level runtime wrapper. I also disabled Next's development indicators because their internal Segment Explorer bundle was contributing to the same client-manifest errors. Now the note route can be edited and reloaded without restarting the server.

What comes next

This is a starting point rather than a finished system. I would like to add more notes, introduce a few carefully chosen MDX components, and experiment with richer post layouts when the writing calls for them. For now, the important part is that the path from an idea to a published page is short.

Thanks for stopping by. I hope you find something useful here.