分支部署Hexo到Github

序言：为什么要备份？

在这篇文章中，我们已经将 Hexo 和 GitHub 结合起来搭建了自己的个人博客。hexo d 命令部署到 GitHub 的是 Hexo 编译后的文件，这些文件用于生成网页，但并不包含我们的博客源文件。
20240511_01
实际上，它上传到 GitHub 的内容位于我们本地目录的 .deploy_git 文件夹内：
20240511_02
我们的源文件，例如相关的 source 文件和配置文件等，都没有上传到 GitHub。因此，我们需要利用 Git 进行分支管理，对源文件进行备份。这样，我们就可以在另一台电脑上将源文件 clone 到本地，安装相应环境后继续撰写博客。

闲话少说，下面我们直接进入博客源文件备份的具体操作。

一、Hexo 博客配置首次备份

创建新分支

在 GitHub 上博客仓库下创建一个新的分支 hexo，并将其设置为默认分支。具体操作如下：
20240511_03
20240511_04
20240511_05

克隆 Hexo 分支

在本地将我们刚创建的 hexo 分支克隆到本地：
20240511_06

将克隆下来的项目中的 .git 文件复制到你的 Hexo 博客目录下：
20240511_07

注意：如果你之前搭建博客时更换过主题文件，请务必删除主题文件中的 .git 文件夹。
完成以上操作后，即可正式开始备份。

二、正式开始备份

重要提示：

  • 后续更换运维设备（即写博客的电脑），只需从此步开始备份即可。
  • 对搭建在 GitHub 或 Cloudflare Pages 等平台上的博客进行自动化更新或发布新文章，更改或添加博客内容完成后，也使用此步骤即可实现自动迭代。

1、备份 Hexo 分支（Hexo 源文件）

1）初始化本地仓库并关联远程

确保当前位于 Hexo 项目的根目录：

1
cd /path/to/your/MyBlog-Hexo

初始化 Git（如果尚未初始化）：

1
git init

关联远程仓库：

1
git remote add origin git@github.com:用户名/仓库.git

切换到 hexo 分支：

1
git checkout -b hexo

2）配置分支规则

设置默认推送分支为 hexo：

1
git push --set-upstream origin hexo

3）确认已在 .gitignore 中配置忽略文件

可以通过 cat .gitignore 命令查看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
❯ cat .gitignore
# 系统文件
.DS_Store
Thumbs.db

# 缓存文件
db.json
*.log

# 依赖目录
node_modules/

# 生成文件
public/
.deploy*/

_multiconfig.yml

# 环境文件
.env
*.env

4）确认 _config.yml 内已配置仓库地址及分支

可以通过 grep 'deploy' -C 5 _config.yml 命令查看：

1
2
3
4
5
6
7
8
9
10
11
12
❯ grep 'deploy' -C 5  _config.yml
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:用户名/仓库.git
  branch: master
  message: "自动更新: {{ now('YYYY-MM-DD HH:mm:ss') }}"

5）提交 Hexo 源文件

添加所有未忽略文件：

1
git add .

提交源文件：

1
git commit -m "备份Hexo源文件"

推送到远程 hexo 分支：

1
git push origin hexo

此时，你会在 GitHub 的 hexo 分支上看到你的源文件。

2、备份 master 分支（博客生成的静态目录）

在配置好 GitHub 密钥等相关设置后，执行以下命令即可自动上传至 GitHub：

1
2
# 生成静态文件并部署（自动推送到 master 分支）
hexo clean && hexo g && hexo d

PS：如果你希望每次更改都备份到 hexo 分支上（不建议日常使用），可以执行如下步骤：

1
2
3
4
5
hexo clean
git add .
git commit -m "备份"
git push
hexo g & hexo d

备份至此完成！

三、如何恢复博客

假设你现在更换了电脑，希望在新电脑上继续撰写博客，需要将 GitHub 上 hexo 分支上的项目克隆到本地（请注意，是你备份的那个分支）。

