Hexo 博客连接 GitHub 实现自动部署史上最详细教程
为什么要用 GitHub 自动部署?
之前我们手动生成静态文件后,需要手动上传到 Cloudflare Pages。每次写完文章都要重复这个过程,很麻烦。
连接 GitHub 后:写完文章 → git push 推送到 GitHub → Cloudflare 自动检测到更新 → 自动部署上线
好处:
- 不用每次手动上传
- 文章版本管理(可以回溯历史版本)
- 多设备同步(在任何电脑都能继续写文章)
整体流程
1 | 本地写文章 → git 提交 → git 推送 → GitHub 仓库 |
第一步:注册 GitHub 账号
操作步骤
- 打开浏览器,访问 https://github.com/
- 点击 Sign up(注册)
- 填写信息:
- Email address:你的邮箱
- Password:设置密码
- Username:你想用的用户名(之后会成为你的仓库地址,如
https://github.com/你的用户名)
- 按提示完成验证(勾选图形验证码)
- 选择免费计划(Free),点 Continue
- 个性化设置可以跳过
注册完成后会看到什么?
进入 GitHub 主页,界面是英文的。右上角显示你的用户名,左侧是仓库列表(刚开始是空的)。
第二步:创建仓库
什么是仓库?
仓库(Repository)就是存放代码/文章的地方,相当于一个文件夹,但可以在线访问和协作。
操作步骤
- 点击页面左上角的 + 按钮
- 选择 New repository
- 填写仓库信息:
- Repository name:填
my-blog(或其他名字,不能有中文) - Description:可选,描述一下这个仓库
- Public / Private:选 Public(免费,Cloudflare 才能访问)
- Add a README file:不要勾选(我们用已有的)
- Add .gitignore:选 None
- Choose a license:选 None
- Repository name:填
- 点击 Create repository
创建完成后会看到什么?
进入仓库页面,地址类似 https://github.com/你的用户名/my-blog,显示空仓库,提示:
1 | Quick setup — if you've done this kind of page before |
第三步:在本地初始化 Git
什么是 Git?
Git 是一个版本管理工具,可以记录文件的修改历史,方便协作和回溯。
操作步骤
打开 Ubuntu 终端,进入博客目录:
1 | cd ~/my-blog |
初始化仓库
1 | git init |
按回车后会看到什么?
显示:
1 | Initialized empty Git repository in /home/你的用户名/my-blog/.git/ |
说明 Git 仓库创建成功。
第四步:配置 Git 用户信息
操作步骤
1 | git config --global user.name "你的GitHub用户名" |
这两行命令只需要运行一次,之后在所有仓库都有效。
第五步:关联 GitHub 仓库
操作步骤
1 | git remote add origin https://github.com/你的用户名/my-blog.git |
把
你的用户名换成你真实的 GitHub 用户名。
验证关联
1 | git remote -v |
应该显示:
1 | origin https://github.com/你的用户名/my-blog.git (fetch) |
第六步:添加到 .gitignore
为什么要添加?
有些文件不应该上传到 GitHub,比如:
node_modules/(依赖包,太大).deploy_git/(部署生成的文件)db.json(数据库文件)
操作步骤
1 | nano .gitignore |
在编辑器中添加以下内容:
1 | node_modules/ |
保存退出(Ctrl + O,回车,Ctrl + X)。
第七步:提交所有文件
什么是提交?
提交(Commit)相当于给当前的文件状态”拍一张快照”,并写下说明。
操作步骤
1 | git add . |
.表示添加当前目录所有文件。
按回车后会看到什么?
不会显示任何输出,这是正常的。git add 只是把文件放入”暂存区”。
提交
1 | git commit -m "initial commit" |
按回车后会看到什么?
显示类似:
1 | [main (root-commit) abc1234] initial commit |
说明提交成功!
第八步:推送到 GitHub
操作步骤
1 | git branch -M main |
按回车后会看到什么?
第一次推送会要求登录 GitHub:
1 | Username for 'https://github.com': |
输入你的 GitHub 用户名,回车。
1 | Password for 'https://你的用户名@github.com': |
输入你的 GitHub 密码(输入时不显示字符),回车。
注意:如果是 GitHub 账号开启了两步验证,需要使用 Personal Access Token 而不是密码。创建方法见下文。
登录成功后开始上传,显示上传进度:
1 | Enumerating objects: XX, done. |
完成后去 GitHub 刷新页面
应该能看到所有文件了!包括:
_config.ymlpackage.jsonsource/文件夹themes/文件夹- 等等
第九步:创建 Personal Access Token(如果需要)
什么时候需要?
如果你的 GitHub 开启了两步验证(强烈建议开启),密码就不能用了,需要用 Token 代替。
操作步骤
- 点击右上角头像 → Settings
- 左边菜单往下拉,点 Developer settings
- 点 Personal access tokens → Tokens (classic)
- 点 Generate new token
- 填写:
- Note:随便填,如
hexo-deploy - Expiration:选 No expiration(永不过期)或具体日期
- Select scopes:勾选 repo(完全控制仓库)
- Note:随便填,如
- 点 Generate token
- 重要:页面会显示一串 Token,只能看一次!复制保存好
使用 Token 登录
推送时,密码输入框输入这串 Token(不是你的 GitHub 密码)。
第十步:连接 Cloudflare Pages
操作步骤
- 打开 https://dash.cloudflare.com/ → 登录
- 左边菜单找到 Workers & Pages
- 点 Create application
- 选择 Connect to Git
- 如果还没连接 GitHub,点 Authorize Cloudflare 授权
- 选择刚才创建的仓库
my-blog - 配置构建:
- Production branch:填
main - Build command:留空(Hexo 是本地构建好的)
- Build output directory:填
public
- Production branch:填
- 点 Save and Deploy
等待部署
页面会显示部署进度,等几分钟。成功后显示类似:
1 | ✓ 部署完成 |
第十一步:绑定自定义域名(可选)
操作步骤
- 在 Cloudflare Pages 页面,点你的项目
- 点 Custom domains
- 输入你的域名,如
blog.ccwu.cc - 点 Add domain
- 按照提示在 DNS 设置中添加记录
以后写文章的完整流程
以后每次写新文章,流程变成:
1. 写文章
用 Markdown 写,保存到 source/_posts/ 目录。
2. 本地预览(可选)
1 | cd ~/my-blog |
打开浏览器访问 http://localhost:4000 预览。
3. 生成静态文件
1 | hexo clean |
4. 提交并推送
1 | git add . |
5. 自动部署
Cloudflare 检测到 GitHub 有新提交,自动开始部署。等待 1-2 分钟,网站就更新了!
常见问题
Q1: 推送时提示权限错误
1 | Permission denied (publickey). |
解决:配置 SSH Key,或者用 https 方式(上面教程用的是 https)。
Q2: 每次推送都要输入用户名密码?
第一次输入后,Git 会保存凭证。以后不用再输入。
Q3: 推送失败显示 “non-fast-forward”
说明远程仓库有新内容,需要先拉取:
1 | git pull origin main --allow-unrelated-histories |
然后再推送。
Q4: Cloudflare 部署失败
检查:
- 仓库是否 Public
- Build output directory 是否填
public .gitignore是否忽略了public文件夹(不应该忽略,因为 Cloudflare 需要)
Q5: 想在其他电脑继续写文章?
1 | git clone https://github.com/你的用户名/my-blog.git |
就能同步下来,继续写。
完整命令回顾
1 | # 第一次设置 |
搞定!以后写文章就是这么简单:写完 → git push → 自动上线!