为什么需要这套自动化部署方案

在开始配置之前,让我们先了解一下为什么要搭建这样一套系统。

传统博客部署的痛点

如果你之前尝试过搭建个人博客,可能遇到过这些问题:

  • 每次发布文章都要手动 SSH 登录服务器
  • 在服务器上手动执行 hexo generatehexo deploy 等命令
  • 忘记某个步骤导致网站没有更新
  • 在不同电脑上写作时,需要重复配置环境
  • 服务器重装系统后,所有配置需要从头再来

自动化部署带来的便利

通过本教程搭建的系统,你将获得以下体验:

  • 本地写作:在熟悉的编辑器中写 Markdown,就像写普通文档一样
  • 一键发布:只需 git push,剩下的事情完全自动化
  • 版本控制:所有文章都在 Git 版本管理下,永不丢失
  • 多设备同步:换电脑?只需克隆仓库,继续写作
  • 持续集成:GitHub Actions 自动检测更新并部署,1-2 分钟内完成

技术架构概览

整套系统包含三个关键环节:

1
2
3
4
本地电脑 → GitHub 仓库 → 云服务器
↓ ↓ ↓
写作 版本控制 自动部署
CI/CD 生成网站

这套架构的核心思想是”关注点分离”:

  • 你只需关心内容创作
  • 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:自动确认所有提示,无需手动输入 yes
  • nodejs:要安装的软件包名称

安装过程可能需要 1-2 分钟。


步骤 1-mac:在 macOS 上安装 Node.js(仅限 macOS 用户)

如果你使用 macOS 系统,执行以下命令:

1
brew install node

命令解释:

  • brew:macOS 的包管理工具 Homebrew
  • install:安装软件
  • 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:博客目录名称,可以改为任意名称

这个命令会:

  1. 创建名为 my-blog 的目录
  2. 下载 Hexo 默认主题和配置文件
  3. 创建必要的目录结构

过程需要 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 实现自动化部署

这一部分我们将完成:

  1. 创建 GitHub 仓库
  2. 配置 SSH 密钥(让本地电脑能安全地与 GitHub 通信)
  3. 将本地博客代码推送到 GitHub

步骤 20:创建 GitHub 仓库(网页操作)

首先,我们需要在 GitHub 上创建一个仓库来存放博客代码。

在浏览器中执行以下操作:

  1. 访问 https://github.com 并登录你的账户
  2. 点击页面右上角的加号 + 按钮
  3. 在下拉菜单中选择 New repository
  4. 在”Repository name”输入框中填入:hexo(这是仓库名称,可以改为其他名称)
  5. 选择 Public(公开仓库,免费)
  6. 不要勾选”Add a README file”(我们稍后会手动添加)
  7. 不要选择 .gitignore 模板
  8. 不要选择 license
  9. 点击绿色的 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(网页操作)

  1. 访问 https://github.com/settings/keys
  2. 点击右上角绿色的 New SSH key 按钮
  3. 在”Title”输入框中填入:My Computer(这是密钥的备注名称,可以随意填写)
  4. 在”Key”文本框中粘贴步骤 23 复制的公钥内容
  5. 点击 Add SSH key 按钮
  6. 如果提示输入 GitHub 密码,输入后确认

步骤 25:测试 SSH 连接

执行以下命令:

1
ssh -T git@github.com

命令解释:

  • ssh:SSH 客户端程序
  • -T:禁用伪终端分配(因为我们只是测试连接,不需要交互式 shell)
  • git@github.com:以 git 用户身份连接 github.com

首次连接时会提示:

1
2
3
The authenticity of host 'github.com (...)' can't be established.
...
Are you sure you want to continue connecting (yes/no)?

输入 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
2
3
4
5
6
7
8
9
10
11
12
cat > .gitignore << 'EOF'
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml
.deploy_git
.history/
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
2
3
To github.com:你的用户名/hexo.git
* [new branch] main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

步骤 33:验证 GitHub 仓库

在浏览器中:

  1. 访问 https://github.com/你的用户名/hexo
  2. 刷新页面
  3. 你应该能看到博客的所有文件已经上传

至此,本地代码已成功推送到 GitHub。


第三部分:云服务器环境配置

现在,博客代码已经安全地存放在 GitHub 上了。接下来我们要配置云服务器,让它能够:

  1. 从 GitHub 拉取最新代码
  2. 安装 Hexo 及其依赖
  3. 生成静态网站文件
  4. 通过 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)= 6
    • 0(组用户):无权限
    • 0(其他用户):无权限
  • ~/.ssh/authorized_keys:要修改权限的文件
  • SSH 要求 authorized_keys 文件只能由所有者读写,否则会拒绝使用

