Cloudflare Pages + GitHub：免费部署属于自己的个人博客

如果你已经把博客代码放在 GitHub 上，那么用 Cloudflare Pages 来部署会非常省心： 免费额度够用、自动 HTTPS、每次提交代码都能自动更新，特别适合个人博客、作品集和静态网站。 这篇文章我按从 0 到 1 的顺序，带你把博客接入 GitHub，再交给 Cloudflare 一键上线。

一、先准备好这几样东西

• 一个 GitHub 账号，用来存放博客代码。
• 一个 Cloudflare 账号，用来部署和托管域名。
• 你的博客源码，可以是纯 HTML，也可以是 Vue、React、Next、Hexo、Hugo 等项目。
• 可选：一个自己的域名，后面可以绑定成更像“个人博客”的正式地址。

二、先把博客项目上传到 GitHub

如果你本地已经写好了博客，先创建一个 GitHub 仓库，然后把代码推上去。

1. 登录 GitHub，点击右上角 New repository。
2. 填写仓库名，比如 my-blog。
3. 创建完成后，把本地项目推送到仓库。

常用命令如下：

git init → git add . → git commit -m "init blog" → git branch -M main → git remote add origin 你的仓库地址 → git push -u origin main

三、在 Cloudflare Pages 上连接 GitHub

1. 登录 Cloudflare 后，进入左侧 Workers & Pages。
2. 点击 Create application。
3. 选择 Pages，再点击 Connect to Git。
4. 授权 Cloudflare 访问你的 GitHub 仓库。
5. 选中刚刚上传的博客仓库，继续下一步。

到这里，Cloudflare 就已经能监听你的 GitHub 仓库了。后面你每次 git push，它都会自动重新部署。

四、填写构建配置

这一步要根据你的博客类型来填：

• 纯 HTML/CSS/JS 静态博客：通常不需要构建命令，输出目录一般填 . 或项目实际静态目录。
• Vue / Vite：构建命令常见为 npm run build，输出目录通常是 dist。
• React：常见也是 npm run build，输出目录看项目配置，通常是 build 或 dist。
• Hexo / Hugo：构建命令和输出目录按你所用框架填写，Hexo 常见输出目录是 public。

五、点击部署，等它自动上线

配置提交后，Cloudflare 会自动开始第一次构建。几分钟后，你会拿到一个默认地址， 一般像这样：你的项目名.pages.dev。

打开这个地址，如果能正常访问，说明你的个人博客已经成功上线了。

六、以后怎么更新博客

这也是 Cloudflare Pages 最省事的地方：

• 你继续在本地写文章、改页面。
• 改完后提交到 GitHub。
• Cloudflare 检测到新提交后，会自动重新构建并发布。
• 不需要手动上传文件，也不用自己维护服务器。

也就是说，你的博客更新流程会变成：本地修改 → git push → 自动上线。

七、绑定自己的域名

如果你不想用默认的 pages.dev 地址，可以绑定自己的域名。

1. 进入该项目的 Pages 设置页。
2. 找到 Custom domains。
3. 添加你的域名，比如 blog.xxx.com。
4. 按提示完成 DNS 配置。

如果你的域名本来就在 Cloudflare 托管，基本会非常顺手，SSL 证书也会自动处理。

八、适合拿来部署什么类型的网站

• 个人博客
• 个人主页 / 导航站
• 作品集展示页
• 文档站、教程站
• 前端练手项目和轻量营销页

九、常见问题

• 部署成功但页面样式错乱：优先检查静态资源路径和输出目录。
• GitHub 更新了但网站没变：去 Cloudflare Pages 的 Deployments 页面看构建日志是否报错。
• 二级域名打不开：检查 DNS 是否生效，或者是否填错了域名记录。
• 想部署动态接口：Pages 更偏静态内容，复杂后端建议配合 Workers 或独立服务器使用。

十、总结

如果你想要一个成本低、维护简单、还能自动更新的个人博客方案， 那么 GitHub + Cloudflare Pages 基本就是非常适合新手的一套组合。 尤其是静态博客，部署门槛低，速度和稳定性也都不错。

如果你后面还想继续做评论、表单、统计、域名优化，完全可以在这个基础上慢慢加，不需要一开始就把系统做得很重。