前言

在使用 vuepress 搭建了一个静态博客后, 挂在了 Github pages 和Coding pages (opens new window)上面

coding pages 在国内的访问速度比 github pages 要快很多, 而且还可以被百度收录

一开始的部署方式是使用sh 部署脚本 (opens new window)把代码提交到这两个平台的仓库分支, 虽然已经很方便了, 但是我还想把博客未打包的源码提交到 Github 主分支上。这就需要我操作两次命令, 我就想能不能只需要一次操作就可以同时把源码、部署代码一次性提交到两个平台呢？

实现

在了解 GitHub Actions 最近(2019.12)刚正式发布了之后, 尝试使用它发现能够满足我的需求。GitHub Actions 入门教程 (opens new window)

首先, 需要获取 token, 后面会用到。获取方法: github 获取 token官方文档 (opens new window)、coding 获取 token官方文档 (opens new window)

然后, 将这两个 token 同时储存到 github 仓库的Settings/Secrets and variables里面,关于更多内容可以参考 security-guides (opens new window) 。变量名可以随便取, 但是注意要和后面的ci.yml文件内的变量名一致, 这里取的是BLOG_PAGES_ACCESS_KEY。 此变量的值来源于申请的person access token, 此 token 对仓库 https://github.com/jacky1234/blogPages.git 具有读权限

GitHub Actions 的配置文件叫做 workflow 文件, 存放在代码仓库的.github/workflows目录

workflow 文件采用 YAML 格式, 文件名可以任意取, 但是后缀名统一为.yml, 比如ci.yml。一个库可以有多个 workflow 文件。GitHub 只要发现.github/workflows目录里面有.yml文件, 就会自动运行该文件

我的ci.yml文件:

name: CI

#on: [push]

# 在master分支发生push事件时触发
on:
  push:
    branches:
      - main
      - master

env: # 设置环境变量
  TZ: Asia/Shanghai # 时区(设置时区可使页面中的`最近更新时间`使用该时区时间)

jobs:
  build: # 自定义名称
    runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式: userName/repoName。作用: 检出仓库, 获取源码。 官方actions库: https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用: 安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: Build-and-deploy # 步骤3
        run: |
          remote_addr=https://github.com/jacky1234/blogPages.git
          commit_info=`git describe --all --always --long`
          user_name=`git log -1 --pretty=format:'%an'`
          user_email=`git log -1 --pretty=format:'%ae'`
          deploy_branch=gh-pages

          yarn
          yarn build
          cd docs/.vuepress/dist
          git config --global init.defaultBranch $deploy_branch
          git init
          git config user.name ${user_name}
          git config user.email ${user_email}
          git add -A
          git commit -m "auto deploy, $commit_info"
          remote_addr=`echo $remote_addr | awk -F'://' '{print $2}'`
          remote_addr=https://${user_name}:${{secrets.BLOG_PAGES_ACCESS_KEY}}@${remote_addr}
          git remote add origin ${remote_addr}
          git push origin HEAD:$deploy_branch --force # 推送到github $deploy_branch分支
          echo 'successfully deploy to https://github.com/jacky1234/blogPages'
          cd -

      # 只提交到github pages也可以使用github-pages-deploy-action, 详见: https://github.com/JamesIves/github-pages-deploy-action

这个配置文件会在我 push 提交代码到主分支时触发工作, 运行环境是ubuntu-latest, 工作步骤:

• 一, 获取仓库源码
• 二, 安装 nodejs, 打包项目有用到 nodejs
• 三, 把 token 设置到环境变量, 安装项目依赖, 然后通过 git push 到指定仓库发布,

再来看看将要被运行的deploy.sh部署代码:

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# https://github.com/jacky1234/blogPages
push_addr=https://github.com/jacky1234/blogPages.git # git提交地址, 也可以手动设置, 比如: [email protected]:xugaoyi/vuepress-theme-vdoing.git
commit_info=`git describe --all --always --long`
dist_path=docs/.vuepress/dist # 打包生成的文件夹路径
push_branch=gh-pages # 推送的分支

# 生成静态文件
npm run build

# 进入生成的文件夹
cd $dist_path

git init
git add -A
git commit -m "deploy, $commit_info"
git push -f $push_addr HEAD:$push_branch

cd -
rm -rf $dist_path

这个文件使用Shell 命令 (opens new window)写的, 它会先运行打包命令, 进入打包好的文件, 创建一个自定义域名的 CNAME 文件(如果你没有自定义域名可去掉这个命令), 判断是否有 token 环境变量, 如果没有说明是在本地自己的电脑上运行的部署, 使用 ssh 代码仓库地址, 如果有 token 环境变量, 说明是 GitHub Actions 自动触发的部署, 此时使用的是可以通过 toKen 来获取代码提交权限的提交地址。最后通过 git 命令提交到各自的仓库, 完成部署

提示:

• Shell 可以获取到环境变量

• 我想给两个平台上部署的博客不一样的自定义域名, 因此做了分开创建 CNAME 文件, 分开提交

至此, 我前面提到的需求就实现啦, 只需要把源码 push 到 github 仓库这一个步骤, 后面的博客打包、部署到 github 和 coding 等工作都由 GitHub Actions 来自动完成

如下你想查看部署日志, 你可以到 github 仓库的 Actions 这一项查看

CI 结果使用邮箱通知

配置 qq 邮箱服务器地址

::: IMAP/SMTP 设置方法 用户名/帐户: 你的 QQ 邮箱完整的地址

密码: 生成的授权码

电子邮件地址: 你的 QQ 邮箱的完整邮件地址

接收邮件服务器: imap.qq.com, 使用 SSL, 端口号 993

发送邮件服务器: smtp.qq.com, 使用 SSL, 端口号 465 或 587

:::

qq 邮箱的授权码更多内容可见链接: SMTP/IMAP 服务 (opens new window)