1、登录 GitHub，切换分支为 hexo，克隆博客仓库，进入博客的根文件夹，并安装 Hexo 博客所需依赖：

1
2
3
4
git  clone https://github.com/用户名/仓库.git
cd 仓库根目录
npm install hexo-cli
npm install hexo-deployer-git

2、安装主题。如果你的电脑上还没有 Node.js 等环境，可能还需要先安装相关环境。以 安知鱼主题 为例：

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

打开 Hexo 根目录下的 _config.yml，找到以下配置项，将主题修改为 anzhiyu：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu

3、安装 pug 和 stylus 渲染插件：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

如果无法安装，可以尝试使用 cnpm 进行安装：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save --registry=http://registry.npmmirror.com

4、执行 Hexo 本地预览命令：

1
hexo  clean  &&  hexo  g   &&   hexo s

现在你基本上就可以在另一台电脑上继续你的博客之旅啦！

四、日常写作工作流程

1. 写作前准备

打开终端进入博客目录：

1
cd /path/MyBlog-Hexo

写入博客管理脚本（可选）：
这个脚本是我自己写的，用以便捷管理和更新博客，有需要自取。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
❯ cat deploy.sh

#!/bin/bash

# Hexo博客管理脚本
REMOTE_REPO="git@github.com:用户名/仓库.git"
HEXO_BRANCH="hexo"
MASTER_BRANCH="master"
CONFIG_FILE="_config.yml"

# 颜色定义
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
CYAN='\033[0;36m'
PURPLE='\033[0;35m'
NC='\033[0m' # 无颜色

# 边框样式
BORDER="══════════════════════════════════════════════════════════════════════════════"

# 检查当前分支
current_branch() {
  git rev-parse --abbrev-ref HEAD
}

# 显示标题
show_header() {
  clear
  echo -e "${PURPLE}${BORDER}${NC}"
  echo -e "${CYAN}  ██╗  ██╗███████╗██╗  ██╗ ██████╗      ██████╗ ██████╗  ██████╗ ██╗  ██╗"
  echo -e "  ██║  ██║██╔════╝╚██╗██╔╝██╔═══██╗    ██╔════╝██╔═══██╗██╔═══██╗██║ ██╔╝"
  echo -e "  ███████║█████╗   ╚███╔╝ ██║   ██║    ██║     ██║   ██║██║   ██║█████╔╝ "
  echo -e "  ██╔══██║██╔══╝   ██╔██╗ ██║   ██║    ██║     ██║   ██║██║   ██║██╔═██╗ "
  echo -e "  ██║  ██║███████╗██╔╝ ██╗╚██████╔╝    ╚██████╗╚██████╔╝╚██████╔╝██║  ██╗"
  echo -e "  ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝      ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
  echo -e "${YELLOW} 当前分支: ${GREEN}$(current_branch)${NC}"
  echo -e "${YELLOW} 远程仓库: ${CYAN}$REMOTE_REPO${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
}

# 主菜单
show_menu() {
  show_header
  echo -e "${BLUE} 请选择操作：${NC}"
  echo -e ""
  echo -e "${GREEN} 1. 本地测试 ${CYAN}(启动Hexo服务器进行预览)${NC}"
  echo -e "${YELLOW} 2. 备份源文件 ${CYAN}(提交所有更改到 ${HEXO_BRANCH} 分支)${NC}"
  echo -e "${PURPLE} 3. 部署博客 ${CYAN}(生成静态页面到 ${MASTER_BRANCH} 分支)${NC}"
  echo -e "${RED} 4. 一键发布 ${CYAN}(备份源文件 + 部署博客)${NC}"
  echo -e "${BLUE} 5. 同步更新 ${CYAN}(从远程拉取最新源文件)${NC}"
  echo -e ""
  echo -e "${CYAN} 0. 退出脚本${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
}

# 本地测试
local_test() {
  show_header
  echo -e "${GREEN}启动本地测试服务器...${NC}"
  echo -e "${CYAN}即将执行: ${YELLOW}hexo clean && hexo g && hexo s${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
  echo -e "${BLUE}提示: ${CYAN}按 ${RED}Ctrl+C ${CYAN}停止服务器${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
  hexo clean && hexo g && hexo s
}

