零成本上线插件官网：万网域名 + Cloudflare Pages + Nuxt 4 全流程实录

适合谁：做 Chrome 扩展、小工具、出海小产品的独立开发者，手里有一个域名，想给每个产品挂一个子域名官网，不想买服务器、不想备案、不想花钱。

最终效果：

主站 ``：品牌页 + 插件列表

子站 ``：单个插件的图文落地页、隐私政策、服务条款、联系页

代码放 GitHub，git push 后 Cloudflare 自动构建、自动上线，全程 HTTPS

花费：除了域名本身，0 元

整体架构与选型：为什么是 Cloudflare 而不是阿里云 OSS
准备工作
第一步：把域名加入 Cloudflare
第二步：在万网（阿里云）把 DNS 服务器改到 Cloudflare
第三步：验证 Cloudflare 账号邮箱（很多人卡在这里）
第四步：先用"拖拽上传"快速上线一个页面
第五步：用 Nuxt 4 搭建正规的静态官网
第六步：代码推到 GitHub
第七步：Cloudflare Pages 连接 GitHub，实现推送即部署
第八步：把自定义域名从旧项目迁移到新项目
第九步：绑定根域名和 www
日常更新流程
踩坑汇总（重点）
免费额度与限制
附录：完整配置文件

1. 整体架构与选型

1.1 目标

插件少的时候，主域名撑不起一个"应用商店"式的列表页，但每个插件都需要：

一个能填进 Chrome 应用商店的 Homepage URL
一个 隐私政策 链接（商店审核必填）
一个有图有文、能承接搜索流量的落地页

所以方案是：一个插件一个子域名，一个子域名一个独立项目。

复制代码

goodexts.com          → goodexts-website 仓库 → Cloudflare Pages 项目 A
www.goodexts.com      → 同上（同一个项目绑两个域名）
xdown.goodexts.com    → xdown-website 仓库    → Cloudflare Pages 项目 B
xxx.goodexts.com      → 以后每加一个插件，就再建一个仓库 + 一个项目

好处：

各插件站互不影响，改一个不会把另一个搞挂
以后某个插件要单独卖、单独迁移，整个仓库拿走即可
主站只维护一个插件列表，指向各子站

1.2 为什么不用阿里云 OSS

我一开始也考虑过 OSS 静态托管，对比下来放弃了：

问题	阿里云 OSS	Cloudflare Pages
备案	大陆区域的 Bucket 绑自定义域名必须 ICP 备案（1～3 周）	境外托管，不需要备案
默认域名预览 HTML	大陆 Bucket 默认域名会强制下载 HTML	自带 `xxx.pages.dev` 可直接访问
HTTPS	要自己申请、上传、续期证书，或再套 CDN	自动签发、自动续期
多子域名	每个子域名一个 Bucket 或 CDN 配置	一个项目点一下"添加自定义域名"
费用	存储 + 流量 + 请求计费	静态托管免费
自动部署	要自己写 CI	连 GitHub 即可

唯一的考量是用户在哪。 Chrome 扩展的用户本来就在海外（国内访问不了 Chrome 应用商店），Cloudflare 在国内偶尔慢的问题对我不构成影响。如果你的用户主要在国内，才需要认真考虑备案 + 国内 CDN。

1.3 这套方案里用到了什么

组件	作用	费用
万网（阿里云）域名	域名注册商，只负责续费	域名年费
Cloudflare DNS	接管域名解析	免费
Cloudflare Pages	静态网站托管 + 自动构建 + HTTPS + CDN	免费
GitHub	代码仓库，私有仓库也免费	免费
Nuxt 4	静态站点生成（SSG）	开源

网上流行的 "Pages + Workers + D1 + R2 + Resend 全家桶零成本" 说法，做官网只需要 Pages 这一个。Workers、D1、R2 是做登录、支付、存储这些后端能力时才需要的，等真用到再加，别一开始就上。

2. 准备工作

