Hexo 博客连接 GitHub 实现自动部署史上最详细教程

Hexo 博客连接 GitHub 实现自动部署史上最详细教程

为什么要用 GitHub 自动部署？

之前我们手动生成静态文件后，需要手动上传到 Cloudflare Pages。每次写完文章都要重复这个过程，很麻烦。

连接 GitHub 后：写完文章 → git push 推送到 GitHub → Cloudflare 自动检测到更新 → 自动部署上线

好处：

  • 不用每次手动上传
  • 文章版本管理（可以回溯历史版本）
  • 多设备同步（在任何电脑都能继续写文章）

整体流程

1
2
3
4
5
本地写文章 → git 提交 → git 推送 → GitHub 仓库
                                            ↓
                                      Cloudflare Pages
                                            ↓
                                       网站上线

第一步：注册 GitHub 账号

操作步骤

  1. 打开浏览器，访问 https://github.com/
  2. 点击 Sign up（注册）
  3. 填写信息：
    • Email address：你的邮箱
    • Password：设置密码
    • Username：你想用的用户名（之后会成为你的仓库地址，如 https://github.com/你的用户名）
  4. 按提示完成验证（勾选图形验证码）
  5. 选择免费计划（Free），点 Continue
  6. 个性化设置可以跳过

注册完成后会看到什么？

进入 GitHub 主页，界面是英文的。右上角显示你的用户名，左侧是仓库列表（刚开始是空的）。

第二步：创建仓库

什么是仓库？

仓库（Repository）就是存放代码/文章的地方，相当于一个文件夹，但可以在线访问和协作。

操作步骤

  1. 点击页面左上角的 + 按钮
  2. 选择 New repository
  3. 填写仓库信息：
    • Repository name：填 my-blog（或其他名字，不能有中文）
    • Description：可选，描述一下这个仓库
    • Public / Private：选 Public（免费，Cloudflare 才能访问）
    • Add a README file：不要勾选（我们用已有的）
    • Add .gitignore：选 None
    • Choose a license：选 None
  4. 点击 Create repository

创建完成后会看到什么？

进入仓库页面，地址类似 https://github.com/你的用户名/my-blog，显示空仓库，提示：

1
2
Quick setup — if you've done this kind of page before
Get started by creating a new file or uploading an existing files.

第三步：在本地初始化 Git

什么是 Git？

Git 是一个版本管理工具，可以记录文件的修改历史，方便协作和回溯。

操作步骤

打开 Ubuntu 终端，进入博客目录：

1
cd ~/my-blog

初始化仓库

1
git init

按回车后会看到什么？

显示：

1
Initialized empty Git repository in /home/你的用户名/my-blog/.git/

说明 Git 仓库创建成功。

第四步：配置 Git 用户信息

操作步骤

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub邮箱"

这两行命令只需要运行一次，之后在所有仓库都有效。

第五步：关联 GitHub 仓库

操作步骤

1
git remote add origin https://github.com/你的用户名/my-blog.git

把 你的用户名 换成你真实的 GitHub 用户名。

验证关联

1
git remote -v

应该显示：

1
2
origin  https://github.com/你的用户名/my-blog.git (fetch)
origin  https://github.com/你的用户名/my-blog.git (push)

第六步：添加到 .gitignore

为什么要添加？

有些文件不应该上传到 GitHub，比如：

  • node_modules/（依赖包，太大）
  • .deploy_git/（部署生成的文件）
  • db.json（数据库文件）

操作步骤

1
nano .gitignore

在编辑器中添加以下内容：

1
2
3
4
5
node_modules/
public/
.deploy_git/
db.json/
*.log

保存退出（Ctrl + O，回车，Ctrl + X）。

第七步：提交所有文件

什么是提交？

提交（Commit）相当于给当前的文件状态”拍一张快照”，并写下说明。

操作步骤

1
git add .

. 表示添加当前目录所有文件。

按回车后会看到什么？

不会显示任何输出，这是正常的。git add 只是把文件放入”暂存区”。

提交

