LV015-GithubPages自动发布

我有一个 hexo 静态站点，托管在 Github Pages 上，每一次都要手动更新，是不是可以通过 Github Actions 搞一个自动更新的东西，当我上传自己的笔记的时候，自动更新站点？若笔记中有错误或者不合适的地方，欢迎批评指正 😃。

在刚开始使用 Hexo 的时候安装的脚本、插件、引用的样式和文章等都比较少，编译部署起来就还好，时间也不长，但是当哪些越来越多的时候，编译时间也越来越久，而且 Gitee Pages 在仓库部署完毕后，还需要手动点击更新，才能完成页面的部署，不免就有些麻烦了，本文将介绍 Github 自带的自动部署工具 Github Actions 来实现静态网站的自动部署。

一、Github Actions 介绍

Github Actions 是 GitHub 于 2018 年 10 月推出的一个 CI/CD 服务。那什么是 CI/CD 呢？CI/CD 其实说的是三件事情：

• 持续集成（Continuous Integration）
• 持续交付（Continuous Delivery）
• 持续部署（Continuous Deployment）

按照自己的理解，就是一个可以在 Github 仓库中自动执行一些命令的工具，它的配置文件为 yaml 格式。本文不是主要详细介绍它的语法，而是介绍如何使用这个工具来完成自动部署，所以这里就不写更多关于语法的啦（主要原因还是自己也不是特别了解 😭），更多详细介绍可以查看官方介绍文档： Github Actions

二、Github Actions 使用

• 参考教程

博客名称	教程原帖
Akilar の 糖果屋	使用 Github Action 实现全自动部署
卓越科技的 Blog	使用 Github Actions 自动部署博客

• 相关 Github 项目

项目说明	项目地址
镜像仓库	Git Mirror Action
自动部署 Gitee Pages	Gitee Pages Action

注意：若是直接复制以下代码，还请替换 [UserName] 为自己的 Github 或者 Gitee 名字，另外就是那些环境变量一定要在自己站点源码的 Secrets 中配置好。

1. 创建仓库

在一切的一切开始之前肯定是需要一个仓库啦 😄，我这里存放源码的是创建的私人仓库，这里就不写如何创建仓库、建立远程连接和上传源码了。

2. 获取 Token

Token 就是 Personal access tokens，即私人访问令牌，看自己的源码仓库是放在 Github 还是其他平台了，我的是在 Github 上，Gitee 作为镜像站，所以我只需要在 Github 上进行操作，这里简单记录一下如何在这两个平台获取 Token 的方式。

2.1 Github

点击这里 【Github 官网】→【右上角头像】→【Settings】→【Developer Settings】→【Personal access tokens】 打开 Personal access tokens 设置项。

选择 generate new token 创建自己的私人访问令牌。Note 也就是私人令牌的名称，随意命名就可以，不过要符合 Github 的要求，Select scopes 中是选择私人访问令牌的权限，至少要勾选 repo 选项。

最后点击最下方的创建就可以生成自己的私人访问令牌啦，不过这个私人访问令牌只有创建的时候才会显示一次，后边是查看不了的，所以要注意记录下来。

2.2 Gitee

点击这里 【Gitee 官网】→【右上角头像】→【设置】→【私人令牌】，打开设置后下拉就可以找到【私人令牌】选项了，打开该设置项。

点击生成新令牌即可转到私人令牌创建界面，接下来是填写描述、勾选权限，由于是自己用的，所以我全部都勾选了。

最后点击提交，然后输入登录密码进行验证即可生成自己的私人令牌，Gitee 的私人访问令牌也是只有创建的时候才会显示一次，后边是查看不了的，所以也要注意记录下来。

3. 在源码仓库创建环境变量

不想在文件中直接写私人令牌的话，可以在自己存放源码的仓库中添加环境变量：【Settings】→【Secrets】→【New repository secret】，在这里添加完之后，便可以在 Github Actions 的配置文件中通过 secrets.[Environment secrets name] 来引用，更加的安全一些。

4. 创建 Github Actions 的配置文件

在站点 [blogRoot] 文件夹下也就是根目录下创建 .github/workflows 工作流程文件夹，一共创建 2 个文件夹 workflows 为 .github 的子文件夹，然后再工作流程文件夹下创建自动部署配置文件 autodeploy.yml，名字任取，是 yml 格式文件即可。

# 当有改动推送到master分支时，启动Action
name: 自动部署

