用 AI 建站并接入 Cloudflare 自动部署

用 AI 做一个网站，再把它免费放到 Cloudflare，难点已经不只是生成好看的页面。作者拿虚构咖啡品牌 Ember Lane Coffee 做示范，真正想打通的是：准备素材、约束 AI、控制动效成本，再让静态文件进入可持续更新的部署流程。

这套方案选择 Workers 托管纯静态网站，把视觉效果和服务器代码分开。最值得借鉴的是需求简报和渐进增强；最需要打问号的是「免费」的适用边界，以及提示词对比实验能证明多少。提供的原文在安全响应头部分截断，GitHub 自动部署和域名绑定没有完整操作步骤。

AI 缺的不是审美，而是你的事实和素材

作者用 Claude Code 制作线上示例，用 Codex 生成产品图。为了比较提示词，又在 2026 年 11 月 12 日，用相同的 Codex CLI 0.165.0 和 gpt-6.1-sol，在两个空目录里分别生成网站。

一句「给我的咖啡店做个网站」，得到的页面也很好看。但店名变成了 Morrow Coffee，菜单、价格和咖啡馆照片都由模型补齐。它标注了示例内容，却没有 Cloudflare 配置和安全响应头，还自行发布了一个 ChatGPT 私有预览。后一点是这次运行的观察，不能直接推断成所有会话的固定行为。

完整简报则限定品牌、事实、素材、排版和技术规则，要求只使用给定信息，包括周二烘焙、12 kg 批次、48 小时静置和三项价格。生成结果也包含了 wrangler.jsonc 与 _headers。

AI 能补齐页面，也会补齐你没有提供的业务事实。

视觉素材同样需要约束。作者一次要求生成七张图，统一左上方柔光、阴影和色调；咖啡袋与豆堆使用透明背景，方便独立排布。原始 PNG 每张约 1–3 MB，按展示尺寸用 cwebp 转为 WebP 后，七张合计约 620 KB。

网站简报还把「高级感」拆成可执行要求：标题居中、产品放在下方、豆堆从两侧伸出，自托管 Fraunces 字体，不使用第三方字体 CDN。最后要求运行 npx wrangler dev，检查 1440 px、390 px 两种宽度，以及关闭 JavaScript 后的页面。

但那次 Codex 会话没有浏览器，无法执行自检，并在结果里说明了限制。把验收写进提示词有用，验收是否发生仍要单独确认。

动效可以加，基础页面必须先成立

示例采用照片配合透视和分层运动：前景随鼠标移动最多 36 px，主咖啡袋倾斜最多 10 度，首屏滚出时上移 90 px；产品卡片另用原生 JavaScript 和 CSS perspective，实现最多 8 度的倾斜。

这些效果并不都需要实时 3D。

作者也试过 Three.js：用程序生成咖啡豆模型，技术上能运行，视觉上却像巧克力，与照片放在一起破坏了真实感，还增加了 136 KB gzip 体积，最终删除。需要真实 3D 时，作者建议使用质量足够的 GLB 模型，并在 WebGL 可用、用户允许动效时才加载。

保留下来的 GSAP 和 ScrollTrigger 被本地打包，压缩后约 118 KB，gzip 后约 46 KB。页面通过动态 import() 按需加载；用户开启减少动态效果时不下载，关闭 JavaScript 时内容依然完整。

冲煮演示则是滚动控制视频播放位置。ScrollTrigger 使用 start: "top top"、end: "+=250%"、pin: true 和 scrub: true，让区域固定约两个半屏幕高度，再把滚动进度映射到 video.currentTime。

顺滑拖动依赖编码：19 秒、540 × 960 的片段约 2.6 MB，使用 ffmpeg ... -g 6 -bf 0，每 6 帧保留一个完整帧。因为作者遇到本地 wrangler dev 不支持所需 HTTP Range 请求，还改用 fetch() 下载视频并生成 blob URL，接近该区域时才加载。

这也解释了为何安全策略需要 media-src 'self' blob:。文字步骤仍是 HTML 标题和段落；无 JavaScript 或减少动态效果时显示静帧和全部步骤。动画失效，不该连带让介绍内容消失。

Workers 免费托管，边界在于有没有服务器代码

