A custom blog built with Next.js and MDX.
This is where I publish technical writing. It’s intentionally minimal and built from scratch rather than using a template or CMS.
- Next.js (App Router)
- MDX (server-rendered)
- rehype-highlight for code blocks
- Framer Motion for small UI transitions
- Playwright for basic layout checks
- Nix for a reproducible dev environment (includes Bun and Node for tooling)
- Bun for dependency install and
bun.lock(usebun install; CI usesbun install --frozen-lockfile) - Nx for task orchestration (
nx run blog:dev-app,nx run workspace:ci, etc.; the Next app is underapps/blog/).
Posts live in:
content/posts/*.mdx
They’re rendered server-side using next-mdx-remote.
Metadata is parsed with gray-matter.
Mermaid diagrams are compiled to SVG at build time using mmdc.
There’s no client-side Mermaid runtime — diagrams are static assets.
Blog pages are fully static:
export const dynamic = "force-static";
export const revalidate = false;No runtime revalidation.
Playwright tests check things like:
- No horizontal overflow
- Mobile navbar behavior
- SVG visibility across breakpoints
Nothing over-engineered — just guardrails.
Enter the dev shell:
nix developStart the dev server (nx run blog:dev-app runs next dev --turbo in apps/blog so Turbopack is always used for local dev; use bun run dev:webpack if you need the webpack dev bundler):
bun run devTo pass extra Next.js CLI flags after --turbo:
bunx nx run blog:dev-app -- --port 3001Panda CSS: prepare / prebuild run panda cssgen, which emits styled-system/styles.css. That file is imported from apps/blog/app/globals.css, so atomic utilities (e.g. .c_white on <html> from RootLayout) have real rules in the browser. Without it, you can see Panda class names in the DOM but no styling.
After nix develop, install deps once with bun install at the repo root. Then use Nx for day-to-day tasks.
Nx does not cache next dev — it mostly orchestrates build, test, and library tasks. For admin pages, narrow imports from public-proof-db/* subpaths keep the compile graph smaller than importing the package barrel.
Run layout tests:
bun testwhich runs nx run workspace:e2e. The default dev shell includes Chromium for MDX/mermaid but not the Playwright browser bundle (so nix flake check stays fast). For Playwright tests, use the same nixpkgs browser bundle and enter the dev shell with it on the path, for example:
nix shell nixpkgs#playwright-driver.browsers --command nix developDo not use playwright install for CI parity — keep @playwright/test pinned via package.json overrides so Playwright’s Chromium revision stays aligned with nixpkgs; after nix flake update, bump Playwright only if the new playwright-driver matches (or refresh the pins together).
I wanted:
- Full control over layout and styling
- First-class MDX support
- Static rendering
- No dependency on a hosted CMS
It’s a small, personal publishing engine.