使用 Cloudflare Pages 部署个人 Geek 博客全过程记录

最近我做了一个极简风格的个人 Geek 博客，项目本身没有复杂框架，只是一个纯静态站点：

text 复制代码

index.html
assets/
  main.js
  style.css
posts/
  index.json
  hello-world.html

因为它是静态博客，所以非常适合部署到 Cloudflare Pages。Cloudflare Pages 免费、速度快、自带 HTTPS，而且部署静态站点的流程非常轻量。

本文记录一下完整部署过程。

C:\Users\86182\Desktop\我的博客可以上瘾了

一、项目结构

我的博客目录如下：

text 复制代码

我的博客可以上瘾了/
├─ index.html
├─ assets/
│  ├─ main.js
│  └─ style.css
└─ posts/
   ├─ index.json
   └─ hello-world.html

其中：

index.html 是博客首页
assets/style.css 是样式文件
assets/main.js 负责加载文章列表
posts/index.json 是文章索引
posts/hello-world.html 是第一篇文章页面

由于没有使用 Vue、React、Vite 等构建工具，所以部署时不需要执行 npm run build，直接把整个目录上传到 Cloudflare Pages 即可。

二、安装并使用 Wrangler

Cloudflare 官方提供了命令行工具 Wrangler，可以直接从终端创建和部署 Pages 项目。

我使用的是 npx 方式运行 Wrangler：

bash 复制代码

npx wrangler

第一次部署前，需要登录 Cloudflare：

bash 复制代码

npx wrangler login

执行后浏览器会打开 Cloudflare 授权页面，确认授权即可。

授权成功后，页面会提示：

text 复制代码

Authorization granted to Wrangler
You can develop and deploy Workers and Pages directly from your terminal.

这说明 Wrangler 已经可以操作当前 Cloudflare 账号下的 Workers 和 Pages 资源。

三、创建 Cloudflare Pages 项目

我给这个博客创建的 Pages 项目名是：

text 复制代码

geek-blog

创建命令如下：

bash 复制代码

npx wrangler pages project create geek-blog --production-branch main

创建成功后，Cloudflare 返回了项目默认域名：

text 复制代码

https://geek-blog-aw8.pages.dev/

这个域名就是 Cloudflare Pages 自动分配的免费二级域名。

四、部署当前文件夹

因为博客是纯静态项目，所以直接在博客根目录执行：

bash 复制代码

npx wrangler pages deploy . --project-name geek-blog

其中：

. 表示部署当前目录
--project-name geek-blog 指定部署到刚刚创建的 Pages 项目

部署过程中 Wrangler 会上传当前目录里的静态文件：

text 复制代码

Uploading... (0/6)
Uploading... (2/6)
Uploading... (4/6)
Uploading... (6/6)
Success! Uploaded 6 files
Deploying...
Deployment complete!

部署成功后，会得到一个本次部署的预览地址，例如：

text 复制代码

https://f20aaefc.geek-blog-aw8.pages.dev

同时，稳定生产地址也可以访问：

text 复制代码

https://geek-blog-aw8.pages.dev/

五、验证部署结果

部署完成后，我访问了首页地址：

text 复制代码

https://geek-blog-aw8.pages.dev/

页面正常打开。

同时也验证了文章索引文件：

text 复制代码

https://geek-blog-aw8.pages.dev/posts/index.json

返回状态码为 200，说明静态资源也已经正确部署。

六、部署中遇到的小问题

部署过程中我遇到过一个认证问题：

text 复制代码

Not logged in. Could not authenticate because no credentials were found

解决方法是重新执行：

bash 复制代码

npx wrangler login

然后在浏览器里授权 Wrangler 访问 Cloudflare 账号。

授权完成后，再执行部署命令即可。

七、最终效果

最终，我的个人 Geek 博客成功部署到了 Cloudflare Pages：

text 复制代码

https://geek-blog-aw8.pages.dev/

以后如果修改了博客内容，只需要重新执行：

bash 复制代码

npx wrangler pages deploy . --project-name geek-blog

Cloudflare Pages 就会自动生成一次新的部署，并更新线上站点。

总结

这次部署流程非常简单：

bash 复制代码

npx wrangler login
npx wrangler pages project create geek-blog --production-branch main
npx wrangler pages deploy . --project-name geek-blog

对于纯 HTML、CSS、JavaScript 写的个人博客来说，Cloudflare Pages 是一个非常舒服的部署选择：

免费
自带 HTTPS
全球 CDN 加速
不需要服务器
静态文件直接部署
后续更新只需要一条命令

如果你也有一个静态个人主页、作品集、技术博客，Cloudflare Pages 是非常值得尝试的部署方案。