October 4, 2024
O. Wolfson
Project by: O. Wolfson
Role: Full-Stack Developer, System Architect
Stack: Next.js 15 · MDX · Tailwind CSS · Supabase (optional) · TypeScript · Zod · React
MDXBlog is an open-source, developer-first blogging platform that blends the elegance of Markdown with the power of React components via MDX. Built with Next.js and a modern component architecture, MDXBlog enables anyone to spin up a fast, secure, and interactive blog in minutes—without needing a database or CMS.
This project grew out of a personal need: I wanted a writing experience that felt as seamless as coding. The result is a platform that puts content creation and developer comfort at the center.
@mdx-js/loader, @next/mdx) to power interactive posts that embed JSX directly in Markdowntailwind-merge, and tailwindcss-animate for utility-first, responsive stylingreact-hook-form for form validation (e.g., donation, comments, admin tools)MDXBlog stores posts as .mdx files in the local filesystem, keeping content portable, version-controlled, and easy to manage. Posts include embedded metadata using export const metadata = {} (preferred over frontmatter), enabling control over title, date, tags, author, and scheduling.
json"prebuild": "node lib/cache/generate-cache-posts.mjs"
At build time, MDXBlog generates a cache of all published posts based on metadata. This ensures lightning-fast page loads, avoids unnecessary rebuilds, and enables advanced features like scheduled publishing and draft visibility control in development mode.
Posts with a future publishedAt date are hidden from public view until their scheduled release. This enables:
You can embed any React component directly inside .mdx posts. Built-in components include:
<YouTube id="..." /> — embed videos by ID<Image src="..." caption="..." /> — optimized images with captions<Code> blocks with syntax highlighting via rehype-highlight<Alert>, <Note>, <Button> and any others you defineNo extra imports needed—these are globally available across your MDX content.
Posts are dynamically rendered based on:
This enables powerful custom blogroll logic, such as hiding drafts, showing "Recently Updated" flags, or sorting posts intelligently.
bashgit clone https://github.com/your-org/mdxblog
npm install
npm run dev
Posts are stored in content/posts/. Each .mdx file is a full-featured post. Metadata is defined inline as a metadata export, no frontmatter needed. You can preview edits locally or deploy instantly with Vercel.
Other niceties:
EditPostButton and OpenInVSCode in dev modenext-sitemap)MDXBlog is built around a simple belief:
Markdown is the best writing UX. React is the best rendering engine. MDX is both.
This makes the blog platform intuitive for developers, powerful for content creators, and blazingly fast for readers.
MDXBlog is more than a template—it’s a publishing philosophy. It’s designed for developers who want to write without being slowed down by CMS complexity or publishing constraints. It’s simple to install, easy to use, and endlessly extensible.
"If you can write Markdown and React, you already know how to blog with MDXBlog."
Check out: https://www.mdxblog.io Docs, demos, and the full codebase are available. Contributions are welcome.
If you’ve enjoyed using MDXBlog or find it useful for your projects, consider donating or sponsoring to help maintain its development for the MDX community.