搭建现代静态博客

动机

一直想要一个完全自己掌控的写作空间——极简、快速、不依赖第三方平台。恰好 Astro 5 发布，Tailwind CSS v4 也趋于稳定，加上 Bun 作为运行时日益成熟，三者结合正好是我心目中的理想技术栈。

技术选型

Astro 5

Islands 架构意味着默认输出零 JavaScript。对于以文字内容为主的博客而言，这意味着极致的性能——Lighthouse 满分并不困难。

Content Collections 提供了类型安全的内容管理，用 Zod 定义 schema，TypeScript 自动推导类型。

Tailwind CSS v4

v4 最大的变化是 CSS-first 配置。不再需要 tailwind.config.js，所有自定义主题值都写在 CSS 里：

@theme {
  --color-muted: #f5f5f5;
  --font-dm-sans: "DM Sans", sans-serif;
}

暗色模式切换也更加自然——使用 CSS 变量 + class 切换，完全避免了 v3 时代的 dark: 前缀冗余。

Shiki 代码高亮

Astro 内置 Shiki 支持，双主题配置零额外依赖：

markdown: {
  shikiConfig: {
    themes: {
      light: "github-light",
      dark: "one-dark-pro",
    }
  }
}

Framer Motion 动画

仅用于两个地方的简约动画：页面淡入（PageTransition）和元素滑入（FadeIn）。使用 React Island 加载，不影响内容本身的零 JS 渲染。

设计原则

• 全中性色：无品牌色，无渐变，仅 6 个语义色彩令牌
• 无圆角：除极少数徽章外，全部直角
• 无阴影：仅主题切换按钮有微弱投影
• 双字体：DM Sans 用于标题，霞鹜文楷用于正文

后续计划

• RSS 订阅
• Pagefind 全文搜索
• OG 图片自动生成
• 评论系统（Giscus）

这不是终点，而是起点。