How I Built This Site · Yanchao Yang

This is a placeholder post (in MDX) — replace it with your own build notes. It lives at src/content/blog/how-i-built-this-site.mdx.

Picking the stack

The case for Astro is simple: it ships plain static HTML with no unnecessary JavaScript, and a personal site should above all be fast.

Need	Choice
Framework	Astro
Styling	Tailwind CSS
Content	Markdown / MDX
Hosting	Vercel

Dark mode

Dark mode uses Tailwind’s class strategy: an inline script in <head> reads localStorage (falling back to the system preference) and toggles the .dark class on <html> before the first paint, so there’s no flash on reload.

const theme =
  localStorage.getItem('theme') ??
  (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.classList.toggle('dark', theme === 'dark');

Content management

Posts live in src/content/blog/. Astro’s content collections validate every post’s frontmatter at build time, so a typo in a field fails the build instead of silently shipping.

Publishing a new post is just adding a .md file — Vercel rebuilds and deploys on every push.