一个已购买的域名（本文以万网购买的 goodexts.com 为例）
一个 Cloudflare 账号（dash.cloudflare.com/sign-up，免费计划 不需要绑信用卡）
一个 GitHub 账号
本地环境：Node.js 22、pnpm（本文用 pnpm 11）、git、GitHub CLI gh（可选，但很省事）

bash 复制代码

node -v      # v22.x
pnpm -v      # 11.x
gh auth status

3. 第一步：把域名加入 Cloudflare

登录 Cloudflare 控制台，左侧 Domains → Overview ，点 Add a domain（新版界面是 "Connect a domain"）。
输入根域名 goodexts.com，注意 不要带 www、不要带 https。
DNS 记录导入方式选 Import DNS records automatically（推荐）。新买的域名一般没有任何记录，扫出来是空的，没关系。
选择计划：往下找到 **Free（ $0）** ，点 **Select plan**。页面上 Pro（$ 20/月）的按钮更显眼，别点错。
进入 "Importing DNS records"，等它扫完，点 Continue to activation。
会弹出提示 "Add records later --- Without DNS records, Cloudflare is unable to activate your site"，直接 Confirm。记录我们后面让 Pages 自动加。
进入 Update your nameservers 页面，这里是关键信息：

Add each of your assigned Cloudflare nameservers:
adam.ns.cloudflare.com
linda.ns.cloudflare.com

Delete your other nameservers:
dns29.hichina.com
dns30.hichina.com

注意： 每个 Cloudflare 账号分配到的两个 nameserver 名字不一样（adam / linda 只是我的），一定以你自己页面上显示的为准。dnsXX.hichina.com 就是万网默认的 DNS 服务器。

把这两个 Cloudflare nameserver 复制下来，去万网改。

4. 第二步：在万网（阿里云）修改 DNS 服务器

登录阿里云控制台 → 域名与网站 → 域名列表 ，找到你的域名，点管理。
左侧菜单 DNS 管理 → DNS 修改 。页面会显示当前 DNS 服务器：dns29.hichina.com、dns30.hichina.com。
点 修改 DNS 服务器 ，进入"修改为自定义 DNS"：
- 第一个输入框填 adam.ns.cloudflare.com
- 第二个输入框填 linda.ns.cloudflare.com
- 注意 结尾不要加点 （填 example.com 而不是 example.com.），不要有空格
点确定，弹出"请确认该操作"，选 手机认证 → 获取验证码 ，填短信验证码，再点确定。
回到 DNS 修改页面，"当前 DNS 服务器"变成两个 Cloudflare 的地址，就说明提交成功了。

几个注意点：

DNSSEC ：如果你在阿里云开启过 DNSSEC，要先在 DNS 管理 → DNSSEC 设置 里关掉，否则切到 Cloudflare 后解析会失败。新买的域名默认没开。
生效时间：阿里云页面写"24--48 小时"，Cloudflare 写"1--2 小时，最长 24 小时"。我实际是几个小时内就生效了。
所有权不变：改 DNS 只是把"解析"交给 Cloudflare，域名的注册、续费仍在万网，续费照常在阿里云交。
原有解析记录会失效：如果你之前在阿里云"云解析"里配过记录（比如邮箱 MX），切换前要在 Cloudflare 的 DNS 里把它们补上。新域名不用管。

回到 Cloudflare 的域名 Overview 页面，点 Check nameservers now ，页面变成 "Waiting for your registrar to propagate your new nameservers"，等着就行，生效后 Cloudflare 会发邮件，域名状态变为 Active。

等待期间不耽误干活，下面的步骤可以并行做。

5. 第三步：验证 Cloudflare 账号邮箱（很多人卡在这里）

第一次进 Workers & Pages → Create 时，可能会被一个 Verify your account 弹窗挡住：

We sent an email to xxx@gmail.com. To verify your account, click the link in the email.

坑点：

