小白教程：把导航站和网盘一键部署到 Cloudflare

这篇教程适合没有服务器基础的用户。

我们要完成两件事：

GitHub 自动更新导航站
GitHub 自动更新网盘
Cloudflare 托管网站
D1 保存后台数据
R2 保存图片和文件
绑定自己的域名

以后只要修改代码并推送到 GitHub，Cloudflare 就会自动更新网站。

一、先记住一句话

不是把网站地址直接复制到 Cloudflare，而是：

GitHub 仓库
        ↓
Cloudflare Pages 自动拉取
        ↓
Cloudflare 自动发布网站

所以必须保证代码已经放在 GitHub 仓库中。

导航站 GitHub 仓库：

https://github.com/yys9253462-gif/isoziyuan-nav

网盘项目建议单独创建一个 GitHub 仓库，例如：

isoziyuan-pan

如果网盘代码还没有上传到 GitHub，需要先把网盘项目文件夹上传到一个新的仓库。

二、部署导航站

第 1 步：打开 Cloudflare

进入：

https://dash.cloudflare.com

登录后点击：

Workers & Pages

然后点击：

Create application
→ Pages
→ Connect to Git

注意：

不要选择 Direct Upload

必须选择：

Connect to Git

这样以后 GitHub 更新后，Cloudflare 才会自动部署。

第 2 步：连接 GitHub

第一次使用时，Cloudflare 会要求授权 GitHub。

点击：

Connect GitHub

然后允许 Cloudflare 访问你的 GitHub 仓库。

在仓库列表中选择：

isoziyuan-nav

第 3 步：填写构建设置

如果项目是普通 HTML、CSS、JavaScript，填写：

Project name：isoziyuan-nav
Production branch：main
Build command：留空
Build output directory：.

然后点击：

Save and Deploy

等待部署完成。

部署成功后会得到一个地址：

https://isoziyuan-nav.pages.dev

先打开这个地址，确认网站可以正常访问。

三、给导航站绑定 D1 数据库

如果导航站有后台管理、导航分类、网站排序等功能，就需要配置 D1 数据库。

进入 Cloudflare：

Workers & Pages
→ D1
→ Create database

数据库名称可以填写：

isoziyuan-nav-db

创建完成后，进入这个数据库的 SQL 页面。

打开 GitHub 项目中的：

schema.sql

复制里面的全部内容，粘贴到 Cloudflare D1 的 SQL 编辑器中，然后点击：

Execute

这样导航站的数据库表就创建好了。

四、给导航站绑定 D1

进入：

Workers & Pages
→ isoziyuan-nav
→ Settings
→ Bindings
→ Add
→ D1 database

填写：

Variable name：DB
D1 database：isoziyuan-nav-db

保存后重新部署一次。

如果代码中使用的是：

env.DB

那么绑定名称必须填写：

DB

名称不一致，后台就无法读取数据。

五、配置导航站后台密码

进入：

isoziyuan-nav
→ Settings
→ Variables and Secrets
→ Add

添加：

Variable name：ADMIN_PASSWORD

勾选：

Encrypt

然后填写你的后台密码。

保存后重新部署网站。

导航站后台地址一般是：

https://isoziyuan-nav.pages.dev/admin

六、给导航站绑定自定义域名

进入：

isoziyuan-nav
→ Custom domains
→ Set up a domain

填写：

ailxw.com

如果还需要 www 域名，再添加：

www.ailxw.com

按照 Cloudflare 页面提示完成 DNS 配置即可。

不要只在 DNS 中手动添加 CNAME，应该先在 Pages 的 Custom domains 中添加域名。

七、部署网盘

网盘和导航站需要创建成两个独立的 Cloudflare Pages 项目。

进入：

Workers & Pages
→ Create application
→ Pages
→ Connect to Git

然后选择你的网盘 GitHub 仓库。

如果网盘代码还没有 GitHub 仓库：

先把本地网盘项目上传到 GitHub
再返回 Cloudflare 连接仓库

网盘项目名称可以填写：

isoziyuan-pan

八、填写网盘构建设置

如果网盘项目是普通 HTML 和 Pages Functions，填写：

Project name：isoziyuan-pan
Production branch：main
Build command：留空
Build output directory：.

确保网盘仓库中存在：

index.html
admin.html
style.css
functions/
wrangler.jsonc
schema.sql

其中：

functions/       保存后台接口
wrangler.jsonc   保存 D1 和 R2 绑定信息
schema.sql       保存数据库结构

然后点击：

Save and Deploy

部署成功后会得到：

https://isoziyuan-pan.pages.dev

九、创建网盘 R2 储存桶

R2 用来保存网盘文件。

进入：

