博客搭建教程（四）

yngcy2024-07-202024-10-26

一、前言

在上一篇教程中，我们为了解决访问速度的问题将博客部署在了服务器上。最后留下了一个问题，能否将博客部署在 GitHub Pages 和服务器上。你可能想到了修改配置，然后执行 hexo d 命令两次。在这种方式下，我们每次更新博客时，都需要修改配置和输入命令，非常不方便。那么是否有更好的方法呢？本篇教程我就来带你解决这个问题。

二、工作流程

还记得之前的 GitHub Actions 吗？它是博客自动化构建的关键工具，我们之前用它来把博客部署到了 GitHub Pages 上。同样，我们可以编写配置文件，在不修改原来工作流的前提下，新增部署到服务器的任务。整个博客的工作流如下图所示。

在该工作流中，会按顺序执行 GitHub Pages 部署和服务器部署。以本站为例，在部署完成后，可以同时访问 yngcy.github.io 和 yngcy.com 获取博客资源。总结下，基于 GitHub Actions 的工作流优点如下：

多站点部署
只要能保证本地能推送到源码仓库，就可以执行自动化部署流程，无需担心访问站点（服务器）连接 GitHub 失败
一次配置，维护成本低
hexo g 生成静态文件的速度取决于生成的文件大小。如果在本地执行，不仅消耗本地资源，而且费时间，使用 GitHub Actions 无需担心这点

下面，我们就来实现这个工作流。

三、多点部署流搭建

3.1 GitHub Actions配置

打开本地的 .github/workflows/autodeploy.yml 配置文件，新增推送到服务器的配置。

name: 自动部署
# 当有改动推送到master分支时，启动Action
on:
  push:
    branches:
      - main
      #2020年10月后github新建仓库默认分支改为main，注意更改
  release:
    types:
      - published


jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v4
        with:
          ref: main
          fetch-depth: 0
      - name: Sync local file timestamps
        run: |
          git ls-files -z | while read -d '' path; do touch -d $(git log -1 --format="@%ct" "$path") "$path"; done

      - name: 安装 Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        id: cache-npm
        uses: actions/cache@v4
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: 安装依赖
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        run: |
          npm install gulp-cli -g #全局安装gulp
          npm install --save --legacy-peer-deps
          npm ls --depth 0

      - name: 生成静态文件
        run: |
          hexo clean
          hexo bangumi -u #bilibili番剧更新
          hexo generate
          hexo algolia
          gulp

      - name: 部署到Github
        run: |
          cd ./public
          git init
          git config --global user.name "yngcy"
          git config --global user.email "2792783811@qq.com"
          git add .
          git commit -m '${{ github.event.head_commit.message }}'
          git push --force --quiet https://{Access Token}@github.com/yngcy/yngcy.github.io master:main

      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@main
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          ARGS: "-rltgoDzvO --delete"
          SOURCE: "./public/"
          REMOTE_HOST: ${{ secrets.SERVER_IP }}
          REMOTE_USER: "git"
          TARGET: "/www/wwwroot/yngcy.com/"

在上述配置中，我们通过 SSH 的方式将 ./public/ 下的所有文件推送到 /www/wwwroot/yngcy.com/ 目录。其中，SSH_PRIVATE_KEY 是私钥，也就是本机 .ssh/id_rsa 文件。ARGS 用于控制文件同步。REMOTE_HOST 是服务器 IP 地址。REMOTE_USER 是登录用户名。

ARGS 参数解析
ARGS 传递给 rsync 命令。rsync 是一个用于同步文件和目录的工具。具体含义如下：
-r：递归，将目录及其内容都进行复制。
-l：复制符号链接。
-t：保持文件的修改时间。
-g：保持文件的组信息。
-o：保持文件的所有者信息。
-D：保持设备文件和特殊文件。
-z：在传输过程中启用压缩。
-v：详细输出模式，显示详细的传输过程。
-O：保留文件的原始属性。
--delete：删除目标目录中源目录没有的文件。