步骤 56:查看私钥内容

执行以下命令:

1
cat ~/.ssh/github_actions_key

命令解释:

  • cat:显示文件内容
  • ~/.ssh/github_actions_key:私钥文件路径(注意没有 .pub 后缀)

输出内容类似:

1
2
3
4
-----BEGIN OPENSSH PRIVATE KEY-----
b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
...(很多行)...
-----END 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 设置页面(网页操作)

让我们开始配置这些密钥。

在浏览器中:

  1. 访问你的 GitHub 仓库页面:https://github.com/你的用户名/hexo
  2. 点击仓库页面上方的 Settings 标签
  3. 在左侧边栏找到 Secrets and variables
  4. 点击展开后选择 Actions

步骤 58:添加 SERVER_HOST 密钥(网页操作)

  1. 点击右上角绿色的 New repository secret 按钮
  2. Name 输入框填入:SERVER_HOST(必须完全一致,区分大小写)
  3. Secret 文本框填入:你的云服务器 IP 地址(例如:49.234.9.118
  4. 点击 Add secret 按钮保存

步骤 59:添加 SERVER_USER 密钥(网页操作)

  1. 再次点击 New repository secret 按钮
  2. Name 输入框填入:SERVER_USER
  3. Secret 文本框填入:root
  4. 点击 Add secret 按钮保存

步骤 60:添加 SERVER_SSH_KEY 密钥(网页操作)

  1. 再次点击 New repository secret 按钮
  2. Name 输入框填入:SERVER_SSH_KEY
  3. Secret 文本框粘贴步骤 56 复制的完整私钥内容
  4. 确保包含 -----BEGIN OPENSSH PRIVATE KEY----------END OPENSSH PRIVATE KEY-----
  5. 点击 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(网页操作)

  1. 访问 https://github.com/settings/keys
  2. 点击 New SSH key
  3. Title 填入:Cloud Server
  4. Key 粘贴步骤 62 复制的公钥
  5. 点击 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:

  1. 监听 main 分支的推送事件
  2. 一旦检测到推送,立即连接到云服务器
  3. 在服务器上执行部署脚本
  4. 部署完成后报告结果

从现在开始,回到本地开发环境操作。

步骤 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
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
cat > .github/workflows/deploy.yml << 'EOF'
name: Deploy to Server

on:
push:
branches:
- main

jobs:
build-and-deploy:
runs-on: ubuntu-22.04

steps:
- name: Check out repository code
uses: actions/checkout@v3

- name: Execute deployment on remote server
uses: appleboy/ssh-action@v0.1.8
with:
host: ${{ secrets.SERVER_HOST }}
username: ${{ secrets.SERVER_USER }}
port: 22
key: ${{ secrets.SERVER_SSH_KEY }}
script: |
cd /var/www/hexo
echo "Pulling latest code from GitHub..."
git pull origin main
echo "Making update script executable..."
chmod +x update.sh
echo "Running update script..."
./update.sh
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
cat > update.sh << 'EOF'
#!/bin/bash

set -e

cd /var/www/hexo

echo "Pulling latest changes from GitHub..."
git pull origin main

if git diff --name-only HEAD@{1} HEAD | grep -q "package.json\|package-lock.json"; then
echo "Package files changed, installing dependencies..."
npm install --prefer-offline --no-audit
else
echo "No package changes detected, skipping npm install..."
fi

echo "Generating static files..."
hexo clean
hexo generate

echo "Hexo blog updated successfully."
echo "Static files are ready in public/ directory."
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 运行状态(网页操作)

  1. 访问 https://github.com/你的用户名/hexo/actions
  2. 点击最新的 workflow 运行记录
  3. 查看执行日志,确认每个步骤都成功(绿色对勾)

如果出现红色叉号,点击查看详细错误信息。


第七部分:配置 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
cat > /etc/nginx/sites-available/hexo << 'EOF'
server {
listen 80;
server_name 你的域名或IP;

root /var/www/hexo/public;
index index.html;

location / {
try_files $uri $uri/ =404;
}

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}
EOF

配置解释:

  • listen 80:监听 80 端口(HTTP)
  • server_name:你的域名或 IP 地址
  • root /var/www/hexo/public:网站根目录
  • index index.html:默认首页文件
  • try_files $uri $uri/ =404:尝试查找文件,找不到返回 404
  • gzip on:启用压缩,加快加载速度

重要:将 你的域名或IP 替换为实际值,例如 www.example.com49.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
2
echo "Reloading Nginx..."
systemctl reload nginx

完整的更新脚本应该是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/bin/bash

set -e

cd /var/www/hexo

echo "Pulling latest changes from GitHub..."
git pull origin main

if git diff --name-only HEAD@{1} HEAD | grep -q "package.json\|package-lock.json"; then
echo "Package files changed, installing dependencies..."
npm install --prefer-offline --no-audit
else
echo "No package changes detected, skipping npm install..."
fi

echo "Generating static files..."
hexo clean
hexo generate

echo "Reloading Nginx..."
systemctl reload nginx

echo "Hexo blog updated successfully."

完成!测试完整流程

所有配置都已经完成!现在让我们测试一下整套自动化流程是否正常工作。

这个测试将模拟真实的写作发布流程:

  1. 在本地创建一篇新文章
  2. 提交并推送到 GitHub
  3. GitHub Actions 自动触发部署
  4. 云服务器自动更新并重新生成网站
  5. 在浏览器中看到新文章

如果一切顺利,从你执行 git push 到文章出现在网站上,整个过程只需要 1-2 分钟。

最终测试:写一篇新博客

在本地执行:

1
hexo new "测试自动部署"

编辑生成的文件,然后:

1
2
3
git add .
git commit -m "新增测试文章"
git push origin main

等待 1-2 分钟,访问网站查看新文章是否出现。

整套自动化部署流程配置完成!


(可选)第八部分:同时部署到 GitHub Pages

如果你希望博客同时发布到 GitHub Pages(用户名.github.io),可以按照以下步骤配置。这样你的博客将有两个访问地址:

  • 云服务器:http://你的域名或IP(通过前面配置的自动化流程更新)
  • GitHub Pages:https://用户名.github.io(需要手动或自动触发部署)

步骤 87:创建 GitHub Pages 仓库(网页操作)

  1. 访问 GitHub:https://github.com/new
  2. 仓库名称必须是:你的用户名.github.io(例如:nanyeglm.github.io
  3. 选择 Public(公开仓库)
  4. 不要勾选 “Initialize this repository with a README”
  5. 点击 Create repository

步骤 88:配置 _config.yml 的 deploy 部分

在本地 Hexo 项目目录,编辑 _config.yml 文件,找到 # Deployment 部分,添加以下配置:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: git@github.com:你的用户名/你的用户名.github.io.git
branch: main

重要:将 你的用户名 替换为你的实际 GitHub 用户名(例如:nanyeglm)。

配置说明:

  • type: git:使用 Git 方式部署
  • repo:GitHub Pages 仓库地址(使用 SSH 格式)
  • branch: main:部署到 main 分支

步骤 89:手动部署到 GitHub Pages

配置完成后,在本地执行:

1
2
3
hexo clean
hexo generate
hexo deploy

命令解释:

  • 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 部署到 GitHub Pages
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'

- name: Install dependencies
run: npm install

- name: Generate static files
run: |
npx hexo clean
npx hexo generate

- name: Deploy to GitHub Pages
run: npx hexo deploy
env:
GIT_USER: ${{ secrets.GH_NAME }}
GIT_EMAIL: ${{ secrets.GH_EMAIL }}

然后需要在 GitHub 仓库添加两个 Secrets:

  1. 访问:https://github.com/你的用户名/hexo/settings/secrets/actions
  2. 添加 GH_NAME:你的 GitHub 用户名
  3. 添加 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
  • 免费托管,无需服务器费用

你可以只保留其中一种方式,也可以同时使用两种方式。


日常使用流程

从现在开始,你的博客写作体验将变得极其简单。不需要记住复杂的部署命令,不需要手动登录服务器,一切都是自动化的。

以后写博客只需要:

  1. 本地写作:hexo new "文章标题"

  2. 编辑文章:编辑 source/_posts/文章标题.md

  3. 提交推送:

    1
    2
    3
    git add .
    git commit -m "新增文章"
    git push origin main
  4. 等待自动部署(1-2 分钟)

  5. 访问网站查看

如果配置了 GitHub Pages

在步骤 3 之后,额外执行:

1
hexo deploy

这样文章会同时发布到云服务器和 GitHub Pages。

完全自动化,无需任何手动操作! 🚀