Hexo博客自动化部署完整教程:本地-GitHub-云服务器三端联动
为什么需要这套自动化部署方案
在开始配置之前,让我们先了解一下为什么要搭建这样一套系统。
传统博客部署的痛点
如果你之前尝试过搭建个人博客,可能遇到过这些问题:
- 每次发布文章都要手动 SSH 登录服务器
- 在服务器上手动执行
hexo generate、hexo deploy等命令 - 忘记某个步骤导致网站没有更新
- 在不同电脑上写作时,需要重复配置环境
- 服务器重装系统后,所有配置需要从头再来
自动化部署带来的便利
通过本教程搭建的系统,你将获得以下体验:
- 本地写作:在熟悉的编辑器中写 Markdown,就像写普通文档一样
- 一键发布:只需
git push,剩下的事情完全自动化 - 版本控制:所有文章都在 Git 版本管理下,永不丢失
- 多设备同步:换电脑?只需克隆仓库,继续写作
- 持续集成:GitHub Actions 自动检测更新并部署,1-2 分钟内完成
技术架构概览
整套系统包含三个关键环节:
1 | 本地电脑 → GitHub 仓库 → 云服务器 |
这套架构的核心思想是”关注点分离”:
- 你只需关心内容创作
- GitHub 负责代码托管和触发部署
- 云服务器负责生成和展示网站
本教程适用场景
本教程专为以下情况设计:
- 你刚购买了一台全新的云服务器
- 你的本地电脑是新系统或需要重新配置
- 你的 GitHub 账户是新注册的或没有配置过 SSH
- 你希望有一份完整的参考文档,以便未来重新部署时查阅
重要提示:即使你已经有部分配置,本教程仍然适用。你可以跳过已完成的步骤,只执行需要的部分。
前置准备
开始之前,请准备以下资源:
- 本地计算机:可以是 Linux、macOS 或 Windows WSL 环境,能够执行命令行操作
- GitHub 账户:如果没有,访问 github.com 注册一个(免费)
- 云服务器:拥有 root 访问权限,本教程以腾讯云 Debian 12 为例(其他 Linux 发行版类似)
- 服务器 IP 地址:你需要知道云服务器的公网 IP
准备好了吗?让我们开始吧!
教程说明
本教程适用于以下场景:
- 全新的本地开发环境
- 全新的 GitHub 账户
- 全新的云服务器
教程假设你没有任何现有配置,将从零开始逐步引导你完成整套部署流程。每个命令都会详细解释其作用和参数含义。
第一部分:本地环境搭建
这一部分我们将在本地计算机上配置 Hexo 博客的开发环境。想象一下,这就像在你的工作台上准备好所有的工具和材料,之后才能开始创作。
我们需要安装的主要工具有:
- Node.js:Hexo 的运行环境,就像写 Python 需要 Python 解释器一样
- Git:版本控制工具,用于管理代码和与 GitHub 同步
- Hexo CLI:Hexo 的命令行工具,用于创建和管理博客
别担心,即使你之前没有接触过这些工具,跟着步骤操作也能轻松完成。
Node.js 是 Hexo 的基础运行环境。Hexo 本身是用 JavaScript 编写的,需要 Node.js 来执行。
步骤 1:安装 Node.js(Ubuntu/Debian 系统)
如果你使用的是 macOS,请跳到步骤 1-mac。
执行以下命令下载 NodeSource 的安装脚本:
1 | curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - |
命令解释:
curl:下载文件的工具-fsSL:参数组合-f:失败时不输出错误页面-s:静默模式,不显示进度-S:显示错误信息-L:跟随重定向
https://deb.nodesource.com/setup_20.x:NodeSource 提供的 Node.js 20.x 版本安装脚本|:管道符,将前一个命令的输出传递给后一个命令sudo -E bash -:以管理员权限执行脚本,-E保留环境变量
执行成功后,会看到类似”Repository configured”的提示。
步骤 2:安装 Node.js 软件包
执行以下命令:
1 | sudo apt-get install -y nodejs |
命令解释:
sudo:以管理员权限执行apt-get:Debian/Ubuntu 的包管理工具install:安装软件包-y:自动确认所有提示,无需手动输入 yesnodejs:要安装的软件包名称
安装过程可能需要 1-2 分钟。
步骤 1-mac:在 macOS 上安装 Node.js(仅限 macOS 用户)
如果你使用 macOS 系统,执行以下命令:
1 | brew install node |
命令解释:
brew:macOS 的包管理工具 Homebrewinstall:安装软件node:Node.js 软件包名称
注意:如果提示找不到 brew 命令,需要先安装 Homebrew。访问 brew.sh 查看安装说明。
步骤 3:验证 Node.js 安装
执行以下命令检查 Node.js 版本:
1 | node --version |
命令解释:
node:Node.js 可执行程序--version:显示版本号
预期输出:类似 v20.11.0 的版本号。
步骤 4:验证 npm 安装
执行以下命令检查 npm 版本:
1 | npm --version |
命令解释:
npm:Node Package Manager,Node.js 的包管理工具,随 Node.js 一起安装--version:显示版本号
预期输出:类似 10.2.4 的版本号。
步骤 5:安装 Git
执行以下命令:
1 | sudo apt-get install -y git |
命令解释:
git:版本控制系统,用于管理代码
macOS 用户执行:
1 | brew install git |
步骤 6:验证 Git 安装
执行以下命令:
1 | git --version |
预期输出:类似 git version 2.39.2 的版本号。
步骤 7:配置 Git 用户名
执行以下命令(替换为你的实际用户名):
1 | git config --global user.name "你的用户名" |
命令解释:
git config:配置 Git--global:全局配置,应用于所有仓库user.name:配置项名称,表示用户名"你的用户名":你的实际用户名,例如 “Zhang San”
这个用户名会在 Git 提交记录中显示。
步骤 8:配置 Git 邮箱
执行以下命令(替换为你的实际邮箱):
1 | git config --global user.email "your.email@example.com" |
命令解释:
user.email:配置项名称,表示邮箱地址"your.email@example.com":你的实际邮箱,例如 “zhangsan@gmail.com“
这个邮箱会在 Git 提交记录中显示。
步骤 9:安装 Hexo CLI
执行以下命令:
1 | npm install -g hexo-cli |
命令解释:
npm install:安装 npm 包-g:全局安装(global),安装到系统目录,可在任何位置使用hexo-cli:Hexo 的命令行工具包名称
安装过程可能需要 1-2 分钟。
步骤 10:验证 Hexo 安装
执行以下命令:
1 | hexo version |
命令解释:
hexo:Hexo 可执行程序version:显示版本信息
预期输出:显示 Hexo 及相关组件的版本号。
步骤 11:创建博客目录
执行以下命令:
1 | hexo init my-blog |
命令解释:
hexo init:初始化一个新的 Hexo 博客my-blog:博客目录名称,可以改为任意名称
这个命令会:
- 创建名为 my-blog 的目录
- 下载 Hexo 默认主题和配置文件
- 创建必要的目录结构
过程需要 1-2 分钟,会看到”Start blogging with Hexo!”的提示。
步骤 12:进入博客目录
执行以下命令:
1 | cd my-blog |
命令解释:
cd:change directory,切换目录my-blog:要进入的目录名称
后续所有操作都在这个目录下进行。
步骤 13:安装博客依赖
执行以下命令:
1 | npm install |
命令解释:
npm install:安装 package.json 中列出的所有依赖包- 不加包名时,npm 会读取当前目录的 package.json 文件
这个过程会下载所有必要的 Node.js 模块,需要 2-3 分钟。
步骤 14:启动本地预览服务器
执行以下命令:
1 | hexo server |
命令解释:
hexo server:启动 Hexo 内置的 Web 服务器- 默认监听 4000 端口
预期输出:
1 | INFO Hexo is running at http://localhost:4000/ |
步骤 15:验证博客运行
打开浏览器,访问:
1 | http://localhost:4000 |
你应该能看到 Hexo 的默认欢迎页面。
验证成功后,在终端按 Ctrl+C 停止服务器。
步骤 16:安装 Git 部署插件
执行以下命令:
1 | npm install hexo-deployer-git --save |
命令解释:
hexo-deployer-git:Hexo 的 Git 部署插件,用于将博客部署到 Git 仓库--save:将这个依赖添加到 package.json 的 dependencies 中
步骤 17:安装站点地图生成插件
执行以下命令:
1 | npm install hexo-generator-sitemap --save |
命令解释:
hexo-generator-sitemap:生成 sitemap.xml 文件的插件- sitemap 帮助搜索引擎索引你的网站
步骤 18:安装百度站点地图插件
执行以下命令:
1 | npm install hexo-generator-baidu-sitemap --save |
命令解释:
hexo-generator-baidu-sitemap:生成适配百度搜索引擎的站点地图- 如果你的目标用户主要在中国,这个插件很有用
步骤 19:安装永久链接插件
执行以下命令:
1 | npm install hexo-abbrlink --save |
命令解释:
hexo-abbrlink:生成简短的永久链接,代替默认的日期+标题格式- 例如:/posts/a3c5.html 代替 /2024/01/01/my-post.html
第二部分:GitHub 仓库配置
恭喜!本地开发环境已经搭建完成。现在我们要做的是将博客代码托管到 GitHub。
为什么选择 GitHub?因为它不仅是全球最大的代码托管平台,还提供了 GitHub Actions 这个强大的 CI/CD 工具。通过 GitHub,我们可以:
- 随时随地访问博客源代码
- 追踪每一次修改的历史
- 在多台设备间同步工作
- 利用 GitHub Actions 实现自动化部署
这一部分我们将完成:
- 创建 GitHub 仓库
- 配置 SSH 密钥(让本地电脑能安全地与 GitHub 通信)
- 将本地博客代码推送到 GitHub
步骤 20:创建 GitHub 仓库(网页操作)
首先,我们需要在 GitHub 上创建一个仓库来存放博客代码。
在浏览器中执行以下操作:
- 访问 https://github.com 并登录你的账户
- 点击页面右上角的加号
+按钮 - 在下拉菜单中选择
New repository - 在”Repository name”输入框中填入:
hexo(这是仓库名称,可以改为其他名称) - 选择
Public(公开仓库,免费) - 不要勾选”Add a README file”(我们稍后会手动添加)
- 不要选择 .gitignore 模板
- 不要选择 license
- 点击绿色的
Create repository按钮
创建成功后,GitHub 会显示一个快速设置页面,保持这个页面打开,我们稍后会用到。
步骤 21:生成 SSH 密钥对
回到本地终端,执行以下命令:
1 | ssh-keygen -t ed25519 -C "your.email@example.com" |
命令解释:
ssh-keygen:生成 SSH 密钥对的工具-t ed25519:指定密钥类型为 ed25519(一种现代、安全的加密算法)-C "your.email@example.com":添加注释,通常使用你的邮箱地址(需替换为实际邮箱)
执行后会提示:
1 | Enter file in which to save the key (/home/你的用户名/.ssh/id_ed25519): |
直接按回车,使用默认路径。
步骤 22:设置密钥密码(可选)
接着会提示:
1 | Enter passphrase (empty for no passphrase): |
这里有两个选择:
- 直接按回车:不设置密码(简单,但安全性稍低)
- 输入密码:每次使用密钥时需要输入密码(更安全)
建议初学者直接按回车跳过。
再次提示时再按一次回车确认。
步骤 23:查看公钥内容
执行以下命令:
1 | cat ~/.ssh/id_ed25519.pub |
命令解释:
cat:显示文件内容~/.ssh/id_ed25519.pub:公钥文件路径~代表你的用户主目录.ssh是存放 SSH 密钥的目录id_ed25519.pub是公钥文件(.pub 后缀表示 public)
输出类似:
1 | ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIxxx...xxx your.email@example.com |
复制整行内容(从 ssh-ed25519 开始到邮箱结束)。
步骤 24:添加公钥到 GitHub(网页操作)
- 访问 https://github.com/settings/keys
- 点击右上角绿色的
New SSH key按钮 - 在”Title”输入框中填入:
My Computer(这是密钥的备注名称,可以随意填写) - 在”Key”文本框中粘贴步骤 23 复制的公钥内容
- 点击
Add SSH key按钮 - 如果提示输入 GitHub 密码,输入后确认
步骤 25:测试 SSH 连接
执行以下命令:
1 | ssh -T git@github.com |
命令解释:
ssh:SSH 客户端程序-T:禁用伪终端分配(因为我们只是测试连接,不需要交互式 shell)git@github.com:以 git 用户身份连接 github.com
首次连接时会提示:
1 | The authenticity of host 'github.com (...)' can't be established. |
输入 yes 并按回车。
成功后会显示:
1 | Hi 你的用户名! You've successfully authenticated, but GitHub does not provide shell access. |
这表示 SSH 连接配置成功。
步骤 26:初始化 Git 仓库
确保你在博客目录下(my-blog),执行:
1 | git init |
命令解释:
git init:在当前目录初始化一个新的 Git 仓库- 这会创建一个
.git隐藏目录,用于存储版本控制信息
输出:
1 | Initialized empty Git repository in /path/to/my-blog/.git/ |
步骤 27:创建 .gitignore 文件
执行以下命令:
1 | cat > .gitignore << 'EOF' |
命令解释:
cat > .gitignore:创建名为 .gitignore 的文件<< 'EOF':开始多行输入,直到遇到 EOF 标记- 中间的内容:指定 Git 应该忽略的文件和目录
node_modules/:npm 安装的依赖包(太大,不应提交)public/:生成的静态文件(可以重新生成)db.json:Hexo 的缓存数据库*.log:日志文件- 其他:系统或编辑器生成的临时文件
步骤 28:添加远程仓库地址
执行以下命令(替换为你的 GitHub 用户名):
1 | git remote add origin git@github.com:你的GitHub用户名/hexo.git |
命令解释:
git remote add:添加远程仓库origin:远程仓库的别名(默认使用 origin)git@github.com:你的GitHub用户名/hexo.git:仓库的 SSH 地址- 格式:
git@github.com:用户名/仓库名.git
- 格式:
例如,如果你的用户名是 zhangsan,仓库名是 hexo,则命令为:
1 | git remote add origin git@github.com:zhangsan/hexo.git |
步骤 29:将所有文件添加到暂存区
执行以下命令:
1 | git add . |
命令解释:
git add:将文件添加到 Git 暂存区(准备提交).:当前目录及所有子目录的文件- Git 会自动根据 .gitignore 排除不需要的文件
步骤 30:创建第一个提交
执行以下命令:
1 | git commit -m "Initial commit: Hexo blog setup" |
命令解释:
git commit:创建一个提交(保存当前状态的快照)-m:指定提交消息"Initial commit: Hexo blog setup":提交消息内容,描述本次提交的内容
步骤 31:重命名主分支为 main
执行以下命令:
1 | git branch -M main |
命令解释:
git branch:分支操作命令-M main:强制重命名当前分支为 main- Git 旧版本默认分支名是 master
- GitHub 现在推荐使用 main 作为默认分支名
步骤 32:推送代码到 GitHub
执行以下命令:
1 | git push -u origin main |
命令解释:
git push:将本地提交推送到远程仓库-u:设置上游分支(upstream),之后可以直接使用git push而不需要指定分支origin:远程仓库别名main:要推送的分支名
首次推送可能需要 10-30 秒。
成功后输出类似:
1 | To github.com:你的用户名/hexo.git |
步骤 33:验证 GitHub 仓库
在浏览器中:
- 访问 https://github.com/你的用户名/hexo
- 刷新页面
- 你应该能看到博客的所有文件已经上传
至此,本地代码已成功推送到 GitHub。
第三部分:云服务器环境配置
现在,博客代码已经安全地存放在 GitHub 上了。接下来我们要配置云服务器,让它能够:
- 从 GitHub 拉取最新代码
- 安装 Hexo 及其依赖
- 生成静态网站文件
- 通过 Web 服务器对外提供访问
云服务器就像是你的博客在互联网上的”家”。我们需要在这个”家”里安装好所有必要的软件,并配置好自动化部署的环境。
这一部分的操作都在云服务器上进行,你需要通过 SSH 远程连接到服务器。
步骤 34:登录云服务器
SSH(Secure Shell)是一种加密的网络协议,让你能够安全地远程操作服务器,就像坐在服务器前操作一样。
在本地终端执行以下命令(替换为你的实际服务器IP地址):
1 | ssh root@你的服务器IP |
命令解释:
ssh:SSH 客户端程序,用于远程登录服务器root:用户名,root 是 Linux 系统的超级管理员账户@:分隔符你的服务器IP:云服务器的公网 IP 地址,例如49.234.9.118
首次连接会提示:
1 | Are you sure you want to continue connecting (yes/no)? |
输入 yes 并按回车。
然后输入服务器的 root 密码(输入时不会显示任何字符,这是正常的)。
登录成功后,命令提示符会变为类似 root@服务器名称:~# 的形式。
重要:后续步骤 35-50 都在云服务器上执行。
步骤 35:更新系统软件包列表
在云服务器上执行:
1 | apt-get update |
命令解释:
apt-get update:从软件源服务器更新可用软件包的列表- 这不会安装任何软件,只是更新软件包索引
过程需要 10-30 秒。
步骤 36:升级已安装的软件包
执行以下命令:
1 | apt-get upgrade -y |
命令解释:
apt-get upgrade:升级系统中所有已安装的软件包到最新版本-y:自动回答 yes,不需要手动确认
这个过程可能需要 2-5 分钟,取决于需要更新的软件数量。
步骤 37:安装 Git
执行以下命令:
1 | apt-get install -y git |
命令解释:
apt-get install:安装软件包-y:自动确认git:版本控制系统
步骤 38:验证 Git 安装
执行以下命令:
1 | git --version |
预期输出:类似 git version 2.39.2
步骤 39:下载 Node.js 安装脚本
执行以下命令:
1 | curl -fsSL https://deb.nodesource.com/setup_20.x | bash - |
命令解释:
curl -fsSL https://deb.nodesource.com/setup_20.x:下载 Node.js 20.x 版本的安装脚本| bash -:将下载的脚本直接传递给 bash 执行
这个命令会配置 Node.js 的软件源。
步骤 40:安装 Node.js
执行以下命令:
1 | apt-get install -y nodejs |
命令解释:
- 安装 Node.js 和 npm
过程需要 1-2 分钟。
步骤 41:验证 Node.js 安装
执行以下命令:
1 | node --version |
预期输出:类似 v20.11.0
步骤 42:验证 npm 安装
执行以下命令:
1 | npm --version |
预期输出:类似 10.2.4
步骤 43:安装编译工具 autoconf
执行以下命令:
1 | apt-get install -y autoconf |
命令解释:
autoconf:自动配置工具,某些 npm 包(如图片处理库)编译时需要
步骤 44:安装编译工具 automake
执行以下命令:
1 | apt-get install -y automake |
命令解释:
automake:自动生成 Makefile 的工具
步骤 45:安装编译工具 libtool
执行以下命令:
1 | apt-get install -y libtool |
命令解释:
libtool:创建可移植库的通用工具
步骤 46:安装编译工具 nasm
执行以下命令:
1 | apt-get install -y nasm |
命令解释:
nasm:汇编器,用于编译某些优化的图片处理代码
步骤 47:安装基础编译工具集
执行以下命令:
1 | apt-get install -y build-essential |
命令解释:
build-essential:包含 gcc、g++、make 等基础编译工具的软件包集合- 这些工具是编译 C/C++ 代码所必需的
步骤 48:配置 npm 使用淘宝镜像源
执行以下命令:
1 | npm config set registry https://registry.npmmirror.com |
命令解释:
npm config set:设置 npm 配置项registry:配置项名称,指定 npm 包的下载源https://registry.npmmirror.com:淘宝 npm 镜像地址(国内访问速度快)
步骤 49:验证镜像源配置
执行以下命令:
1 | npm config get registry |
命令解释:
npm config get:获取配置项的值registry:要查询的配置项名称
预期输出:https://registry.npmmirror.com
步骤 50:安装 Hexo CLI
执行以下命令:
1 | npm install -g hexo-cli |
命令解释:
-g:全局安装hexo-cli:Hexo 命令行工具
过程需要 1-2 分钟。
步骤 51:创建网站根目录
执行以下命令:
1 | mkdir -p /var/www |
命令解释:
mkdir:创建目录(make directory)-p:如果父目录不存在则自动创建,如果目录已存在则不报错/var/www:要创建的目录路径/var是系统变量数据目录/var/www是传统的 Web 服务器根目录
步骤 52:进入网站根目录
执行以下命令:
1 | cd /var/www |
命令解释:
cd:切换目录/var/www:要进入的目录
步骤 53:生成服务器端 SSH 密钥(用于 GitHub Actions)
执行以下命令:
1 | ssh-keygen -t ed25519 -C "github-actions" -f ~/.ssh/github_actions_key |
命令解释:
ssh-keygen:生成 SSH 密钥对-t ed25519:密钥类型-C "github-actions":注释文本,帮助识别这个密钥的用途-f ~/.ssh/github_actions_key:指定密钥文件保存路径~/.ssh/:SSH 密钥默认存储目录github_actions_key:密钥文件名
执行后会提示输入密码,直接按两次回车(不设置密码,因为 GitHub Actions 自动化部署时无法输入密码)。
步骤 54:将公钥添加到服务器授权列表
执行以下命令:
1 | cat ~/.ssh/github_actions_key.pub >> ~/.ssh/authorized_keys |
命令解释:
cat ~/.ssh/github_actions_key.pub:读取公钥文件内容>>:追加重定向操作符,将内容添加到文件末尾~/.ssh/authorized_keys:SSH 授权密钥列表文件- 此文件中的公钥对应的私钥可以免密登录服务器
步骤 55:设置授权密钥文件权限
执行以下命令:
1 | chmod 600 ~/.ssh/authorized_keys |
命令解释:
chmod:修改文件权限600:权限代码6(所有者):读(4)+ 写(2)= 60(组用户):无权限0(其他用户):无权限
~/.ssh/authorized_keys:要修改权限的文件- SSH 要求 authorized_keys 文件只能由所有者读写,否则会拒绝使用
步骤 56:查看私钥内容
执行以下命令:
1 | cat ~/.ssh/github_actions_key |
命令解释:
cat:显示文件内容~/.ssh/github_actions_key:私钥文件路径(注意没有 .pub 后缀)
输出内容类似:
1 | -----BEGIN OPENSSH PRIVATE KEY----- |
重要:复制完整的私钥内容(从 -----BEGIN 到 -----END,包括这两行)。稍后需要添加到 GitHub Secrets。
第四部分:配置 GitHub Secrets
到这里,我们已经完成了大部分的基础配置。现在需要解决一个关键问题:如何让 GitHub Actions 能够安全地登录你的云服务器?
答案是 GitHub Secrets。这是 GitHub 提供的一个安全机制,可以加密存储敏感信息(如服务器密码、SSH 密钥等)。这些信息只有 GitHub Actions 在运行时才能访问,即使是你自己也看不到加密后的内容。
我们需要存储三个关键信息:
- SERVER_HOST:服务器 IP 地址
- SERVER_USER:登录用户名(root)
- SERVER_SSH_KEY:SSH 私钥(之前生成的)
步骤 57:访问 GitHub Secrets 设置页面(网页操作)
让我们开始配置这些密钥。
在浏览器中:
- 访问你的 GitHub 仓库页面:
https://github.com/你的用户名/hexo - 点击仓库页面上方的
Settings标签 - 在左侧边栏找到
Secrets and variables - 点击展开后选择
Actions
步骤 58:添加 SERVER_HOST 密钥(网页操作)
- 点击右上角绿色的
New repository secret按钮 - 在
Name输入框填入:SERVER_HOST(必须完全一致,区分大小写) - 在
Secret文本框填入:你的云服务器 IP 地址(例如:49.234.9.118) - 点击
Add secret按钮保存
步骤 59:添加 SERVER_USER 密钥(网页操作)
- 再次点击
New repository secret按钮 - 在
Name输入框填入:SERVER_USER - 在
Secret文本框填入:root - 点击
Add secret按钮保存
步骤 60:添加 SERVER_SSH_KEY 密钥(网页操作)
- 再次点击
New repository secret按钮 - 在
Name输入框填入:SERVER_SSH_KEY - 在
Secret文本框粘贴步骤 56 复制的完整私钥内容 - 确保包含
-----BEGIN OPENSSH PRIVATE KEY-----和-----END OPENSSH PRIVATE KEY----- - 点击
Add secret按钮保存
完成后,你应该能在 Secrets 列表中看到三个密钥:
- SERVER_HOST
- SERVER_USER
- SERVER_SSH_KEY
第五部分:云服务器克隆代码并配置
现在我们要让云服务器能够从 GitHub 拉取代码。这需要配置云服务器的 SSH 密钥,并将公钥添加到 GitHub,建立服务器与 GitHub 之间的信任关系。
可以这样理解:
- 刚才我们配置的是”GitHub Actions → 云服务器”的通道(用于触发部署)
- 现在要配置的是”云服务器 → GitHub”的通道(用于拉取代码)
步骤 61:在云服务器上配置 Git SSH(如果还没配置)
这次生成的 SSH 密钥专门用于服务器访问 GitHub。
回到云服务器的 SSH 终端,执行以下命令:
1 | ssh-keygen -t ed25519 -C "server-github" |
命令解释:
- 为云服务器生成 SSH 密钥,用于从 GitHub 克隆代码
-C "server-github":注释,标识这是服务器访问 GitHub 的密钥
提示输入密码时,直接按两次回车。
步骤 62:查看服务器的 GitHub SSH 公钥
执行以下命令:
1 | cat ~/.ssh/id_ed25519.pub |
命令解释:
- 显示公钥内容,需要添加到 GitHub
复制显示的完整公钥内容。
步骤 63:将公钥添加到 GitHub(网页操作)
- 访问 https://github.com/settings/keys
- 点击
New SSH key - Title 填入:
Cloud Server - Key 粘贴步骤 62 复制的公钥
- 点击
Add SSH key
步骤 64:测试服务器到 GitHub 的 SSH 连接
在云服务器上执行:
1 | ssh -T git@github.com |
首次连接提示时输入 yes。
成功后显示:
1 | Hi 你的用户名! You've successfully authenticated... |
步骤 65:克隆 GitHub 仓库到服务器
确保在 /var/www 目录下,执行(替换为你的用户名):
1 | git clone git@github.com:你的GitHub用户名/hexo.git |
命令解释:
git clone:克隆(下载)Git 仓库git@github.com:你的GitHub用户名/hexo.git:仓库的 SSH 地址
过程需要 10-30 秒,会创建 hexo 目录。
步骤 66:进入克隆的博客目录
执行以下命令:
1 | cd hexo |
步骤 67:安装博客依赖
执行以下命令:
1 | npm install |
命令解释:
- 安装 package.json 中列出的所有依赖
这个过程可能需要 3-5 分钟(使用淘宝镜像源会快很多)。
步骤 68:测试生成静态文件
执行以下命令:
1 | hexo generate |
命令解释:
hexo generate:生成静态网站文件到 public 目录- 可以简写为
hexo g
成功后会看到 “INFO xx files generated”。
步骤 69:检查生成的文件
执行以下命令:
1 | ls -lh public/ |
命令解释:
ls:列出目录内容-l:详细列表格式-h:人类可读的文件大小(KB、MB)public/:要查看的目录
你应该看到 index.html、css、js 等文件和目录。
第六部分:配置 GitHub Actions 工作流
激动人心的时刻到了!现在我们要创建自动化部署的核心配置文件。
GitHub Actions 是什么?简单来说,它是 GitHub 提供的”自动化机器人”。我们可以告诉它:”每次我推送代码到 GitHub 时,请你自动帮我做这些事情…”
我们即将创建的配置文件会告诉 GitHub Actions:
- 监听 main 分支的推送事件
- 一旦检测到推送,立即连接到云服务器
- 在服务器上执行部署脚本
- 部署完成后报告结果
从现在开始,回到本地开发环境操作。
步骤 70:返回本地博客目录
确保你在本地博客目录下,因为我们要创建配置文件。
在本地终端,确保你在博客目录(my-blog)下。
步骤 71:创建 GitHub Actions 工作流目录
执行以下命令:
1 | mkdir -p .github/workflows |
命令解释:
mkdir -p:创建目录,如果父目录不存在则一并创建.github/workflows:GitHub Actions 的配置文件存放目录.github是特殊目录,GitHub 会识别其中的配置workflows存放工作流(workflow)定义文件
步骤 72:创建 deploy.yml 文件
执行以下命令创建工作流配置文件:
1 | cat > .github/workflows/deploy.yml << 'EOF' |
配置文件解释:
name: Deploy to Server:工作流名称on: push: branches: - main:触发条件,当推送到 main 分支时执行runs-on: ubuntu-22.04:在 Ubuntu 22.04 虚拟机上运行actions/checkout@v3:GitHub 官方动作,检出代码appleboy/ssh-action@v0.1.8:第三方动作,通过 SSH 连接远程服务器secrets.SERVER_HOST:引用 GitHub Secrets 中的服务器地址script::在远程服务器上执行的命令
步骤 73:创建服务器端部署脚本
执行以下命令:
1 | cat > update.sh << 'EOF' |
脚本解释:
#!/bin/bash:指定使用 bash 解释器set -e:遇到错误立即退出git pull origin main:拉取最新代码git diff --name-only HEAD@{1} HEAD:对比前后两次提交的文件变化grep -q "package.json\|package-lock.json":检查是否有依赖文件变化- 如果有变化才执行 npm install,节省时间
hexo clean:清理缓存hexo generate:生成静态文件
步骤 74:给脚本添加执行权限
执行以下命令:
1 | chmod +x update.sh |
命令解释:
chmod:修改文件权限+x:添加执行权限update.sh:要修改的文件
步骤 75:将新文件添加到 Git
执行以下命令:
1 | git add .github/workflows/deploy.yml update.sh |
命令解释:
git add:添加文件到暂存区.github/workflows/deploy.yml:工作流配置文件update.sh:部署脚本
步骤 76:提交更改
执行以下命令:
1 | git commit -m "添加 GitHub Actions 自动部署配置" |
步骤 77:推送到 GitHub
执行以下命令:
1 | git push origin main |
推送成功后,GitHub Actions 会自动触发部署。
步骤 78:查看 GitHub Actions 运行状态(网页操作)
- 访问
https://github.com/你的用户名/hexo/actions - 点击最新的 workflow 运行记录
- 查看执行日志,确认每个步骤都成功(绿色对勾)
如果出现红色叉号,点击查看详细错误信息。
第七部分:配置 Web 服务器
我们已经走了很远:代码可以自动同步,静态文件可以自动生成。但现在还缺最后一块拼图:让生成的网站能够被访问者看到。
这就需要 Web 服务器。它的作用是:
- 监听 80 端口(HTTP)或 443 端口(HTTPS)
- 当有人访问你的域名或 IP 时,返回相应的网页文件
- 提供静态文件服务(HTML、CSS、JavaScript、图片等)
最常用的 Web 服务器是 Nginx,它高效、稳定、配置简单。当然,你也可以使用其他工具,比如 Lucky666。
步骤 79:选择 Web 服务器方案
本教程以 Nginx 为例进行演示。
你有两种选择:
- 方案 A:使用 Nginx(推荐,免费开源)
- 方案 B:使用 Lucky666 或其他反向代理工具
本教程演示 Nginx 方案。
步骤 80:在云服务器上安装 Nginx
在云服务器终端执行:
1 | apt-get install -y nginx |
命令解释:
nginx:高性能 Web 服务器和反向代理
步骤 81:创建 Nginx 站点配置文件
执行以下命令(替换为你的域名或 IP):
1 | cat > /etc/nginx/sites-available/hexo << 'EOF' |
配置解释:
listen 80:监听 80 端口(HTTP)server_name:你的域名或 IP 地址root /var/www/hexo/public:网站根目录index index.html:默认首页文件try_files $uri $uri/ =404:尝试查找文件,找不到返回 404gzip on:启用压缩,加快加载速度
重要:将 你的域名或IP 替换为实际值,例如 www.example.com 或 49.234.9.118
步骤 82:修改配置文件中的域名
执行以下命令(替换为你的实际域名或 IP):
1 | sed -i 's/你的域名或IP/49.234.9.118/g' /etc/nginx/sites-available/hexo |
命令解释:
sed:流编辑器-i:直接修改文件s/你的域名或IP/49.234.9.118/g:将”你的域名或IP”替换为实际地址/etc/nginx/sites-available/hexo:要修改的文件
将 49.234.9.118 替换为你的实际 IP 或域名。
步骤 83:启用站点配置
执行以下命令:
1 | ln -s /etc/nginx/sites-available/hexo /etc/nginx/sites-enabled/ |
命令解释:
ln -s:创建符号链接(类似快捷方式)- 从
sites-available链接到sites-enabled - Nginx 只加载
sites-enabled中的配置
步骤 84:测试 Nginx 配置
执行以下命令:
1 | nginx -t |
命令解释:
nginx -t:测试配置文件语法是否正确-t是 test 的缩写
成功输出:
1 | nginx: configuration file /etc/nginx/nginx.conf test is successful |
步骤 85:启动 Nginx
执行以下命令:
1 | systemctl start nginx |
命令解释:
systemctl:系统服务管理工具start:启动服务nginx:要启动的服务名
步骤 86:设置 Nginx 开机自启
执行以下命令:
1 | systemctl enable nginx |
命令解释:
enable:设置服务开机自动启动
步骤 87:验证网站访问
打开浏览器,访问:
1 | http://你的服务器IP |
例如:http://49.234.9.118
你应该能看到 Hexo 博客页面。
步骤 88:修改 update.sh 添加 Nginx 重载
在云服务器上编辑 /var/www/hexo/update.sh,在末尾添加:
1 | echo "Reloading Nginx..." |
完整的更新脚本应该是:
1 |
|
完成!测试完整流程
所有配置都已经完成!现在让我们测试一下整套自动化流程是否正常工作。
这个测试将模拟真实的写作发布流程:
- 在本地创建一篇新文章
- 提交并推送到 GitHub
- GitHub Actions 自动触发部署
- 云服务器自动更新并重新生成网站
- 在浏览器中看到新文章
如果一切顺利,从你执行 git push 到文章出现在网站上,整个过程只需要 1-2 分钟。
最终测试:写一篇新博客
在本地执行:
1 | hexo new "测试自动部署" |
编辑生成的文件,然后:
1 | git add . |
等待 1-2 分钟,访问网站查看新文章是否出现。
整套自动化部署流程配置完成!
(可选)第八部分:同时部署到 GitHub Pages
如果你希望博客同时发布到 GitHub Pages(用户名.github.io),可以按照以下步骤配置。这样你的博客将有两个访问地址:
- 云服务器:
http://你的域名或IP(通过前面配置的自动化流程更新) - GitHub Pages:
https://用户名.github.io(需要手动或自动触发部署)
步骤 87:创建 GitHub Pages 仓库(网页操作)
- 访问 GitHub:
https://github.com/new - 仓库名称必须是:
你的用户名.github.io(例如:nanyeglm.github.io) - 选择 Public(公开仓库)
- 不要勾选 “Initialize this repository with a README”
- 点击 Create repository
步骤 88:配置 _config.yml 的 deploy 部分
在本地 Hexo 项目目录,编辑 _config.yml 文件,找到 # Deployment 部分,添加以下配置:
1 | # Deployment |
重要:将 你的用户名 替换为你的实际 GitHub 用户名(例如:nanyeglm)。
配置说明:
type: git:使用 Git 方式部署repo:GitHub Pages 仓库地址(使用 SSH 格式)branch: main:部署到 main 分支
步骤 89:手动部署到 GitHub Pages
配置完成后,在本地执行:
1 | hexo clean |
命令解释:
hexo clean:清理旧的生成文件hexo generate:生成静态网站文件到public/目录hexo deploy:将public/目录内容推送到 GitHub Pages 仓库
执行后会提示是否继续,输入 yes 确认。
步骤 90:访问 GitHub Pages
等待 1-2 分钟后,访问:https://你的用户名.github.io
你应该能看到你的博客内容。
步骤 91:(可选)自动化 GitHub Pages 部署
如果希望每次 git push 时也自动部署到 GitHub Pages,需要修改 GitHub Actions 配置。
编辑 .github/workflows/deploy.yml,在现有步骤后添加:
1 | # 部署到 GitHub Pages |
然后需要在 GitHub 仓库添加两个 Secrets:
- 访问:
https://github.com/你的用户名/hexo/settings/secrets/actions - 添加
GH_NAME:你的 GitHub 用户名 - 添加
GH_EMAIL:你的 GitHub 邮箱
注意:自动部署到 GitHub Pages 需要额外配置 SSH 密钥或使用 Personal Access Token,配置较复杂。建议保持手动部署方式,只在需要时执行 hexo deploy。
GitHub Pages 与云服务器部署的区别
云服务器部署(自动):
- 每次
git push自动触发 - 1-2 分钟内完成
- 访问地址:
http://你的域名或IP
GitHub Pages 部署(手动):
- 需要执行
hexo deploy命令 - 访问地址:
https://用户名.github.io - 免费托管,无需服务器费用
你可以只保留其中一种方式,也可以同时使用两种方式。
日常使用流程
从现在开始,你的博客写作体验将变得极其简单。不需要记住复杂的部署命令,不需要手动登录服务器,一切都是自动化的。
以后写博客只需要:
本地写作:
hexo new "文章标题"编辑文章:编辑 source/_posts/文章标题.md
提交推送:
1
2
3git add .
git commit -m "新增文章"
git push origin main等待自动部署(1-2 分钟)
访问网站查看
如果配置了 GitHub Pages:
在步骤 3 之后,额外执行:
1 | hexo deploy |
这样文章会同时发布到云服务器和 GitHub Pages。
完全自动化,无需任何手动操作! 🚀