为什么是 Astro#

选 Astro 的核心原因就一条：默认零 JS。作品集主页本质是内容展示，99% 的页面不需要客户端交互，Astro 把这些页面静态化，不加载任何 JavaScript，打开速度几乎等于浏览器解析 HTML 的速度。

它还顺手解决了两个老问题：

• 组件化：每个区块（Hero、About、Projects、Experience）都是一个 .astro 组件，数据从 site.config.ts 集中管理，改文案不动结构，改结构不动文案
• 内容层：项目数据、工作经历、技能清单全部抽成 TypeScript 数据文件，页面只是数据的渲染器

设计 Token 体系#

这是这次重建最大的收获。做 Game-Hub 时被”像素风一致性”折磨过，这次从一开始就定了 Token：

1
:root {
2
  --color-bg: #0f172a;
3
  --color-surface: #1e293b;
4
  --color-text: #f1f5f9;
5
  --color-muted: #94a3b8;
6
  --color-accent: #38bdf8;
7
  --space-1: 0.25rem;
8
  --space-2: 0.5rem;
9
  /* ... */
10
  --radius-card: 12px;
11
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
12
}

所有组件只引用 Token，不出现裸色值。好处是改主题色只需要改一处变量，整个站点的视觉就统一变了。暗色主题本来就在 Token 层面定死，没有额外的切换逻辑，少了一整类 bug。

数据驱动的内容结构#

每个区块对应一个数据文件，比如工作经历：

1
export const experience = [
2
  {
3
    role: 'Java 全栈开发工程师',
4
    company: '某企业软件公司',
5
    period: '2021 - 至今',
6
    desc: '主导人才画像系统建设，落地多租户业务架构',
7
    tags: ['Java', 'Spring Boot', 'Vue', 'Oracle'],
8
  },
9
];

页面组件只做一件事：把数组渲染成 DOM。新增一条经历 = 改一行数据，不碰组件。这个结构后来被我自己频繁使用——半年里改了五六次内容，每次都是纯数据改动，体验非常好。

部署：Cloudflare Pages#

部署选 Cloudflare Pages，流程是”连 GitHub 仓库 → 自动构建 → 全球 CDN”，一条龙：

域名用自定义域，DNS 在 Cloudflare 托管，TLS 证书自动签发，全程没碰过服务器。静态站点的部署已经简单到不该成为考虑因素了。

一些小经验#

• 先定 Token 再写组件：顺序反了会到处返工
• 图片用 Astro 的 astro:assets：自动压缩和响应式尺寸，比手写 <img> 省心得多
• pagefind 做站内搜索：静态站也能有全文搜索，几行配置的事
• 暗色主题先想清楚再动手：半路从亮色改暗色，对比度问题会让你怀疑人生

做完这个项目最大的感受是：好的工程习惯是给未来的自己省时间。现在维护这个主页就像改配置文件，而不是在 HTML 里考古。