Skip to main content
Nicolás Kennedy

Building this site with TanStack Start and MDX

· updated

  • meta
  • tanstack
  • mdx

← back to blog list

This site is a small TanStack Start app. Posts like this one are plain MDX files committed into the repository — Markdown for the prose, with the occasional React component mixed in when a plain paragraph will not do.

Everything happens at build time

There is no content database and no client-side Markdown runtime. Each post is compiled to a component while the site is built, so what ships to your browser is ordinary HTML.

An MDX file compiling at build time into static HTML

Code blocks are highlighted the same way — by Shiki, at build time — so no syntax-highlighter JavaScript is sent to the browser at all. The colors come from this site's own theme tokens rather than a bundled editor theme:

export function greet(name: string): string {
  // Highlighted while the site is built, not in your browser.
  return `hello, ${name}`
}

Note

Because highlighting is pre-rendered, code blocks look identical whether or not JavaScript runs — and they switch with the light/dark theme, since the token colors are CSS variables.

Why MDX

Prose is the common case, but every so often a post needs a real component — a callout, a diagram, an interactive widget. MDX lets a post reach for one without turning the whole page into hand-written markup.