在Cloudflare Pages连接GitHub仓库，构建命令填npm run build，输出目录填dist，绑定自定义域名后自动配置SSL。每次git push自动触发重新部署。环境变量在Pages的Settings→Environment Variables里设置。

CF Pages 部署上线全流程

代码写好了，域名配好了，现在把网站部署到 Cloudflare Pages——从 git push 到全球可访问，整个流程5分钟。

前置条件

GitHub 账号（代码仓库已推送）
Cloudflare 账号（域名已托管到 CF）
Astro 项目可以本地 npm run build 成功

Step 1：连接 GitHub 仓库

Cloudflare 控制台 → Workers & Pages → Create application → Pages → Connect to Git
授权 Cloudflare 访问你的 GitHub 账号
选择你的外贸站仓库 → Begin setup

Step 2：构建配置

字段	填写值	说明
Project name	`waijian-site`（或你的项目名）	CF Pages 子域名前缀
Production branch	`main`	推送到 main 触发生产部署
Build command	`npm run build`	Astro 构建命令
Build output directory	`dist`	Astro 默认输出目录
Root directory	`/`（留空）	单仓库项目留空

Framework preset：选择 Astro，CF 会自动填入正确的构建配置。

点击 Save and Deploy → CF 开始第一次构建，通常需要1–2分钟。

Step 3：绑定自定义域名

构建成功后，默认访问地址是 yourproject.pages.dev。

绑定自己的域名：

Pages 项目 → Custom domains → Set up a custom domain
输入 www.yourdomain.com
CF 自动在 DNS 添加 CNAME 记录，指向 yourproject.pages.dev
同时添加根域名 yourdomain.com → CF 会设置 301 重定向到 www（或反之）

SSL：自动配置，无需任何操作。

Step 4：设置环境变量

如果你用了 CF Workers（如询盘表单的 Resend API Key），在 Pages 里设置环境变量：

Pages 项目 → Settings → Environment variables → Add variable

RESEND_API_KEY = re_xxxxxxxxxxxx

注意：生产环境（Production）和预览环境（Preview）可以设置不同的值，测试时用 Preview 的 staging 配置。

Step 5：部署后验证

□ 访问 https://www.yourdomain.com → 页面正常加载
□ 访问 http://yourdomain.com → 自动跳转到 https://www.yourdomain.com
□ 访问 https://yourdomain.com（不带www）→ 跳转到 www 版本
□ 浏览器地址栏显示🔒（HTTPS 有效）
□ 打开 Chrome DevTools → Console 没有红色报错
□ 随机点开一个产品页，确认内容正确加载
□ 提交一个测试询盘，确认能收到邮件通知

自动部署工作流

配置完成后，日常更新流程：

本地修改内容/代码
    ↓
git add . && git commit -m "update: ..."
    ↓
git push origin main
    ↓
CF Pages 自动触发构建（1–2分钟）
    ↓
全球所有节点更新完成

不需要手动 SSH 上传，不需要手动刷新 CDN 缓存——CF Pages 自动处理。

预览部署（Preview Deployments）

每次推送到非 main 分支，CF Pages 会自动生成一个预览 URL：

git checkout -b feature/new-product-page
# 修改内容...
git push origin feature/new-product-page
# CF 自动生成：https://feature-new-product-page.yourproject.pages.dev

可以把这个 URL 发给团队成员预览，满意后合并到 main 再上线。

→ HTTPS 与安全响应头配置

NEXT ACTION / 下一步