R2 Object Storage
→ Create bucket

储存桶名称可以填写：

isoziyuan-pan-files

建议网盘单独使用一个 R2 储存桶，不要和导航图片、论坛附件混在一起。

十、创建网盘 D1 数据库

进入：

D1
→ Create database

数据库名称填写：

isoziyuan-pan-db

创建完成后，打开网盘 GitHub 项目中的：

schema.sql

复制全部内容，粘贴到 D1 的 SQL 编辑器中，点击：

Execute

这样网盘的文件记录、文件夹、取件码和分享记录就可以保存到 D1。

十一、绑定网盘 D1

进入：

isoziyuan-pan
→ Settings
→ Bindings
→ Add
→ D1 database

填写：

Variable name：DB
D1 database：isoziyuan-pan-db

保存。

十二、绑定网盘 R2

仍然进入：

isoziyuan-pan
→ Settings
→ Bindings
→ Add
→ R2 bucket

填写：

Variable name：R2
R2 bucket：isoziyuan-pan-files

保存后重新部署网盘。

如果代码中使用：

env.R2

绑定名称就必须填写：

R2

十三、配置网盘后台密码

进入：

isoziyuan-pan
→ Settings
→ Variables and Secrets
→ Add

添加以下两个 Secret：

ADMIN_PASSWORD
SESSION_SECRET

两个都要勾选：

Encrypt

其中：

ADMIN_PASSWORD：网盘后台登录密码
SESSION_SECRET：随机生成的一串安全密钥

保存后重新部署。

网盘后台地址：

https://isoziyuan-pan.pages.dev/admin

十四、给网盘绑定域名

进入：

isoziyuan-pan
→ Custom domains
→ Set up a domain

填写：

pan.ailxw.com

按照 Cloudflare 提示完成 DNS 配置。

最终访问地址：

https://pan.ailxw.com

十五、以后如何更新网站

以后不需要重新上传文件，也不需要手动部署。

只需要修改代码，然后推送 GitHub：

git add .
git commit -m "更新网站"
git push

Cloudflare 会自动完成：

拉取 GitHub 最新代码
自动构建
自动部署
更新正式网站

如果只是修改页面样式，一般几分钟内就会生效。

十六、最简单的完整流程

导航站

1. GitHub 选择 isoziyuan-nav
2. Cloudflare 创建 Pages
3. 选择 Connect to Git
4. Build command 留空
5. 输出目录填写 .
6. 创建 isoziyuan-nav-db
7. 执行 schema.sql
8. 绑定 D1，名称填写 DB
9. 设置 ADMIN_PASSWORD
10. 绑定 ailxw.com

网盘

1. 把网盘代码上传到 GitHub
2. Cloudflare 创建 Pages
3. 选择 Connect to Git
4. Build command 留空
5. 输出目录填写 .
6. 创建 isoziyuan-pan-db
7. 执行 schema.sql
8. 创建 isoziyuan-pan-files
9. 绑定 D1，名称填写 DB
10. 绑定 R2，名称填写 R2
11. 设置 ADMIN_PASSWORD
12. 设置 SESSION_SECRET
13. 绑定 pan.ailxw.com

十七、常见错误

页面能打开，但后台报错

检查：

D1 是否绑定
R2 是否绑定
绑定名称是否正确
schema.sql 是否执行
ADMIN_PASSWORD 是否设置

GitHub 更新后没有自动部署

检查：

Pages 项目是否使用 Connect to Git
生产分支是否是 main
Cloudflare 是否获得 GitHub 仓库权限

上传文件失败

检查：

R2 储存桶是否存在
R2 绑定名称是否为 R2
Pages Functions 是否部署成功

修改后仍然显示旧页面

可以尝试：

Ctrl + F5

如果仍然没有更新，检查 Cloudflare 是否设置了：

Cache Everything
Page Rules
自定义缓存规则

Direct Upload 项目怎么办

如果原来的 Pages 项目是 Direct Upload，通常不能直接切换成 GitHub 自动部署。

最简单的方法是：

重新创建一个 Pages 项目
选择 Connect to Git
连接 GitHub 仓库
重新绑定 D1、R2 和密码

十八、重要提醒

GitHub 自动部署只会同步代码，不会自动同步数据。

以下内容需要单独迁移：

D1 数据
R2 文件
导航图标
网盘文件
取件码
分享记录

如果只是新部署一套网站，建议使用：

新的 Pages 项目
新的 D1 数据库
新的 R2 储存桶
新的测试域名

确认全部正常后，再切换正式域名。

官方文档

Cloudflare Pages Git 集成

Pages Functions 绑定 D1 和 R2

D1 数据库入门

R2 创建储存桶

Pages 自定义域名