Building a Small JSX and Markdown Blog
How I added a static MDX blog to this repo without giving up predictable builds or lightweight writing.
Been thinking about a blog system for this repo. Needed something dynamic enough for rich HTML and embeds, search functionality, but constrained to GitHub Pages which is static hosting only.
Settled on MDX. Markdown-first blog posts with interpolated JSX. Routes generated at build time.
I wanted the writing surface to stay calm, with JSX only carrying the visual edges.
How it works
The dynamic parts get decided before deployment. Posts discovered from src/content/blog, frontmatter validated once, routes generated ahead of time. Site still fits output: 'export'.
const post = getPostBySlug(slug)
<MDXRemote source={post.content} components={mdxComponents} />
JSX kept tight
Used MDX for a small component surface. Not unrestricted React files. Gave me headings, links, callouts, demos, visual pieces like the SVG doodles. Writing still feels like markdown. Not application code.
I wanted the writing surface to stay calm. JSX only carries the visual edges.
That's the shape. Markdown for speed, JSX for the rare expressive parts, blog system small enough I can still trust what it's doing.