相信很多小伙伴们都在使用 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 修改缓存位置的方法,可以参考我的这篇文章:

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-keygithub-deploy-key.pub 两个文件。

2.3 配置部署密钥

2.3.1 添加 key

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

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

2.3.2 添加 key pub

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

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

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

2.4 编写 Github Actions

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

name: Pudding 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: [14.x]

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

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

      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v1
        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 方式:

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 直接访问速度也就会很快了。

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Next Post

Github学生包申请秒通过

周六 10月 22 , 2022
相信很多小伙伴都想要薅 Github 学生包的羊毛 […]