# 备份Hexo源文件
backup_source() {
  show_header
  echo -e "${GREEN}备份Hexo源文件到 ${HEXO_BRANCH} 分支...${NC}"
  
  # 确保在hexo分支
  if [[ $(current_branch) != "$HEXO_BRANCH" ]]; then
    echo -e "${YELLOW}切换到 ${HEXO_BRANCH} 分支...${NC}"
    git checkout $HEXO_BRANCH || { 
      echo -e "${RED}切换分支失败!${NC}"
      return 1
    }
  fi
  
  # 添加所有变更
  git add .
  
  # 提交信息
  echo -e "${CYAN}请输入提交说明:${NC}"
  read -p "> " commit_msg
  commit_msg=${commit_msg:-"备份源文件"}
  
  # 提交变更
  echo -e "${PURPLE}${BORDER}${NC}"
  if git commit -m "$commit_msg"; then
    echo -e "${GREEN}✓ 提交成功!${NC}"
  else
    echo -e "${YELLOW}⚠ 没有变更可提交.${NC}"
  fi
  
  # 推送到远程
  echo -e "${BLUE}推送更改到远程仓库...${NC}"
  if git push origin $HEXO_BRANCH; then
    echo -e "${GREEN}✓ 备份成功完成!${NC}"
  else
    echo -e "${RED}✗ 推送失败!${NC}"
    return 1
  fi
}

# 部署到master分支
deploy_to_master() {
  show_header
  echo -e "${PURPLE}部署到 ${MASTER_BRANCH} 分支...${NC}"
  
  # 检查部署配置
  if ! grep -q "branch: $MASTER_BRANCH" "$CONFIG_FILE"; then
    echo -e "${RED}错误: _config.yml 中未配置部署到 ${MASTER_BRANCH} 分支!${NC}"
    return 1
  fi
  
  # 执行部署
  echo -e "${CYAN}即将执行: ${YELLOW}hexo clean && hexo g && hexo d${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
  hexo clean && hexo g && hexo d
  
  # 获取部署时间
  deploy_time=$(date +"%Y-%m-%d %H:%M:%S")
  echo -e "${PURPLE}${BORDER}${NC}"
  echo -e "${GREEN}✓ 部署完成! ${CYAN}时间: ${YELLOW}${deploy_time}${NC}"
  echo -e "${BLUE}提示: ${CYAN}稍后访问您的 ${YELLOW}GitHub Pages ${CYAN}查看更新${NC}"
}

# 备份并部署
backup_and_deploy() {
  backup_source
  if [ $? -eq 0 ]; then
    deploy_to_master
  else
    echo -e "${RED}备份失败，取消部署操作${NC}"
  fi
}

# 拉取最新源文件
pull_latest() {
  show_header
  echo -e "${BLUE}从远程拉取最新源文件...${NC}"
  
  if [[ $(current_branch) != "$HEXO_BRANCH" ]]; then
    git checkout $HEXO_BRANCH
  fi
  
  echo -e "${CYAN}执行: ${YELLOW}git pull origin ${HEXO_BRANCH}${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
  git pull origin $HEXO_BRANCH
  
  # 更新依赖
  echo -e "${CYAN}更新依赖包...${NC}"
  echo -e "${CYAN}执行: ${YELLOW}npm install${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
  npm install
  
  echo -e "${GREEN}✓ 更新完成!${NC}"
}

# 退出消息
exit_script() {
  show_header
  echo -e "${GREEN}感谢使用Hexo博客管理脚本${NC}"
  echo -e "${CYAN}再见! 祝您写作愉快!${NC}"
  echo -e "${PURPLE}${BORDER}${NC}"
  sleep 1
  clear
  exit 0
}