注册时 Cloudflare 发过一封验证邮件，触发 Pages 时可能又发一封。只有最新的那封有效，点旧的会提示成功，但控制台依然不认。
解决办法：在弹窗里点 Resend email ，看到 "Another verification email has been sent." 后，去邮箱找 刚收到的那一封 点链接。
在 Gmail 里注意"推广""动态"分类，Cloudflare 的邮件经常被分到那里。
验证后回到控制台 刷新页面，弹窗消失才算完成。

6. 第四步：先用"拖拽上传"快速上线一个页面

在正式搭框架之前，我先用一个纯 HTML 页面把整条链路跑通，确认域名、DNS、HTTPS 都没问题。这一步也可以直接跳到第 7 步。

Workers & Pages → Create → Pages ，会看到两个选项：
- Import an existing Git repository（连 Git 自动部署）
- Drag and drop your files（拖拽上传）← 这次选这个
填项目名，比如 goodexts-xdown，页面会提示 "Your project will be deployed to goodexts-xdown.pages.dev"，点 Create project。
上传文件：可以选文件夹，也可以传一个 zip。zip 里 index.html 要在根目录，不要多套一层文件夹。
看到 "2/2 files uploaded / All files were successfully uploaded" 后点 Deploy site。
部署完成后访问 https://goodexts-xdown.pages.dev 确认页面正常。

绑定子域名

进入项目 → Custom domains → Set up a custom domain。
输入 xdown.goodexts.com，点 Continue。
Cloudflare 会自动提示要添加的记录：

Type	Name	Content	TTL
CNAME	xdown	goodexts-xdown.pages.dev	Auto

点 Activate domain 。状态从 Initializing 变为 Active 即可访问，HTTPS 证书是自动签发的，不用做任何事。

前提： 域名的 DNS 必须已经托管在 Cloudflare（第 3、4 步）。这样 Cloudflare 能自动帮你加 CNAME 记录，不用手动去 DNS 页面配。

验证一下：

bash 复制代码

curl -I https://xdown.goodexts.com/
# HTTP/2 200 就是成功

拖拽上传的局限： 每次更新都要手动重新上传，而且 拖拽上传的项目后续不能改成连接 Git。想要"推送即部署"，得新建一个 Git 项目（见第 9、10 步）。所以如果你一开始就打算长期维护，可以直接跳过这一步。

7. 第五步：用 Nuxt 4 搭建正规的静态官网

一个页面的纯 HTML 很快就不够用了：要有首页、隐私政策、服务条款、联系我们，还要 SEO、结构化数据、共用页头页脚。我选了 Nuxt 4 做静态生成（SSG），最终产物仍然是纯静态文件，完全适合 Pages 免费托管。

7.1 目录结构

复制代码

xdown-website/
├── app/
│   ├── app.vue                  # 布局：页头 + 页面 + 页脚
│   ├── assets/css/main.css      # 全站样式（CSS 变量做主题）
│   ├── components/
│   │   ├── SiteHeader.vue
│   │   ├── SiteFooter.vue
│   │   └── ContactChannels.vue
│   ├── config/site.ts           # 站点名、商店链接、联系方式：唯一数据源
│   └── pages/
│       ├── index.vue            # 首页：Hero、功能图文、使用步骤、FAQ、CTA
│       ├── privacy-policy.vue
│       ├── terms-of-service.vue
│       └── contact-us.vue
├── public/
│   ├── images/                  # 产品图、分享图
│   ├── icon.png
│   ├── _redirects               # Cloudflare Pages 重定向规则
│   ├── robots.txt
│   └── sitemap.xml
├── nuxt.config.ts
├── package.json
└── pnpm-workspace.yaml

Nuxt 4 的新目录约定：页面、组件都放在 app/ 下面，和 Nuxt 3 不同。

7.2 package.json

json 复制代码

{
  "name": "xdown-website",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^4.5.2",
    "vue": "^3.5.43",
    "vue-router": "^4.5.0"
  }
}

7.3 nuxt.config.ts

ts 复制代码

import { site } from './app/config/site'

