极致流畅:GitHub + Cloudflare 自动化部署与更新指南
这篇文档记录了本个人博客如何通过 GitHub Desktop 结合 Cloudflare 实现现代前端领域最高级的 “全自动发文发布” (CI/CD) 体验。学会这套流程后,你后续的一切发文、建站、改样式,将完全告别烦人的黑色终端和构建等待时间!
一、为什么我们选择这种自动化方案?
以往的传统流程是:本地写文章 -> 本地等待编译器打包几十秒(生成 dist)-> 执行上传命令 -> 刷新网页。这个流程极为繁琐,而且假如电脑坏了,所有没传上去的核心源码就会丢失。
新的自动化流程极其优雅:
- 你的电脑只管最轻量级的源文件(也就是写文字、敲代码)。
- GitHub 负责当你的云端超级保险箱,永久保存你每一次更改(版本控制)。
- Cloudflare 作为拥有无尽算力的超级打工人,时刻监视你的 GitHub 并在它自己的顶级服务器上替你完成编译、打包和全球分发。
💡 内行释疑:为什么云端没有
node_modules和dist?
因为你的项目含有.gitignore文件。云端仓库必须纯净(只带菜谱),当你每次触发更新时,Cloudflare 会根据你的package.json在云端现场下载所有的依赖并临时凭空生成全新的dist网页包散布全球。这保证了你的备份空间极小,传送快如闪电。
二、初始连接设置(一生只需配置一次)
一旦完成了下述连接,这个设置你以后一辈子都不用再碰了。
1. 确保代码在 GitHub(推荐使用 GitHub Desktop 软件操作)
- 打开
GitHub Desktop,点击顶部菜单File->Add Local Repository... (添加本地仓库)。 - 选中你装满博客源码的本电脑文件夹(如:
/Users/carlosfu/Projects/latest)。- **⚠️ 避坑警告:如果在某个弹窗里警告该目录不是仓库,红字下有一条蓝色的
create a repository,点击它!然后在最后弹出的框里千万不要修改名字,强行保持默认!**点最底部的Create Repository。如果改了名字,软件会错误地给你套娃生出一个空文件夹。
- **⚠️ 避坑警告:如果在某个弹窗里警告该目录不是仓库,红字下有一条蓝色的
- 左下方
Summary填入门票文字(如:首次建库打包),点击蓝色的Commit to main(按件打包)。 - 顶部点击大蓝色按钮
Publish repository(传往云端),进度条走完即可发送。
2. 让 Cloudflare 监视你的代码库
登陆 Cloudflare 对应你项目的 Git 设置页:
- 存储库 (Repository):选择在 GitHub 上刚建好的网站主库(例如
oneuie-blog)。 - 分支 (Branch):选择
main。 - 构建命令 (Build Command):填入 👉
npm run build(很重要)。 - 部署命令 (Deploy Command):填入 👉
npx wrangler deploy(保持默认)。 - 点击右下角 连接(Save and Deploy)。Cloudflare 就会跑起绿字终端,全自动抓取并在云端部署!
三、📝 日常更新与发文流(只需 3 次点击)
配置好了连接枢纽后,这就是你今后无论写文章,还是改 Bug 的终极更新日常:
第 1 步:安心专注地写文章
- 在代码编辑器里创建一个新的 Markdown 文件,写好你那篇华丽长文的大纲、配置好发布日期。保存。
第 2 步:打开 GitHub Desktop
- 切换到软件后,它就像电子眼一样,瞬间在左侧泛黄、泛绿的地方清楚列出你刚刚写的所有新文章或改动的代码。
- 鼠标移向左下角的
Summary(必填标题)框,随便写一句话,比如:“发布新文章:教你搭建Astro”。 - 点击正下方硕大的蓝色按键:
Commit to main(打好封箱)。
第 3 步:发射至云端
- 点击软件顶部中心的蓝色按钮:
Push origin(如果软件太窄,它可能缩在顶栏叫Push)。 - 结束!现在你可以直接关闭软件走人了!
**底层逻辑:**你在鼠标上这轻松的 3 次点击,在系统深处完完全全、分毫不差地等同于你在传统死板终端里枯燥地敲黑板拼写出的经典连招:
git add .
git commit -m "发布新文章"
git push
四、进阶技能:如何随时“吃后悔药”(版本回滚)
Git 和 Cloudflare 这套架构最强大的优势就在于绝对安全。如果遇到网站崩了,随时可以倒带,请按以下两种情况操作:
情况一:写代码到一半崩了(未打包 Commit)
你在本地瞎改了一通,突然网页白屏了,想回到上一次的健康状态。 解药:一键废弃(Discard)
- 打开
GitHub Desktop。 - 看到左侧绿油油的文件列表,对着最上方显示
X changed files的位置 右键 -> 选择Discard all changes...(放弃所有更改)。 - 电脑会瞬间把你这些文件强制倒转回上一次打包的时刻!穿越时空重头再来。
情况二:已经发布上网,发现有个致命 Bug
你已经点了 Commit 和 Push 发向全球,但一查线上有严重错误,想立刻撤回!
解药:反向撤销(Revert)
- 打开
GitHub Desktop,点击软件左侧标签,从Changes切换到History (历史记录)。 - 这里记录了你所有的发车单。找到那次搞砸的打包记录。
- 对着它右键 -> 选择
Revert commit(撤销这次打包)。 - 软件会自动在最上方生成一个新的“反向抵消卡”,把你写错的代码删掉。
- 去点顶部的按键
Push origin(把撤回指令推上云端)。 - 一分钟后,Cloudflare 收到指令,会自动把线上网页拉回上一个完美版本!
五、终端命令行拓展修复(写给高级用户)
虽然我们通过好用的客户端工具绕过了终端指令的敲击,但其实你的 Mac 底层系统是自带 Git 命令的。如果你未来想要切回这种极客模式(在终端敲 git pull, git push),但遇到了大片报错:
xcrun: error: unable to load libxcrun (incompatible architecture)
这是换机或升级系统留下的架构适配报错,请使用 Mac 终端应用 依次运行下划两行代码完成重铸:
sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install
六、紧急救援:当 GUI 解决不了时的命令行强制回滚
虽然 GitHub Desktop 已经覆盖了 99% 的场景,但有时候你可能会遇到“客户端显示已同步,但代码依然是错的”或者“想彻底推倒重来”的情况,这时候可以使用终极核武器指令。
1. 场景:代码改乱了,想彻底放弃并回到“最后一次正确的那一刻”
如果你只是在电脑上乱试一气,没打算保存(也没提交),想瞬间把所有文件重置回 GitHub/本地 Git 记录里最干净的状态:
# 强制重置到当前版本(HEAD),抹除所有未提交的修改
git reset --hard HEAD
⚠️ 警告: 这个操作是不可逆的。一旦运行,你刚才那些还没打包的临时修改会在这台电脑上被彻底删掉。
2. 场景:已经 Commit 了错误代码,想彻底“毁尸灭迹”回退
如果你不小心把错误打包(Commit)了,发现 git reset --hard HEAD 没用了(因为它重置回的是那个错误的版本),你需要回到再往前的一个 ID:
- 找到 ID:在终端输入
git log --oneline -n 5,找到那个还没出错的 ID(比如846fd78)。 - 强制穿梭:
git reset --hard <那个正确的 ID>
3. 本次实战小贴士 (Experience Note)
- Git 状态检查:如果终端显示
nothing to commit, working tree clean,说明你的错误已经变成了正式记录。这时候重置回当前版本是没意义的,必须找到“前一个正确的 ID”运行回退。 - 保存 vs 提交:在 Git 的逻辑里,“手动保存文件”和“Git 打包提交”是两回事。只要没 Commit,哪怕你手动 Save 了千万次,
git reset --hard HEAD也能帮你一键回转。 - 强制同步 GitHub:如果你想让本地彻底认准 GitHub 上的代码,运行
git fetch origin然后git reset --hard origin/main。
更新于 2026-04-18:补充了基于真实排障场景的命令行强制恢复指南。 经过简单的图形界面统一配置以后,你的本电脑就又是健康敏捷的全栈工作站了。