使用Hexo搭建博客并通过Actions部署到GitHub Page

相信很多小伙伴们都在使用 Hexo + Github Page 的方式，先在本地生成自己博客的静态页面，然后再推送到 Github Page 来实现页面的更新。Github 近些年推出了 Actions，这是一个非常强大的 Workflow 自动化工作流，它可以帮助我们完成很多自动化部署任务。今天就来利用 Actions 自动化部署 Hexo 到 Github Page。

1.传统的 Hexo 使用

我们先来温习一下传统的 Hexo 页面使用和部署方法。

1.1 安装 Node.js

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台，但它不是一个 Web 服务器，这十分重要，它无法像 Apache 或 Nginx 那样工作。简单的说 Node.js 就是运行在服务端的 JavaScript。

而我们使用的 Hexo 就是需要借助 Node.js 生成并运行。

进入 Node.js 的官网，选择适合自己操作系统的，以及适合自己的版本进行下载和安装。建议选择 LTS 稳定版。

安装完成后，在 Powershell 或 Terminal 中，输入：

# 查看 node.js 版本
node -v

# 查看 npm 版本
npm -v

来检查自己的 Node.js 版本和 npm 是否正确安装。由于安装 Node.js 时附带的 npm 版本可能较低，可以使用如下命名进行 npm 版本的升级：

# 升级 npm 版本
npm install -g npm

关于 Windows 下的 Node.js 修改缓存位置的方法，可以参考我的这篇文章：

Windows下Electron的安装和配置

1.2 安装 Hexo

我们先全局安装 Hexo：

# 安装 Hexo
npm install hexo-cli -g

# 如果下载很缓慢，你可以搭配镜像
npm config set registry https://registry.npm.taobao.org
npm install hexo-cli -g

安装完成后，创建一个 /blog 文件夹，然后在该文件夹下初始化：

# 初始化 Hexo
hexo init

一些常用的 Hexo 命令：

hexo g # 生成静态网页
hexo clean # 清理缓存和生成的静态网页
hexo d # 开始部署
hexo g -d # 生成静态网页并部署，两步并一步

hexo s # 本地服务启动
hexo server -s # 静态模式
hexo server -p 5000 # 更改端口
hexo server -i 192.168.1.1 # 自定义IP

之后你还可以修改主题，进行一些配置修改等。然后使用 hexo g -d 生成并部署静态网页到 Github Page。

2.使用 Actions

首先，官网上有一键 Actions 部署的方法：https://hexo.io/zh-cn/docs/one-command-deployment，它是通过 hexo-deployer-git 工具实现，原理是当执行 hexo deploy 时，Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中，并且完全覆盖该分支下的已有内容。

不过我这次来说一下自己手动部署的方法。

2.1 仓库的准备

首先需要准备两个 Github 仓库：

blog（私库，用来存放博客代码）
pudding0503.github.io（公开，用来存档你的静态页面，使用你 Github 用户名创建的特殊仓库）

2.2 生成部署密钥

在 Git 中生成一个密钥，一路按回车直到生成成功：

ssh-keygen -f github-deploy-key

当前目录下会有 github-deploy-key 和 github-deploy-key.pub 两个文件。

2.3 配置部署密钥

2.3.1 添加 key

复制 github-deploy-key 文件内容，在 blog 仓库 Settings -> Secrets -> Add a new secret 页面上添加：

在 Name 输入框填写 HEXO_DEPLOY_PRI。
在 Value 输入框填写 github-deploy-key 文件内容。

2.3.2 添加 key pub

复制 github-deploy-key.pub 文件内容，在 name.github.io 仓库 Settings -> Deploy keys -> Add deploy key 页面上添加：

在 Title 输入框填写 HEXO_DEPLOY_PUB。
在 Key 输入框填写 github-deploy-key.pub 文件内容。
勾选 Allow write access 选项。

这样，你的 blog 仓库就拥有对 name.github.io 仓库的操作权限了。

2.4 编写 Github Actions

在 blog 仓库根目录下创建 .github/workflows/deploy.yml 文件，填入内容：

name: Hexo Blog Build

on:
  push:
    branches:
      - main

env:
  GIT_USER: Your Github Name
  GIT_EMAIL: Your Github Email
  DEPLOY_REPO: pudding0503/pudding0503.github.io
  DEPLOY_BRANCH: main

jobs:
  build:
    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        os: [ubuntu-latest]
        node_version: [21.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with: 
          fetch-depth: 0

      - name: Checkout deploy repo
        uses: actions/checkout@v4
        with:
          repository: ${{ env.DEPLOY_REPO }}
          ref: ${{ env.DEPLOY_BRANCH }}
          path: .deploy_git

      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v4.0.2
        with:
          node-version: ${{ matrix.node_version }}

      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{ secrets.HEXO_DEPLOY_PRI }}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL
          cp _config.fluid.yml themes/fluid/_config.yml

      - name: Install dependencies
        run: |
          npm install

      - name: Deploy hexo
        run: |
          npm run deploy

修改第 9~12 的信息为自己的，分别是 Github 的名称、Github 的邮箱、推送到的远程仓库地址，以及该远程仓库的分支名称。

如果你的主题需要安装，则需要再 Actions 中手动添加一个 Step 用于你的主题安装，然后再执行后续命令。

3.其他工作

3.1 添加 hexo-deployer-git 依赖

在 package.json 中添加如下依赖，才可正常部署：

{
  "dependencies": {
    "hexo-deployer-git": "^3.0.0"
  }
}

3.2 修改为 git 方式

在 _config.yml 中修改为 git 方式，因为 SSH 地址才能使用 RSA 密钥进行部署。：

deploy:
  type: git
  repo: git@github.com:pudding05033/pudding0503.github.io.git
  branch: main

到此结束。只要你将本地的 blog 文件夹 push 到 Github，然后远端的 blog 会自动运行 Actions 并将生成的静态文件推送到 pudding0503.github.io 的 main 分支下，并自动生成部署。

4.CDN加速访问

由于众所周知的原因，github.io 域名的访问不是特别的顺利，如果你有域名的话，可以给 Github Page 绑定域名并且使用 CDN 进行加速。

在 Github Page 的文档中提到了它所使用的服务器 ip 地址：

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

然后你 ping 一下自己的 Github Page 页面，找到你当前使用的 ip 地址，并设置其权重为 100，其余 ip 地址权重依次递减，填入到 CDN 的源站信息中：

缓存配置可以将 html 文件设置的短一些，媒体资源缓存时间长一些：

这样 Github Page 直接访问速度也就会很快了。

阅读: 186

Web 全栈

程序应用

操作系统