export default defineNuxtConfig({
  compatibilityDate: '2026-09-01',
  devtools: { enabled: false },
  css: ['~/assets/css/main.css'],
  app: {
    head: {
      htmlAttrs: { lang: 'en' },
      meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
      link: [
        { rel: 'icon', type: 'image/png', href: '/icon.png' },
        { rel: 'apple-touch-icon', href: '/icon.png' },
      ],
    },
  },
  runtimeConfig: { public: { siteUrl: site.url } },
  // 预渲染：从首页开始爬所有内部链接，每个页面都生成成静态 HTML
  nitro: { prerender: { crawlLinks: true, routes: ['/'] } },
})

7.4 站点配置集中管理

联系方式、商店链接只写在一处，全站引用，改一次处处生效：

ts 复制代码

// app/config/site.ts
export const site = {
  name: 'X Video Downloader',
  url: 'https://xdown.goodexts.com',
  storeUrl: 'https://chromewebstore.google.com/detail/...',
  parent: { name: 'GoodExts', url: 'https://goodexts.com' },
  contact: {
    email: 'you@example.com',
    directChat: 'https://wa.me/<你的号码>',
    whatsappGroup: 'https://chat.whatsapp.com/<邀请码>',
    telegramGroup: 'https://t.me/+<邀请码>',
  },
}

7.5 SEO 要点

每个页面用 useSeoMeta + useHead 设置标题、描述、canonical 和分享卡片：

ts 复制代码

useSeoMeta({
  title,
  description,
  ogTitle: title,
  ogDescription: description,
  ogType: 'website',
  ogUrl: site.url,
  ogImage: `${site.url}/images/og-image.png`,   // 1200×630
  ogImageWidth: 1200,
  ogImageHeight: 630,
  twitterCard: 'summary_large_image',
})
useHead({ link: [{ rel: 'canonical', href: site.url }] })

首页还加了 JSON-LD 结构化数据（SoftwareApplication + FAQPage），有机会让 FAQ 直接出现在搜索结果里。

7.6 Cloudflare Pages 的重定向文件

public/_redirects，构建后会原样复制到输出目录，Pages 会自动识别：

复制代码

/privacy /privacy-policy 301
/privacy/ /privacy-policy 301
/terms /terms-of-service 301
/contact /contact-us 301

这一步的意义：之前在商店后台填过 /privacy/ 这种旧链接，改了页面路径后旧链接也不会 404。

7.7 安装与构建（pnpm 11 的坑）

bash 复制代码

pnpm install

pnpm 10 以后默认 不执行依赖的安装脚本，会报：

复制代码

[ERR_PNPM_IGNORED_BUILDS] Ignored build scripts: esbuild@0.28.2
Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.

esbuild 需要跑安装脚本下载平台二进制，不放行的话后面构建会失败。在项目根目录建 pnpm-workspace.yaml：

yaml 复制代码

allowBuilds:
  esbuild: true

再装一次，然后生成静态站：

bash 复制代码

pnpm install
pnpm generate

成功时会看到：

复制代码

[nitro] Prerendered 10 routes in 0.876 seconds
[nitro] √ Generated public .output/public

产物目录是 .output/public，这个路径后面配置 Cloudflare 要用。本地预览：

bash 复制代码

npx serve .output/public

7.8 产品配图

落地页的质感主要靠产品图。我写了一份图片需求单（文件名、尺寸、每张图画什么、禁止出现的内容），交给 AI 图像工具批量生成，然后用 Pillow 统一裁剪和压缩成 WebP：

文件	尺寸	用途
`og-image.png`	1200×630	社交平台分享卡片
`hero.webp`	1600×1000	首屏大图
`feature-*.webp`	1200×900	每个功能块的配图

图片记得写 width、height（避免布局跳动），首屏图加 fetchpriority="high"，其余加 loading="lazy"。

8. 第六步：代码推到 GitHub

用 GitHub CLI 一条命令建仓库：

bash 复制代码

cd xdown-website
git init
git symbolic-ref HEAD refs/heads/main     # 老版本 git 不支持 git init -b main 时用这个
git add -A
git commit -m "Initial Nuxt 4 static site"
gh repo create <你的用户名>/xdown-website --private --source . --remote origin --push

