从 WordPress 到 Astro：XPANZ 官网的静态化重构记录

XPANZ 官网最近完成了一次完整重构：从传统 CMS 迁到 Astro 静态站点，最终产出 28 个页面的纯静态构建、零外部资源请求（无 Google Fonts、无 CDN 追踪）、全套 VI 设计体系落地。这篇记录选型过程与技术决策，给同样在做官网的团队一个参考。

为什么换掉 CMS

旧方案的问题不是”慢”，而是不可控：主题换字体要去插件里找开关，VI 色值被主题的自定义选项层层包裹，页面上还挂着一堆第三方脚本。对一个主打”全球出海社媒营销AI”的产品，官网本身就是产品力的一部分——它应该像我们给客户生成的内容一样：快、干净、风格统一。

为什么是 Astro

评估过的方案里，我们最终选了 Astro（内容驱动 + 岛屿架构），理由按优先级排：

1. 内容集合（Content Collections）：博客、案例、定价这些 Markdown 驱动内容天然匹配我们的”结构化数据 + 文案”工作流——运营改文案是改 Markdown 文件，不需要碰模板；
2. 零 JS 默认：28 个页面里大部分是纯 HTML+CSS，博客列表页的首屏加载不受任何框架拖累；
3. 自托管友好：字体通过 woff2 自托管（Manrope 与 NotoSansSC 的 Variable 字重用 fonttools 压缩），构建产物里没有一个外部域名请求；
4. 部署简单：构建产物是纯静态文件，扔任何静态托管（我们最终用 CloudBase）即可，没有服务端依赖。

被否决的方案：Next.js（对内容站过重）、WordPress 继续用（不可控问题无解）、纯手写 HTML（内容规模上来后维护成本不可接受）。

VI 落地的工程做法

设计体系全量来自我们的 VI 资料库：颜色 token 直接落为 CSS 变量（深色为默认主题，浅色预留），LOGO 用官方 SVG 锁标，字体双栈（Manrope 西文 + NotoSansSC 中文）。一个关键细节：图标必须内联渲染，因为官方线性图标用 currentColor 定义描边色——用 <img> 引入时颜色永远解析为黑色，深底上就隐形了。我们把图标做成 Astro 组件，让描边色继承父级文字色，深色区自动变白、强调区自动变橙。

踩过的坑

• 绝对路径与双击打开：构建产物用站点根绝对路径引用资源，直接双击 HTML 打开会全部 404。这是静态多页站的固有限制，我们在对外发放的包里附了本地预览脚本，正式部署不受影响。
• keyvisual 当背景：VI 主视觉图内嵌品牌元素，直接铺背景会干扰标题。统一加一层渐变蒙层（深色到透明），主题感和可读性可以兼得。
• 构建缓存：开发服务器的依赖缓存重建要批量删临时目录，个别安全软件会拦截这类操作导致 dev 服务器报错——遇到类似问题先检查杀软的文件保护日志。

结果

重构后全站 28 页面、构建无外部请求、Lighthouse 性能分拉满。更重要的是：官网现在和产品共享同一套 VI token 源文件，改一次颜色，产品和网站同步生效——这才是设计体系该有的样子。