1
git commit -m "initial commit"

按回车后会看到什么？

显示类似：

1
2
3
[main (root-commit) abc1234] initial commit
 XX files changed, XXX insertions(+), XXX deletions(-)
 create mode 100644 ...

说明提交成功！

第八步：推送到 GitHub

操作步骤

1
2
git branch -M main
git push -u origin main

按回车后会看到什么？

第一次推送会要求登录 GitHub：

1
Username for 'https://github.com':

输入你的 GitHub 用户名，回车。

1
Password for 'https://你的用户名@github.com':

输入你的 GitHub 密码（输入时不显示字符），回车。

注意：如果是 GitHub 账号开启了两步验证，需要使用 Personal Access Token 而不是密码。创建方法见下文。

登录成功后开始上传，显示上传进度：

1
2
3
4
5
6
7
8
Enumerating objects: XX, done.
Counting objects: 100% (XX/XX), done.
Writing objects: 100% (XX/XX), XX KiB | XX KiB/s, done.
Total XX (delta XX), reused XX (delta XX)
remote: Resolving deltas: 100% (XX/XX), done.
To https://github.com/你的用户名/my-blog.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

完成后去 GitHub 刷新页面

应该能看到所有文件了！包括：

  • _config.yml
  • package.json
  • source/ 文件夹
  • themes/ 文件夹
  • 等等

第九步：创建 Personal Access Token（如果需要）

什么时候需要？

如果你的 GitHub 开启了两步验证（强烈建议开启），密码就不能用了，需要用 Token 代替。

操作步骤

  1. 点击右上角头像 → Settings
  2. 左边菜单往下拉，点 Developer settings
  3. 点 Personal access tokens → Tokens (classic)
  4. 点 Generate new token
  5. 填写：
    • Note：随便填，如 hexo-deploy
    • Expiration：选 No expiration（永不过期）或具体日期
    • Select scopes：勾选 repo（完全控制仓库）
  6. 点 Generate token
  7. 重要：页面会显示一串 Token，只能看一次！复制保存好

使用 Token 登录

推送时，密码输入框输入这串 Token（不是你的 GitHub 密码）。

第十步：连接 Cloudflare Pages

操作步骤

  1. 打开 https://dash.cloudflare.com/ → 登录
  2. 左边菜单找到 Workers & Pages
  3. 点 Create application
  4. 选择 Connect to Git
  5. 如果还没连接 GitHub，点 Authorize Cloudflare 授权
  6. 选择刚才创建的仓库 my-blog
  7. 配置构建：
    • Production branch：填 main
    • Build command：留空（Hexo 是本地构建好的）
    • Build output directory：填 public
  8. 点 Save and Deploy

等待部署

页面会显示部署进度，等几分钟。成功后显示类似：

1
2
3
✓ 部署完成
✓ 您的网站已在以下网址可用:
https://xxx.pages.dev

第十一步：绑定自定义域名（可选）

操作步骤

  1. 在 Cloudflare Pages 页面，点你的项目
  2. 点 Custom domains
  3. 输入你的域名，如 blog.ccwu.cc
  4. 点 Add domain
  5. 按照提示在 DNS 设置中添加记录

以后写文章的完整流程

以后每次写新文章，流程变成：

1. 写文章

用 Markdown 写，保存到 source/_posts/ 目录。

2. 本地预览（可选）

1
2
cd ~/my-blog
hexo server

打开浏览器访问 http://localhost:4000 预览。

3. 生成静态文件

1
2
hexo clean
hexo generate

4. 提交并推送

1
2
3
git add .
git commit -m "添加新文章：文章标题"
git push

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
2
3
git clone https://github.com/你的用户名/my-blog.git
cd my-blog
npm install

就能同步下来，继续写。

完整命令回顾

1
2
3
4
5
6
7
8
9
10
11
# 第一次设置
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

# 推送文章
cd ~/my-blog
hexo clean
hexo generate
git add .
git commit -m "更新博客"
git push

搞定！以后写文章就是这么简单：写完 → git push → 自动上线！