.gitignore 至少包含：

复制代码

node_modules
.nuxt
.output
dist
.env

坑：SSH 推送没权限

gh repo create 会成功创建仓库，但如果 gh 配置的协议是 SSH，而本机没有配 SSH key，推送会失败：

复制代码

Please make sure you have the correct access rights and the repository exists.

最省事的办法是改用 HTTPS，并让 gh 充当凭据：

bash 复制代码

git remote set-url origin https://github.com/<你的用户名>/xdown-website.git
git -c "credential.helper=!gh auth git-credential" push -u origin main

或者一劳永逸：

bash 复制代码

gh auth setup-git

9. 第七步：Cloudflare Pages 连接 GitHub，实现推送即部署

9.1 授权 GitHub（只需一次）

Workers & Pages → Create → Pages → Import an existing Git repository → Get started。
在 GitHub 标签下点 Connect GitHub，跳到 GitHub 授权页。
仓库权限建议选 Only select repositories ，只勾需要部署的仓库（比如 xdown-website、goodexts-website），点 Install & Authorize。
回到 Cloudflare，能看到仓库列表就成功了。以后新建网站仓库，要去 GitHub → Settings → Applications → Cloudflare Workers and Pages → Configure 里把新仓库勾上。

9.2 创建项目与构建配置

选中仓库，点 Begin setup，按下表填：

配置项	填写
Project name	`xdown-website`（决定 `xxx.pages.dev` 的前缀）
Production branch	`main`
Framework preset	None（不选也行，下面手动填）
Build command	`NITRO_PRESET=static pnpm generate`
Build output directory	`.output/public`
Root directory	留空
Environment variables	`NODE_VERSION` = `22`

点 Save and Deploy，可以看到构建过程：Initializing build environment → Cloning git repository → Building application → Deploying。

9.3 最大的坑：`Output directory ".output/public" not found`

我第一次构建时，Build command 填的是 pnpm generate，日志前面一切正常，最后却失败了：

复制代码

[success] [nitro] Generated public dist
[info] Generated dist/_headers
[info] [nitro] Adding Nitro fallback to `_redirects` to handle all unmatched routes.
...
Validating asset output directory
Error: Output directory ".output/public" not found.
Failed: build output directory not found

原因： Nuxt 的服务端引擎 Nitro 会自动识别运行环境。在 Cloudflare Pages 的构建机里，它自动切换成了 cloudflare_pages 预设，产物输出到了 dist/，而且还往 _redirects 里塞了一条兜底规则，和本地的 .output/public 完全不同。

本地可以复现：

bash 复制代码

NITRO_PRESET=cloudflare_pages pnpm generate
ls   # 出现的是 dist/，没有 .output/public

解决： 在构建命令里显式指定静态预设：

bash 复制代码

NITRO_PRESET=static pnpm generate

这样本地和线上行为一致，输出目录固定为 .output/public，也不会被注入额外的重定向规则。修改后在项目 Settings → Build → Build configuration → Edit 里保存，然后推一个空提交触发重建：

bash 复制代码

git commit --allow-empty -m "Trigger Cloudflare Pages build"
git push

另一种做法是把 Output directory 改成 dist，用 Cloudflare 的预设。但我只需要纯静态站，用 static 更可控，也和本地一致。

9.4 验证

构建成功后先看预览域名：

bash 复制代码

curl -I https://xdown-website.pages.dev/
curl -I https://xdown-website.pages.dev/privacy-policy
curl -I https://xdown-website.pages.dev/not-exist    # 应该返回 404

10. 第八步：把自定义域名从旧项目迁移到新项目

同一个域名 同一时间只能绑在一个 Pages 项目上 。第 6 步用拖拽上传建的旧项目占着 xdown.goodexts.com，要先摘下来：

打开旧项目 → Custom domains ，在域名那一行点 ⋯（Domain actions）→ Remove domain → Remove domain。
打开新的 Git 项目 → Custom domains → Set up a custom domain ，输入 xdown.goodexts.com。
这次提示的 CNAME 会指向新项目：

