网站基建：从”硬编码”到”自动化流水线”

一句话

把一个库存数据写在网页代码里的手工作坊，改造成了数据自动同步、配置自动部署的现代化工厂。

---

以前什么样？

想象一下：你开了一家网店，每次上新产品、改价格，都得直接打开网页的源代码去改。HTML、CSS、JavaScript 混在一起，就像在一碗面条里找那颗盐粒：

• 不小心碰错一个标签 → 整个网页崩了
• 每次改完都得重新发布整个网站
• 别人想帮忙改都不知道从哪下手

公司的网站之前就是这个状态。

改造后什么样？

旧模式：数据写在代码里  →  改数据=改代码  →  容易搞坏
新模式：数据单独存放    →  改数据=改Excel  →  改完自动上线

就像厨房改革：

• 改革前：厨师自己种菜、自己切菜、自己炒菜、自己洗碗
• 改革后：有专门的菜农（Excel 数据源）、专门的配菜工（sync_data.py）、专门的大厨（网页模板）、专门的外卖员（Cloudflare 自动部署）

---

动过的”手术”

手术一：把代码和数据分开

以前看板的库存数据硬写在 index.html 里：

<!-- 改之前：数据和代码混在一起 -->
<td>MLCC 0805 22uF</td>
<td>1200</td>

改之后，网页启动时自动去加载一个独立的 data.json 文件：

// 改之后：网页只负责展示，数据从外面拿
fetch('data.json').then(r => r.json()).then(data => {
    // 画表格...
})

好处：下次改价格，改 data.json 就行，网页代码动都不用动。

手术二：从密码开门换成钥匙开门

本来用 HTTPS Token（像密码）认证 GitHub。但系统环境变量对长密码有截断风险——就像密码太长，门锁只读了前一半。

换成了 SSH 密钥对（像一把钥匙）：

• 私钥：放在本地 WSL 环境里（你家钥匙放家里）
• 公钥：部署到 GitHub 账号上（给锁匠配的模子）

从此本地到云端免密通信，再也不会”认证失败”。

手术三：搭了一条自动化数据流水线

inventory.xlsx（Excel 表格）
    ↓  你改完保存就行
sync_data.py（转换脚本）
    ↓  自动跑
data.json（网页能读的数据）
    ↓  自动推送到 GitHub
Cloudflare Pages（全球部署）
    ↓  30秒后
网页更新完成 ✅

这个脚本有几个聪明的小功能：

• 自动找图：根据产品 SKU（比如 M1201），自动去 images/ 和 files/ 目录下找对应的图片和 PDF
• 防精度丢失：Excel 处理数字时会把 0.1234 变成 0.1234000000001，脚本强制保留 4 位小数，拦截这个 bug
• SKU 零丢失：Excel 会把 0805 变成 805（去掉前导零），要求 Excel 里该列保持”文本格式”来避免

手术四：给文件起名的规矩

为了不让脚本找错文件，定了一个死规矩：

图片和 PDF 必须用 SKU 编号命名

比如 SKU 是 M1201：

• 图片 → M1201.jpg
• 数据手册 → M1201.pdf

分别放进 images/ 和 files/ 文件夹。脚本按 SKU 去找，找不到就跳过，不会报错崩溃。

---

日常怎么维护（三步走）

未来更新库存或价格，只需要三步，2 分钟搞定：

步骤	做什么	注意
1. 改	在 Excel 里打开 inventory.xlsx，改数字，保存	保持 SKU 列为文本格式，不然 0805 会变成 805
2. 说	告诉我：“更新公司网站库存”	我会自动跑剩下的流程
3. 看	等 30 秒，刷新网页确认	如果有问题我会告诉你

---

总结

以前：改一个价格 → 打开 HTML → 小心找到位置 → 改 → 保存 → 手动上传
现在：改一个价格 → 打开 Excel → 改 → 保存 → 告诉 Zack → 自动上线

从”程序员操作”降级到”Excel 操作”，省掉了 90% 的出错机会和 100% 的技术门槛。