按原文引用的 2026 年 11 月文档，Cloudflare 推荐新项目从 Workers 开始，Pages 仍受支持。这里的 Workers 只分发 static assets，也就是目录中的静态文件，不执行 Worker 脚本，因此不适用文中提到的每日 100,000 次动态请求限制。

以后增加表单处理或 API，对应的服务器请求就要计入限额。「免费」也只指托管：域名可能收费，Claude Code 需要付费方案或 API 额度，Cursor、Codex 的免费额度也可能不够生成完整网站。

下面这份配置把 public/ 指定为网站目录，并启用自定义 404 页面：

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  // Worker 名称会成为免费网址的一部分：<name>.<your-subdomain>.workers.dev
  "name": "ember-lane-coffee",
  "compatibility_date": "2026-10-28",
  // 没有 "main" 脚本：这个 Worker 只提供 ./public 中的文件
  "assets": {
    "directory": "./public",
    "not_found_handling": "404-page"
  },
  // 拉取请求预览需要此配置块；静态网站使用空对象即可
  "previews": {}
}

关键是没有 main 字段；name 还必须与控制台里的 Worker 名称一致。React、Vue 单页应用需要另一种回退行为，可将 not_found_handling 设为 "single-page-application"，未知路径返回 index.html。

兼容日期也不能随意追新。作者曾填入 2026-11-01，本地运行时报错，二进制最多支持 2026-10-30，因此示例使用 2026-10-28。

第二份配置固定工具版本，并给出本地打包命令：

{
  "name": "cloudflare-website-template",
  "private": true,
  "scripts": {
    "dev": "wrangler dev",
    "deploy": "wrangler deploy",
    "build:js": "esbuild src/motion.js --bundle --minify --format=esm --target=es2020 --legal-comments=eof --outfile=public/js/motion.js"
  },
  "engines": {
    "node": ">=22.12.0"
  },
  "devDependencies": {
    "@fontsource-variable/fraunces": "5.3.0",
    "esbuild": "0.28.2",
    "gsap": "3.15.0",
    "wrangler": "4.155.0"
  }
}

注意 build:js：改动 src/motion.js 后，本地运行 npm run build:js，再提交生成的 public/js/motion.js。所谓部署时不构建，是把这一步提前了。精确版本配合 package-lock.json，减少依赖自动升级带来的差异；Node.js 要求至少 22.12.0，可用 node -v 检查。

安全响应头放在 public/_headers，用 /* 匹配所有路径。CSP 将脚本、样式、字体和连接限制为 'self'，以 frame-ancestors 'none' 禁止嵌入，并配合 nosniff、关闭相机麦克风定位权限，以及 max-age=31536000; includeSubDomains 的 HSTS。简报禁止内联脚本、事件处理器和 style=""，就是为了配合这些约束。

我的判断

最有价值的是把事实、素材、性能和部署要求一起交给 AI。它比反复要求「更高级」更容易验收，也更接近真实项目协作。

但提示词实验同时改变了简报、图片和字体文件，无法单独量化提示词的贡献。动效也没有移动设备帧率、加载时间或对照测试，「不拖慢网站」仍是设计目标和作者经验，不能直接当成性能结论。

单页营销站选原生 HTML 很合理；多页面共享布局可以考虑 Astro。原文也提到 Next.js 可通过 vinext 或 OpenNext 运行于 Workers，但服务器渲染会产生动态请求；output: "export" 静态导出另当别论。

Workers 也不是所有域名条件下都优先。按原文说明，如果 DNS 必须留在 Cloudflare 外部，又只需接入 www.example.com 这样的子域名，Pages 可以通过 CNAME 连接，Workers 不具备相同接入方式。选平台前应先核对这项约束。

能拿来做什么

• 给 AI 编程代理准备一页简报，明确真实文案、唯一转化目标、素材目录和禁止编造的内容，并要求交付时列出待替换项。
• 做单页展示站时先完成静态内容，再按需增加动效；分别检查 1440 px、390 px、关闭 JavaScript 和减少动态效果四类条件。
• 沿用配置时核对 Node.js、Wrangler、兼容日期和 Worker 名称；修改动效源码后提交打包产物，避免源码更新而线上文件没变。
• 在承诺免费托管前区分静态文件与动态接口，同时核对域名接入要求。GitHub 合并自动部署是原文目标，但当前材料缺少后续步骤，不能把它视为已经可复现的完整教程。