从零构建个人博客：Next.js + Tailwind CSS 实践

2026-06-101 分钟#Next.js#TypeScript#博客

这个站点本身就是这篇文章最好的演示。它没有用任何现成模板，而是从一张空白的 create-next-app 开始，一点点长成现在这副"单磷光体琥珀显像管"的样子。

为什么是 Next.js 15

我想要的不只是一个静态博客，而是一个可交互的个人空间：能在首页直接敲命令导航、有实时状态栏、有载入动画。Next.js 15 的 App Router 让"静态预渲染"和"客户端交互"可以干净地共存——大部分页面在构建时就生成好 HTML，而终端、命令面板这些只在需要的地方变成客户端组件。

原则：默认服务端，必要时才客户端。这样首屏快、SEO 友好，交互又不打折。

全站只用一套 CSS 变量描述颜色：

:root {
  --bg: #0c0a06;
  --fg: #f1dcab;
  --amber: #ffb000;
  --border: #3a2b12;
}

切换主题时只改 data-theme 属性，所有组件通过 bg-surface、text-amber 这类语义类自动适配，不需要给每个组件写两套样式。这是把"克制"落到工程上的方式。

推到 GitHub，Vercel 自动构建部署，绑定 yamiker.cloud。整个流程是：

没有 CI 的花活，但对一个个人站足够了。最贵的从来不是技术栈，而是每一个细节的取舍。