on:
  push:             # 有推送时就触发
    branches:
      - master

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支
      uses: actions/checkout@v2
      with:
        ref: master

    - name: 安装 Node
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

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

    - name: 缓存 Hexo
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - name: 生成静态文件
      run: |
        hexo clean
        hexo generate

    - name: 部署Github
      env:
        TIME_ZONE: Asia/Shanghai
        # 要部署的公共仓库
        DEPLOY_REPO: [UserName]/[UserName].github.io
        # 要部署的分支
        DEPLOY_BRANCH: master
        # 在私人源码仓库的设置中设置私钥：[SourceRepo]-->Settings-->Setrets-->Actions secrets
        GITHUB_PERSONAL_TOKEN: ${{ secrets.GITHUBPERSONALTOKEN }}
        GITHUB_USER_NAME: ${{ secrets.GITHUBUSERNAME }}
        GITHUB_USER_EMAIL: ${{ secrets.GITHUBUSEREMAIL }}
      run: |
        cd ./public && git init
        git config user.name "$GITHUB_USER_NAME"
        git config user.email "$GITHUB_USER_EMAIL"
        git add .
        git commit -m "Automated Deployment By GitHub Actions @ $(date '+%Y-%m-%d %H:%M:%S') ${TIME_ZONE}"

        # --quiet: Suppress all output, including the listing of updated refs, unless an error occurs. Progress is not reported to the standard error stream.
        git push --force --quiet "https://$GITHUB_PERSONAL_TOKEN@github.com/$DEPLOY_REPO" master:$DEPLOY_BRANCH

5. 添加 gulp 压缩功能

本地的时候有 gulp 压缩代码功能，自然也是可以实现 Github Actions 自动部署的时候进行静态压缩啦，在 autodeploy.yml 配置文件的 job 中 部署Github 之前添加以下内容，若是有报错之类的，可以将 安装gulp 相关内容移动到 安装依赖 之前。

- name: 安装gulp
  run: |
    npm install gulp

- name: gulp压缩站点文件
  run: |
    gulp

6. 同步自动部署 Gitee Pages

不过后来Gitee Pages关闭了，推荐部署到腾讯的EOPages上，这里就没啥用了，后面都是用CNB自动部署了。

有大神编写了插件以便于实现 Gitee Pages 的自动部署，相关文章和相关的 Github 项目在文章开头已经说过，可以参考，另外仓库的说明文档中也写了具体的使用方法。

6.1 添加私钥和密码

• 第一步：添加个人私钥和 Gtiee 的登陆密码到站点私有仓库的环境变量中

个人私钥和公钥都在 .ssh 文件夹内，私钥为 ~/.ssh/id_rsa 文件内，使用时将文件内所内容，包括 -----BEGIN RSA PRIVATE KEY----- 和 -----END RSA PRIVATE KEY----- 在内的全部内容都存放到变量值里。Gitee 密码就是自己的登录密码。

这里的私钥是哪里的私钥？应该是我们在上传源码的时候的设备中 SSH 相关目录下的私钥，需要注意的是 GitHub 和 Gitee 上要有相同的一个 SSH 公钥，仓库中的私钥要与公钥相配对：

否则就可能出现下边的问题：

6.2 自动部署配置文件

• 第二步：修改自动部署配置文件，在结尾添加以下内容：

- name: 同步到 Gitee
  uses: wearerequired/git-mirror-action@master
  env:
      # 注意在私人源码仓库的设置中：[SourceRepo]-->Settings-->SetretsSettings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
      SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
  with:
      # 注意替换为自己的 GitHub 源仓库地址
      source-repo: "git@github.com:[UserName]/[UserName].github.io.git"
      # 注意替换为自己的 Gitee 目标仓库地址
      destination-repo: "git@gitee.com:[UserName]/[UserName].git"

  # 第一次需要手动部署Gitee Pages,而且登录地点会变成美国，将有一条警告邮件
- name: 构建 Gitee Pages
  uses: yanglbme/gitee-pages-action@master
  with:
      # 注意替换为自己的 Gitee 用户名
      gitee-username: [UserName]
      # 注意在私人源码仓库的设置中：[SourceRepo]-->Settings-->SetretsSettings->Secrets 配置 GITEE_PASSWORD
      gitee-password: ${{ secrets.GITEE_PASSWORD }}
      # 注意替换为自己的 Gitee 仓库
      gitee-repo: [UserName]/[UserName]
      branch: master

• Gitee 部署失败

脚本的原理是用程序代替人工去点击 Gitee Pages 的更新按钮。所以需要先手动做一次页面部署，确保有那个更新按钮在，脚本才有生效的前提。

• Gitee 用 Github Actions 自动部署更新收到短信，提示异地登录需要验证码。

因为 Github Actions 使用的是美国的服务器，所以，使用 Github Actions 来远程更新 Gitee 的站点部署时，会收到异地登陆的短信，提示需要验证码。这个在脚本作者的 issues 里有相应的解决方案： 登陆失败 #6 我是直接之前绑定过微信的，所以每次只有异地登陆提醒，还没有收过验证码，如果之前没有绑定过的话，在微信上搜索 Gitee 微信公众号，可以在微信公众号内绑定自己的 Gitee 账号，这样虽然还是会有异地登录提示，但是发过来的消息不再需要填写验证码。