续集：40 多个页面的组件库站，我是怎么发到 Firebase 的

上一篇讲了怎么用 WorkBuddy 做一个 HTML 教程站并发布到 Firebase（ https://html.eapis.site ）。这次是续集——第二个站规模直接翻了好几倍：一个 Bootstrap 5.3 组件示例大全，地址是 https://bootstrap.wanxiangsucai.com，覆盖官方 25 个组件加 12 个常用第三方组件，共 40 多个页面。发布过程比第一次熟练很多，但踩的坑也是新的，一并记下来。

一、这个站和上一个站有什么不同

如果说 HTML 教程站是"十来个页面的文章集"，那这个站就是"工具书"：

• 页面多而杂：手风琴、模态框、下拉菜单、导航栏……每个组件一个独立页面，各自带可交互的真实示例；
• 代码即内容：每个示例的代码块都要一键复制，访客来了就是为了抄代码；
• 依赖走 CDN：Bootstrap 5.3 本体和第三方库全部走 jsDelivr，站内不打包资源，目录保持干净；
• 更新频繁：组件库生态在动，第三方组件页面要跟着增删，比如 Tempus Dominus、Summernote 这类官方文档没有覆盖的库，还要标注"官方没有"给访客提个醒。

页面数量一上来，第一篇里"一次说清结构"的技巧就不够用了——这次我是分批生成的：先让 WorkBuddy 搭好骨架页（首页 + 通用导航 + 页脚模板），再一批一批生成组件页，每批验收完再继续。像流水线，但每批都过目，质量可控。

二、发布：这次只用了五分钟

因为 Firebase 账号在上一个站时已经绑定过了（浏览器授权一次，凭据留本机），这次发布流程压缩成了三步：

# 1. 进入站点目录，初始化 Hosting（public 目录指向站点文件）
npx firebase-tools init hosting

# 2. 先发预览渠道，自己先过一遍
npx firebase-tools hosting:channel:deploy preview

# 3. 验收没问题，正式上线
npx firebase-tools deploy --only hosting

最后在 Hosting 设置里把自定义域名解析好，https://bootstrap.wanxiangsucai.com 就通了。

安全方面再啰嗦一遍上篇的原则：授权走浏览器，密钥不进对话框。这次全程没有碰任何密钥信息，账号绑定是上一次的事，这次连登录这步都没出现——这就是"一次授权、长期复用"的好处。

三、这次踩的坑

多页面站和单站的小站，麻烦点完全不一样：

1. 相对路径：40 多个页面互相跳转，首页用绝对路径没问题，子页面里引用 CSS/JS 和互相链接就得理清目录层级。生成时我明确要求 WorkBuddy 统一用站根相对路径，避免上线后出现白页。
2. sitemap 必须同步：页面一批批生成，sitemap.xml 最后统一重新生成一次，否则搜索引擎只认识第一批页面。这次发布前我特意让 AI 核对了 sitemap 和实际页面数量是否一致。
3. 示例页的 JS 冲突：多个组件演示页各自引第三方库，个别库之间有全局变量冲突。逐页验收时发现一个页面弹窗失效，单独排查后才定位到加载顺序问题——分批验收的价值这时候就体现出来了。
4. 缓存策略：组件页内容常更新，但 Bootstrap 本体走 CDN 不受影响，站内静态资源在 firebase.json 里配好缓存头，改动才能及时生效。

四、我的心得

• 骨架先行、内容分批是做多页面站的节奏：先把模板和导航定稿，再批量灌内容，返工成本最低。
• 预览渠道不是可选项，是必选项：页面多了以后，"我觉得没问题"和"真的没问题"之间隔着一个预览链接。
• 工具链复利的体现：第一次发布花在账号绑定和流程摸索上的时间，第二次几乎全部省掉了。前期把路蹚通，后面每个新站都是复制粘贴级别的操作。
• AI 做站的上限，取决于你提需求的下限：结构、路径规则、SEO 要求、缓存策略，这些你说得越细，它做得越稳。

两个站跑下来，"对话式建站 + Serverless 托管"这套组合已经成了我的默认选项。如果后续做了第三个站，可能就是带表单交互的进阶玩法了，到时候再写第三篇。