Type	Name	Content
CNAME	xdown	xdown-website.pages.dev

Activate domain。

切换期间会有 一两分钟 访问不到，建议先在 pages.dev 预览地址确认新站没问题再切。旧项目不急着删，确认新站稳定后再删也不迟。

11. 第九步：绑定根域名和 www

主站仓库 goodexts-website 按第 9 步同样的配置建项目，然后在 同一个项目 里添加两个自定义域名：

域名	Cloudflare 自动添加的记录
`goodexts.com`	CNAME `@` → `goodexts-website.pages.dev`
`www.goodexts.com`	CNAME `www` → `goodexts-website.pages.dev`

说明：

根域名能用 CNAME 吗？ 标准 DNS 里根域名不能用 CNAME，但 Cloudflare 支持 CNAME Flattening（CNAME 展平），会自动把它解析成 IP 返回，所以这里没问题。这也是"域名必须托管到 Cloudflare"的原因之一，用别家 DNS 时根域名很难这样绑。
刚添加时状态是 Initializing ，此时访问可能返回 522 ，这是证书和路由还没就绪，等几分钟就会变成 Active。

检查：

bash 复制代码

for d in goodexts.com www.goodexts.com xdown.goodexts.com; do
  curl -s -o /dev/null -w "$d %{http_code}\n" https://$d/
done

12. 日常更新流程

从这以后，改网站就是改代码：

bash 复制代码

# 改内容，本地看一眼
pnpm dev

# 提交推送
git add -A
git commit -m "Update contact page"
git push

推送后 Cloudflare 自动构建，一般 1 分钟左右上线。每次构建在项目的 Deployments 里都有记录，出问题可以一键回滚到任意历史版本。

新增一个插件站 的完整步骤：

复制一个现有站点仓库，改 app/config/site.ts 和页面内容
gh repo create 推到 GitHub
GitHub 里给 Cloudflare 应用勾选这个新仓库
Cloudflare 新建 Pages 项目（构建配置同上）
添加自定义域名 新名字.goodexts.com
在主站的插件列表里加一条

全程 10 分钟左右。

13. 踩坑汇总

#	现象	原因	解决
1	选计划时差点选了 Pro	Pro 按钮是实心蓝色，更显眼	认准 Free $0
2	点了邮件验证链接，控制台还弹 "Verify your account"	点的是旧邮件	弹窗里 Resend email，点最新那封
3	阿里云改 DNS 要验证码	安全验证	提前准备好绑定的手机
4	切换 DNS 后解析异常	开着 DNSSEC	先在阿里云关闭 DNSSEC
5	`ERR_PNPM_IGNORED_BUILDS`	pnpm 默认不跑依赖的安装脚本	`pnpm-workspace.yaml` 里 `allowBuilds: { esbuild: true }`
6	`git init -b main` 报 unknown switch	老版本 git	`git symbolic-ref HEAD refs/heads/main`
7	`gh repo create --push` 推送失败	用了 SSH 协议但没配 key	改 HTTPS + `gh auth git-credential`，或 `gh auth setup-git`
8	Cloudflare 构建报 `.output/public not found`	Nitro 在 Cloudflare 自动切到 `cloudflare_pages` 预设，输出到 `dist`	构建命令用 `NITRO_PRESET=static pnpm generate`
9	拖拽上传的项目想改成连 Git	不支持转换	新建 Git 项目，把域名迁过去
10	添加域名提示已被占用	同一域名只能绑一个项目	先在旧项目 Remove domain
11	新绑的域名返回 522	还在 Initializing	等几分钟变 Active
12	页面源码里的邮箱变成 `[email protected]`	Cloudflare 默认开启邮箱地址混淆（Scrape Shield）	正常用户看得到；想关闭去域名的 Scrape Shield → Email Address Obfuscation
13	改了 CSS 本地没变化	浏览器缓存	URL 加 `?v=2` 或强制刷新

14. 免费额度与限制