# 主循环
while true; do
  show_menu
  read -p "请输入选项 [0-5]: " choice
  
  case $choice in
    1) 
      local_test
      read -p "按回车键返回主菜单..."
      ;;
    2) 
      backup_source
      read -p "按回车键返回主菜单..."
      ;;
    3) 
      deploy_to_master
      read -p "按回车键返回主菜单..."
      ;;
    4) 
      backup_and_deploy
      read -p "按回车键返回主菜单..."
      ;;
    5) 
      pull_latest
      read -p "按回车键返回主菜单..."
      ;;
    0) 
      exit_script
      ;;
    *) 
      show_header
      echo -e "${RED}无效选择! 请输入0-5之间的数字${NC}"
      sleep 1
      ;;
  esac
done

赋权并启动博客管理脚本：

1
2
chmod +x deploy.sh
./deploy.sh

选择 "5. 同步更新" 拉取最新源文件 (确保从远程 hexo 分支获取最新内容)。

2. 创建新文章

在博客目录下执行：

1
hexo new "文章标题"

这会自动在 source/_posts/ 目录下生成 Markdown 文件，格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 文章标题
date: 2023-07-13 14:00:00
categories:
  - 技术
tags:
  - Hexo
  - Git
cover: /images/cover.jpg
excerpt: 这里是文章摘要...
---
这里是文章正文内容，使用Markdown语法...

3. 编辑文章（推荐工作方式）

1）启动本地实时预览：

1
./deploy.sh  # 选择"1. 本地测试"

2）保持终端运行，在浏览器中打开：
http://localhost:4000

3）使用 VS Code 或其他编辑器编辑 Markdown 文件。保存后浏览器会自动刷新预览效果。

4. 写作内容规范

1）分类与标签：

1
2
3
4
5
6
categories:
  - 前端技术
  - JavaScript
tags:
  - Vue
  - 性能优化

2）图片管理：

创建目录：source/images/2023-07-13-文章标题/
引用图片：![描述](/images/2023-07-13-文章标题/demo.png)

3）代码块：

title
1
2
3
4
function highlightCode() {
  // 带行号显示的代码块
  return "支持多种语言高亮";
}

4）高级元素：

1
2
3
4
5
6
7
8
{% note success %}
**提示框**：成功/警告/危险等样式
{% endnote %}

{% tabs unique-name %}
标签页内容
另一个标签页
{% endtabs %}

5. 保存与发布流程

1
2
3
4
5
6
7
8
9
# 完成写作后回到管理脚本界面
# (如果本地测试在运行，按Ctrl+C停止)

# 选择以下任一操作：
1. 仅保存源文件 -> 选"2. 备份源文件"
2. 仅发布文章 -> 选"3. 部署博客"
3. 保存并发布 -> 选"4. 一键发布"

# 推荐选择"4. 一键发布"完成全流程

五、多设备写作同步方案

1. 在新电脑上设置环境：

1）安装前置依赖：

1
2
3
# Mac
brew install node
npm install -g hexo-cli

2）克隆博客源码：

1
2
git clone -b hexo git@github.com:用户名/仓库.git
cd MyBlog-Hexo

3）安装依赖：

1
npm install

4）将管理脚本设为可执行：

1
chmod +x deploy.sh

5）开始写作：

1
./deploy.sh

2. 设备间切换时：

离开当前设备前：

1
./deploy.sh  # 选择"2. 备份源文件"

到新设备后：

1
./deploy.sh  # 选择"5. 同步更新"

六、写作内容管理建议

1. 草稿管理：

1
2
3
4
5
# 创建草稿
hexo new draft "未完成文章"

# 发布草稿
hexo publish "未完成文章"

2. 资源文件夹：

在 _config.yml 中启用：

1
post_asset_folder: true

创建文章时会自动生成同名文件夹存放图片等资源。

3. 文章模板：

修改 scaffolds/post.md 定制默认 Front-matter：

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
categories:
  - 默认分类
tags:
  - 默认标签
cover:
excerpt:
---

最后

到这里，Hexo 博客的备份与恢复流程就基本结束啦。

如果你觉得这篇教程有帮助，别忘了给博主点个赞哦！