快速开始
从克隆到上线的一条线:跑起来、改站点信息、部署
最近更新 2026 年 10 月 21 日
这页带你从克隆仓库走到线上可访问。全程只有四个阶段,每一步都给出可复制的命令。
做完之后你会得到一个跑在 Cloudflare Workers 上的站点,名称、Logo、导航都是你自己的。
前提条件
| 需要 | 说明 |
|---|---|
| Node.js 22 / 24 | 偶数 LTS。奇数版本(23 / 25)不受 vitest@5 支持 |
| pnpm | 版本由 package.json 的 packageManager 指定,不要用 pnpm 9 |
| Cloudflare 账号 | 免费套餐足够。没有也能先在本地跑通 |
bash
node --version # v22.x 或 v24.x
pnpm --version设置
1. 安装依赖
bash
pnpm install2. 配置本地资源
bash
pnpm run setup脚本会问你项目名,然后创建(或复用)D1 数据库、R2 bucket、KV namespace,生成认证密钥, 把结果写进 .env 与 wrangler.jsonc。
没有登录 Cloudflare 时脚本会提示,但仍可继续——本地开发用 D1 的 SQLite 模拟, 不需要真实资源。登录方式:
bash
pnpm exec wrangler login3. 启动
bash
pnpm dev打开 http://localhost:3000。若数据库没初始化成功,手动跑一次:
bash
pnpm exec wrangler d1 migrations apply DB --local4. 改站点信息
所有站点信息集中在 src/config/website.ts:
ts
// src/config/website.ts
export function createWebsiteConfig(env: PublicEnv): WebsiteConfig {
return {
baseUrl: env.VITE_BASE_URL,
metadata: {
name: 'Jerbix', // ← 改成你的站点名
images: { ogImage: '/logo.png', /* … */ },
},
docs: { enabled: true }, // ← 不需要文档站就改 false
// …
}
}完整字段见网站配置。
5. 部署
bash
pnpm deploy依次执行生产 env 校验 → 构建 → 客户端 bundle 泄漏检查 → wrangler deploy。
本地.env不会自动成为生产 secret。部署前需用wrangler secret put单独配置, 且不得把 secret 放进VITE_变量——它们会进入浏览器 bundle。
想推送到 main 就自动部署,见 Cloudflare · 自动部署。
命令
| 命令 | 作用 |
|---|---|
pnpm dev | 开发服务器,端口 3000 |
pnpm build | 生产构建 |
pnpm deploy | 校验 → 构建 → 检查 → 部署 |
pnpm check | Biome + TypeScript + env + locale(提交前必跑) |
pnpm test | 单元与组件测试 |
参考资料
- Wrangler 配置 ——
wrangler.jsonc字段与 binding - Cloudflare D1 —— 数据库创建与迁移