以下以 Cloudflare 官方文档为准，政策可能调整，上线前建议再核对一遍：

Pages 静态托管：静态资源的带宽和请求不限量，对官网类站点基本等于无限。
构建次数：免费计划每月有构建次数上限（约 500 次）。一个人维护几个站，正常提交远远用不完。
单次构建时长、单个项目的文件数和单文件大小 都有上限，纯静态官网碰不到。
Workers / D1 / R2 各有自己的免费额度，本文方案没用到。等需要后端（登录、支付、表单提交、授权校验）时再加，而且可以只加在某一个子站上。
国内访问：Cloudflare 在中国大陆偶尔慢或不稳定。面向海外用户的产品不受影响；面向国内用户要慎重。

15. 附录：完整配置文件

pnpm-workspace.yaml

yaml 复制代码

allowBuilds:
  esbuild: true

public/_redirects

复制代码

/privacy /privacy-policy 301
/privacy/ /privacy-policy 301
/terms /terms-of-service 301
/contact /contact-us 301

public/robots.txt

复制代码

User-agent: *
Allow: /

Sitemap: https://xdown.goodexts.com/sitemap.xml

public/sitemap.xml

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://xdown.goodexts.com/</loc></url>
  <url><loc>https://xdown.goodexts.com/contact-us</loc></url>
  <url><loc>https://xdown.goodexts.com/privacy-policy</loc></url>
  <url><loc>https://xdown.goodexts.com/terms-of-service</loc></url>
</urlset>

Cloudflare Pages 构建配置

复制代码

Build command:          NITRO_PRESET=static pnpm generate
Build output directory: .output/public
Root directory:         (留空)
Production branch:      main
Environment variables:  NODE_VERSION = 22

最终 DNS 记录（Cloudflare 自动生成）

Type	Name	Content	Proxy
CNAME	@	goodexts-website.pages.dev	已代理
CNAME	www	goodexts-website.pages.dev	已代理
CNAME	xdown	xdown-website.pages.dev	已代理

写在最后

整套流程走下来，真正需要等待的只有 DNS 生效这一步，其余都是点几下的事。真正花时间的是 官网内容本身：产品图、功能文案、FAQ、隐私政策。基础设施零成本、零运维之后，精力就可以全部放回产品上。

线上效果：

主站：https://goodexts.com
插件子站：https://xdown.goodexts.com

零成本上线插件官网：万网域名 + Cloudflare Pages + Nuxt 4 全流程实录

目录

1. 整体架构与选型

1.1 目标

1.2 为什么不用阿里云 OSS

1.3 这套方案里用到了什么

2. 准备工作

3. 第一步：把域名加入 Cloudflare

4. 第二步：在万网（阿里云）修改 DNS 服务器

5. 第三步：验证 Cloudflare 账号邮箱（很多人卡在这里）

6. 第四步：先用"拖拽上传"快速上线一个页面

绑定子域名

7. 第五步：用 Nuxt 4 搭建正规的静态官网

7.1 目录结构

7.2 package.json

7.3 nuxt.config.ts

7.4 站点配置集中管理

7.5 SEO 要点

7.6 Cloudflare Pages 的重定向文件

7.7 安装与构建（pnpm 11 的坑）

7.8 产品配图

8. 第六步：代码推到 GitHub

坑：SSH 推送没权限

9. 第七步：Cloudflare Pages 连接 GitHub，实现推送即部署

9.1 授权 GitHub（只需一次）

9.2 创建项目与构建配置

9.3 最大的坑：Output directory ".output/public" not found

9.4 验证

10. 第八步：把自定义域名从旧项目迁移到新项目

11. 第九步：绑定根域名和 www

12. 日常更新流程

13. 踩坑汇总

14. 免费额度与限制

15. 附录：完整配置文件

pnpm-workspace.yaml

public/_redirects

public/robots.txt

public/sitemap.xml

Cloudflare Pages 构建配置

最终 DNS 记录（Cloudflare 自动生成）

写在最后

9.3 最大的坑：`Output directory ".output/public" not found`