小白搭网站踩坑记：一个 API Key 搞了我俩小时

本来以为半小时搞定的事

今天下午，我突发奇想：给 GenUI.Art 加个在线 AI 生成页面的工具吧——一个 playground，用户输入 prompt，调 AI API，生成 HTML 预览。

听起来多简单：输入框 → 调 API → 展示结果。半小时搞定，然后喝杯咖啡。

结果呢？我折腾了一整个下午。

现在是晚上八点，我终于把这个 playground 搞上线了：https://genui.art/playground/

为了防止其他小白踩同样的坑，我决定把这些血泪史记下来。

---

坑 1：Hexo 把我的 CSS 当 Markdown 解析了

这是我遇到的第一个坑，也是最诡异的。

我写了一段很正常的 CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

结果部署上去一看——列表项前面多了个圆点，* 被渲染成了 Markdown 无序列表。

我当时：？？？

查了半天才发现，Hexo 的 Markdown 引擎（marked）会把 *{} 里的 * 当成 Markdown 的列表标记来处理。*{margin:0} 在 Markdown 里被解析成了一个带列表符号的段落。

解决方案： 把 CSS 用 <style> 标签包起来，或者用反引号 ` 包裹，防止 Markdown 引擎解析。更稳妥的做法是把 CSS 放到独立文件里，别直接写在 Markdown 里。

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

教训：在 Hexo 的 Markdown 文件里写 CSS，永远记得包 <style> 标签。

---

坑 2：Cloudflare Pages 的 Secret 设了 8 次才成功

playground 要调 AI API，所以需要把 API Key 设到 Cloudflare Pages 的环境变量里。听起来就 wrangler pages secret put 一行命令的事。

第一次：wrangler pages secret put DEEPSEEK_API_KEY，输入 key，提示成功。部署，测试——401 Unauthorized。

第二次：我再设一次，这次我确定输入没错。还是 401。

第三次：我开始怀疑人生了。是不是 key 本身有问题？

后来我终于发现了：我用的是 PowerShell，而 PowerShell 管道里的变量会带 BOM（字节顺序标记）。

# 这样会把 BOM 字符混进去
$key = "sk-xxx..."
$key | wrangler pages secret put DEEPSEEK_API_KEY

那个看不见的 BOM 字符 U+FEFF 会跟着 key 一起被存到 Cloudflare 的 secret 里，然后 API 调用时 key 就不对了。

解决方案： 用文件传入，或者直接在命令行交互式输入，别用管道。

# 正确做法：直接交互式输入
wrangler pages secret put DEEPSEEK_API_KEY
# 然后手动粘贴 key，按回车

或者更保险：

$env:DEEPSEEK_API_KEY = "sk-xxx..."
wrangler pages secret put DEEPSEEK_API_KEY --value $env:DEEPSEEK_API_KEY

PowerShell 的坑不止这一处，如果你也用 Windows + PowerShell 开发，记住：管道 + 字符串 = 可能有编码问题。

---

坑 3：DeepSeek API 在海外 CF Worker 上不通

设好了 secret，API Key 没问题了，但还是 401。

我开始排查：是不是 DeepSeek API 的网络问题？是不是 Cloudflare Worker 的地域限制？

查了一圈文档，发现 DeepSeek API 的 base URL 是 https://api.deepseek.com。这个域名在海外访问——有时候不通。

更坑的是，Cloudflare Pages Functions（本质是 CF Workers）部署在海外节点上。如果目标 API 对海外 IP 有限制或者不稳定，你的 Worker 就调不通。

最后的解决方案：换了 base URL，用一个更稳定的中转，或者把 Worker 的部署区域调整一下。

教训：选 API 之前，先想清楚你的 Cloudflare Worker 部署在哪里，目标 API 在那里能不能通。 海外调国内、国内调海外，都可能有坑。

---

坑 4：界面改了 20 版，从纯黑改到星空

这个坑不是技术上的，但可能是最让我崩溃的。

playground 的界面，我一开始想：纯黑背景，白色文字，酷一点。

改完一看——像终端，太硬核了，不像给人用的。

换：深绿色背景。结果——像黑客帝国，还是太硬核。

换：浅色主题。结果——像企业官网，没个性。

换了十几版，越改越丑。我开始怀疑自己是不是没有审美。

最后灵光一闪：用 Three.js 加个动态星空背景。

一行 CDN 引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

然后写了一个简单的粒子系统，背景是缓慢旋转的星空。效果立刻就不一样了——有科技感，但不压抑，而且有动效，感觉「活的」。

最后发现：有时候少做一点，效果反而好。 与其花时间调颜色，不如加一个动效，用户感知到的是「这个网站很酷」而不是「这个网站的颜色很好看」。

---

最终结果

折腾了一整天，playground 终于上线了：https://genui.art/playground/

• 输入 prompt，调 AI 生成 HTML/CSS/JS 代码
• 左边编辑，右边实时预览
• 有星空动效背景（Three.js 粒子系统）
• 移动端也能用

效果比我预期的好。尤其是那个星空背景，好几个朋友说「很酷」。

而我，一个非前端专业的人，用 Hexo + Cloudflare Pages 搭了这个网站，踩了四个大坑，才把它搞上线。

---

写在最后：给同样在搭网站的小白

如果你也是独立开发者，也在用 Hexo / Cloudflare Pages 搭网站，这些坑你可能也会遇到：

1. Hexo 的 Markdown 里别裸写 CSS —— 用 <style> 包起来
2. PowerShell 管道传字符串有 BOM 坑 —— 用交互式输入或变量传
3. API 的地域限制要考虑 —— 先测试你的 Worker 能不能调通目标 API
4. 界面设计别死磕颜色 —— 有时候一行 JS 动效比改 20 版配色更有效

搭网站就是这样，每个坑都不大，但加起来能让你抓狂。不过等你填完这些坑，看到自己的网站上线的那一刻，还是挺爽的。

共勉。💪