使用 GitHub Actions 部署 Hexo 博客

智子

2021-08-05 18:29:24

Personal

[更好的阅读体验](https://sophonci117.me/archives/2228098991/) ## Hexo 博客的自动部署 使用 Hexo 发布博客最原始的方法自然是直接编辑完文件后 `hexo clean && hexo g && hexo d`,但这种做法长期来看存在以下问题: 1. 迁移不便,在其他地方编写博客时,要么把笔记本背着到处跑,要么将整个文件夹复制到 U 盘里然后带着,并且事后同步博客也很不方便。 2. 需要在本地配置 Node.js 环境,并且可能因为 Node.js 出现各种奇奇怪怪的问题。 3. 本地部署消耗资源。 所以自动部署就成了 Hexo 博客的常见部署方式。 ### CI / CD 服务 常见的自动部署服务有 Travis CI、Netlify、Vercel 等,但这些自动部署服务大多在国内访问都不通畅,部署到 GitHub Pages 则需要通过 Token 这种不安全的方式。相较之下,GitHub Actions 就脱颖而出了:它是 GitHub 直接集成的!这就意味着 GitHub Actions 可以直接使用 GitHub 仓库的密钥,用 SSH 推送到 GitHub Pages 仓库。并且 GitHub Actions 的速度也足够快,部署 Hexo 博客往往只需要 30s 左右。同样的,因为本身是 GitHub 的集成服务,GitHub Actions 的使用也比其他服务要简单,只需新建一个文件即可。 ## GitHub Actions 的使用 ### SSH 密钥 使用 GitHub Actions 时最好用 SSH 这种安全的方式推送到你的仓库,所以我们要先生成一个新的 SSH 密钥: ```bash ssh-keygen -f hexo-deploy-key -C "yourname.github.io" ``` 这个命令会在当前目录下生成 hexo-deploy-key.pub(公钥)和 hexo-deploy-key(私钥)两个文件 **注意**:我的 Hexo 源文件存放在 blog 仓库,GitHub Pages 部署在 HeliumOI.github.io 仓库,后面的配置请读者按照自身情况进行调整。 首先进入你的页面文件仓库(即 yourname.github.io),打开 Settings -> Deploy keys,添加一个 Deploy key,名称随意,内容为文件 hexo-deploy-key.pub 的内容。注意一定要勾选下面的 `Allow write access` 选项,否则部署时这个密钥无法用来推送到仓库。 然后进入你的 Hexo 源文件仓库,打开 Settings -> Secrets,添加一个 Secret,名称为 `DEPLOY_KEY`,后面我们需要在 Workflow 中通过名称 `DEPLOY_KEY` 使用这个密钥,内容为文件 hexo-deploy-key 的内容。 ### Workflow 文件 在 Hexo 源文件夹中新建一个文件 `.github/workflows/deploy.yml`,我的配置如下: ```yaml name: Hexo Deploy # 只监听 master 分支的改动 on: push: branches: - master jobs: build-and-deploy: runs-on: ubuntu-latest steps: # 获取博客源码和主题 - name: Checkout uses: actions/checkout@v2 # 主题文件夹,如果你的主题不是 git submodule 可以不配置 - name: Checkout theme repo uses: actions/checkout@v2 with: repository: jerryc127/hexo-theme-butterfly ref: master path: themes/butterfly # 这里用的是 Node.js 12.x - name: Set up Node.js uses: actions/setup-node@v1 with: node-version: '12' # 缓存 Node 模块,提高构建速度 - name: Get yarn cache directory path id: yarn-cache-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" - name: Use yarn cache uses: actions/cache@v2 id: yarn-cache with: path: ${{ steps.yarn-cache-dir-path.outputs.dir }} key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} restore-keys: | ${{ runner.os }}-yarn- # 安装依赖,我这里使用了 pandoc 渲染页面,所以先安装了 pandoc 再安装 Node 模块 - name: Install dependencies run: | wget https://github.com/jgm/pandoc/releases/download/2.10.1/pandoc-2.10.1-1-amd64.deb sudo dpkg -i pandoc-2.10.1-1-amd64.deb yarn install --prefer-offline --frozen-lockfile # 从之前设置的 secret 获取部署私钥 - name: Set up environment env: DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} run: | sudo timedatectl set-timezone "Asia/Shanghai" mkdir -p ~/.ssh echo "$DEPLOY_KEY" > ~/.ssh/id_rsa chmod 600 ~/.ssh/id_rsa ssh-keyscan github.com >> ~/.ssh/known_hosts # 生成并部署 - name: Deploy run: | npx hexo clean && npx hexo g && npx hexo d ``` 然后再修改一下 Hexo 源文件夹中的 `_config.yml`: ```yaml deploy: type: git repository: [email protected]:yourname/yourname.github.io.git branch: master name: yourname email: [email protected] ``` 这里注意一个问题:很多人(其中也包括我)会在安装主题时保留主题目录中的 `.git` 文件夹以方便更新,GitHub Actions 对 `git submodule` 的处理有点问题。(同为 CI 系统,Vercel、Cloudflare Pages 等就不存在这个问题)所以需要在 Workflow 文件中用 `with` 标注出你使用的 `submodule` ## 使用体验 Push 到仓库后自动触发 GitHub Actions 部署博客,大约 30s 左右就完成了,飞一般的速度! ![](https://cdn.jsdelivr.net/gh/HeliumOI/imghost@latest/githubactions1.png)