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

最近我做了一个极简风格的个人 Geek 博客项目本身没有复杂框架只是一个纯静态站点index.html assets/ main.js style.css posts/ index.json hello-world.html因为它是静态博客所以非常适合部署到 Cloudflare Pages。Cloudflare Pages 免费、速度快、自带 HTTPS而且部署静态站点的流程非常轻量。本文记录一下完整部署过程。C:\Users\86182\Desktop\我的博客可以上瘾了一、项目结构我的博客目录如下我的博客可以上瘾了/ ├─ 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 即可。二、安装并使用 WranglerCloudflare 官方提供了命令行工具 Wrangler可以直接从终端创建和部署 Pages 项目。我使用的是npx方式运行 Wranglernpx wrangler第一次部署前需要登录 Cloudflarenpx wrangler login执行后浏览器会打开 Cloudflare 授权页面确认授权即可。授权成功后页面会提示Authorization granted to Wrangler You can develop and deploy Workers and Pages directly from your terminal.这说明 Wrangler 已经可以操作当前 Cloudflare 账号下的 Workers 和 Pages 资源。三、创建 Cloudflare Pages 项目我给这个博客创建的 Pages 项目名是geek-blog创建命令如下npx wrangler pages project create geek-blog --production-branch main创建成功后Cloudflare 返回了项目默认域名https://geek-blog-aw8.pages.dev/这个域名就是 Cloudflare Pages 自动分配的免费二级域名。四、部署当前文件夹因为博客是纯静态项目所以直接在博客根目录执行npx wrangler pages deploy.--project-name geek-blog其中.表示部署当前目录--project-name geek-blog指定部署到刚刚创建的 Pages 项目部署过程中 Wrangler 会上传当前目录里的静态文件Uploading... (0/6) Uploading... (2/6) Uploading... (4/6) Uploading... (6/6) Success! Uploaded 6 files Deploying... Deployment complete!部署成功后会得到一个本次部署的预览地址例如https://f20aaefc.geek-blog-aw8.pages.dev同时稳定生产地址也可以访问https://geek-blog-aw8.pages.dev/五、验证部署结果部署完成后我访问了首页地址https://geek-blog-aw8.pages.dev/页面正常打开。同时也验证了文章索引文件https://geek-blog-aw8.pages.dev/posts/index.json返回状态码为200说明静态资源也已经正确部署。六、部署中遇到的小问题部署过程中我遇到过一个认证问题Not logged in. Could not authenticate because no credentials were found解决方法是重新执行npx wrangler login然后在浏览器里授权 Wrangler 访问 Cloudflare 账号。授权完成后再执行部署命令即可。七、最终效果最终我的个人 Geek 博客成功部署到了 Cloudflare Pageshttps://geek-blog-aw8.pages.dev/以后如果修改了博客内容只需要重新执行npx wrangler pages deploy.--project-name geek-blogCloudflare Pages 就会自动生成一次新的部署并更新线上站点。总结这次部署流程非常简单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 是非常值得尝试的部署方案。