将GitHub Action产生的Hexo网站在另一仓库的GitHub Page托管

发表于 更新于 分类于 ， ， 本文字数： 1.2k 阅读时长 ≈ 4 分钟
记录在两个不同的GitHub仓库中、前者储存Hexo网站源码调用GitHub Action生成网页、后者提供GitHub Page托管的流程。

一、创造源仓库和目标仓库

  1. 创建源仓库new-test-blog-src和目标仓库new-test-blog-site；

  2. 在本地创建一个目录new-test-blog-src，运行：

    1
    2
    3
    hexo init .
    npm install     # 安装缺失的包
    hexo s          # 测试是否可用

    确保Hexo可用；

  3. 在本地初始化Git仓库，并将产生的文件提交到new-test-blog-src仓库的master分支，先不要上传。

二、准备用于访问仓库的令牌

(Ⅰ) 使用Classic Personal Access Tokens

  1. 打开用户的Settings→Developer Settings→Personal access tokens→Tokens (classic)[1]；
  2. 点击Generate new token (classic)创造新的令牌，允许repo范围；
  3. 记录下令牌内容，仅显示这一次。

(Ⅱ) 使用Fine-grained Personal Access Tokens（推荐）

  1. 打开用户的Settings→Developer Settings→Personal access tokens→Fine-grained tokens[1]；
  2. 点击Generate new token创造新的令牌，进入New fine-grained personal access token页面；
  3. 在Repository access中选择Only select repositories，再选择目标仓库new-test-blog-site；
  4. 在Permissions→Repository permissions中，将Contents设为Access: Read and write；其余不用修改；
  5. 记录下令牌内容，仅显示这一次。

三、给源仓库设置变量

  1. 在源仓库new-test-blog-src中，打开Settings→Secrets and variables→Actions页面[2]；
  2. 在Variables选项卡中，点击New repository variable增加一个新的变量，名称为EX_REPO_PATH，内容为new-test-blog-site的地址，其格式为<用户名>/<仓库名>，注意不要带.git尾缀；
  3. 在Secrets选项卡中，点击New repository secret增加一个新的变量，名称为EX_REPO_TOKEN，内容为刚才创建的令牌。

四、给源仓库增加GitHub Action配置

  1. 创建.github/workflows/pages.yml文件，内容为：

    展开
    pages.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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    name: Pages

    on:
      push:             # 仅允许Push触发，禁止Pull Request触发
        branches:
          - master      # 触发GitHub Action的提交分支

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
            with:
              token: ${{ secrets.GITHUB_TOKEN }}
              # If your repository depends on submodule, please see: https://github.com/actions/checkout
              submodules: recursive
          - name: Use Node.js 20
            uses: actions/setup-node@v4
            with:
              # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
              # Ref: https://github.com/actions/setup-node#supported-version-syntax
              node-version: "20"
          - name: Cache NPM dependencies
            uses: actions/cache@v4
            with:
              path: node_modules
              key: ${{ runner.OS }}-npm-cache
              restore-keys: |
                ${{ runner.OS }}-npm-cache
          - name: Install Dependencies
            run: npm install
          - name: Build
            run: npm run build
          # 这个任务会额外复制一些文件，如果需要则取消注释并改为所需的命令
          # - name: Preprocess for Deployment
          #   run: cp -t public/ .gitattributes LICENSE
          - name: Deploy to Target Repo
            uses: peaceiris/actions-gh-pages@v4
            with:
              # 目标仓库路径，变量名由上一步设置决定
              external_repository: ${{ vars.EX_REPO_PATH }}
              # 提交到目标仓库的分支名，设为'gh-pages'会自动应用Git Pages的设置，建议不要改
              publish_branch: gh-pages
              # 需要提交到目标仓库的目录，Hexo生成结果所在目录
              publish_dir: ./public
              # 访问目标仓库的令牌，变量名由上一步设置决定
              personal_token: ${{ secrets.EX_REPO_TOKEN }}
              # 提交到目标仓库时使用的作者和邮箱
              user_name: github-actions
              user_email: github-actions@github.com
              # 提交到目标仓库时的提交消息，引用了一些变量，详见[3]
              # 如果不设置提交消息会附上仓库地址和提交哈希，使用full_commit_message指定则不会
              # 关于commit_message和full_commit_message的区别，详见[4]
              full_commit_message: "Deploy by ${{ github.sha }}."

    官方的参考pages.yml中使用了actions/upload-pages-artifact和actions/deploy-pages，但是只能传到本仓库；而peaceiris/actions-gh-pages@v4可以传到其他仓库。

    对于user_name、和user_email，可以通过github.actor获得自己的用户名，但是邮箱不行。参考设置：

    1
    2
    3
    user_name: ${{ github.actor }}
    user_email: ${{ github.actor }}@users.noreply.github.com    # GitHub提供的noreply邮箱
    user_email: ${{ VARIABLE }}                                 # 或者自己指定

    出于将自动化脚本的提交与人工提交区分开来以方便审计和追踪的目的，建议如下设置：

    1
    2
    user_name: github-actions
    user_email: github-actions@github.com

    这不是强制规定，但是社区的推荐惯例。

  2. 在源仓库中_config.yml文件中的url修改为GitHub Page会使用的地址，格式为https://用户名.github.io/new-test-blog-site；

  3. 提交源仓库，到Actions页面观察workflows的运行情况；

  4. 如果有错误则修复。

五、给目标仓库设置GitHub Pages

  1. 在目标仓库new-test-blog-site中，打开Settings→Pages页面；
  2. 检查部署网站地址、源文件来源、分支是否正确，如果上一步地址设置错误则修改后重新Push；
  3. 打开部署网站地址，检查网页是否显示正常。

参考

  1. 管理个人访问令牌 - GitHub 文档；
    Managing your personal access tokens - GitHub Docs；
  2. 在变量中存储信息 - GitHub 文档；
    Store information in variables - GitHub Docs；
  3. 访问有关工作流运行的上下文信息 - GitHub 文档；
    Accessing contextual information about workflow runs - GitHub Docs；
  4. peaceiris/actions-gh-pages: GitHub Actions for GitHub Pages；
  5. 使用Github Action实现全自动部署 | Akilarの糖果屋。