使用-github+Action-部署-Hexo-博客

Posted on Edited on In Views:

前言

为便于叙述，统一说明如下：

  • 博客 github 源码仓库默认分支为 main，ssh 地址：git@github.com:username/blog.git
  • username.github.io：博客部署仓库，默认分支为 main
  • hexo_deploy：本地私钥文件
  • `hexo_deploy.pub：本地公钥文件
  • 主题以 NexT 8.13.2 为例

本地 hexo 安装、主题部署流程较简单，步骤省略。

1、配置本地博客源代码库

在本地博客源代码仓库根目录 _config.yml 文件中增加如下部署配置：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: main

注意：github 目前仅允许 ssh 提交，部署仓库必须为 ssh 地址

2、配置专用密钥对

本地重新生成一组密钥对，如 hexo_deploy.pub 与 hexo_deploy。私钥配置到 github 源码仓库的 repository secret，公钥配置到 username.github.io 部署仓库的 Deploy keys。该密钥对专用于「源码仓库」与「部署仓库」之间的 Action 自动部署。

github 源码库新建后即可配置：依次进入 Settings -> Secrets -> Actions -> New repository secret，名称取 HEXO_DEPLOY_SECRET，值取自 hexo_deploy 内容；username.github.io.git 部署仓库配置步骤略。

也可以拿用户公钥 SSH keys（可访问全部仓库）及其对应的私钥完成该步骤，但是用户公钥不一致时（比如办公室和家里使用的用户公钥不同，除非复制同一份密钥对），Action 自动部署的私钥也要更改，使用专用密钥对可避免这个问题。

3、创建 Action

在本地博客源代码库根目录下创建 .github/workflows/deploy.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
55
56
57
58
59
60
61
62
63
64
name: hexo-blog-deploy

on:
  push:
    branches:
      - main

env:
  GIT_USER: username
  GIT_EMAIL: username@gmail.com
  DEPLOY_REPO: username/username.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: [19.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - 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_SECRET: ${{secrets.HEXO_DEPLOY_SECRET}}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"

          # 配置私钥，否则无法访问部署库，提示 git@github.com: Permission denied (publickey).
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_SECRET" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts

          # 设置用户名和邮箱，否则提示 Please tell me who you are.
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL

      - name: Install dependencies
        run: |
          npm install
          npm install hexo-deployer-git --save
          # 全局搜索插件
          npm install hexo-generator-searchdb --save

      - name: Deploy hexo
        run: |
          npm run deploy

4、常用命令

  • 本地启动：hexo s
  • 清除缓存：hexo clean
  • 新建草稿：hexo new draft <filename>
  • 发布草稿：hexo publish [layout] <filename>

5、其他

（可选）部署留言栏 Utterances

安装 github 应用： https://github.com/apps/utterances

next 最新版本已经集成 Utterances，因此不需要复制安装完成后的模板，直接在主题文件根目录下设置 _config.yml 文件即可：

1
2
3
4
5
6
7
8
9
# Utterances
# For more information: https://utteranc.es
utterances:
  enable: true
  repo: username/username.github.io # Github repository owner and name
  # Available values: pathname | url | title | og:title
  issue_term: pathname
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

（可选）部署留言栏 giscus

进入官网（https://giscus.app/）可拿到一段已经填充配置内容的 <script> 标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://giscus.app/client.js"
    data-repo="[在此输入仓库]"
    data-repo-id="[在此输入仓库 ID]"
    data-category="[在此输入分类名]"
    data-category-id="[在此输入分类 ID]"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="preferred_color_scheme"
    data-lang="zh-CN"
    crossorigin="anonymous"
    async>
</script>

如果要在每一篇文章后添加评论功能，以 next 主题为例，仅供参考。进入 themes/next/layout/_macro/post.njk 文件，找到模板中「文章末尾」（注释标志为 END POST BODY，如下所示），将上述片段加入。

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
{#####################}
{### END POST BODY ###}
{#####################}
<footer class="post-footer">
  {%- if is_index %}
    <div class="post-eof" style="margin:20px auto 20px;width:100%;background: transparent;border-top: 1px solid #e2e0e0"></div>
  {% else %}
    {{- next_inject('postBodyEnd') }}
    {%- if post.reward_settings.enable %}
      {{ partial('_partials/post/post-reward.njk') }}
    {%- endif %}
    {%- if theme.creative_commons.license and theme.creative_commons.post and post.copyright !== false %}
      {{ partial('_partials/post/post-copyright.njk') }}
    {%- endif %}
    {%- if theme.follow_me %}
      {{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }}
    {%- endif %}

    {#####################}
    {###   add giscus  ###}
    {#####################}

    <script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
    </script>

    {%- if post.tags and post.tags.length %}
      {%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}
      <div class="post-tags">
        {%- for tag in post.tags.toArray() %}
          <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
        {%- endfor %}
      </div>
    {%- endif %}

（可选）部署域名

参考官方文档：验证用户站点的域

注意：需要在 blog 源代码库 source 目录下放置 CNAME 文件。之后步骤按官方文档进行