前语
前几天完成了用VuePress进行本地化博客网站建立,今日介绍怎么运用主动化布置项目到Github Pages上。
本文介绍两种主动化布置方法，一种是用sh脚本主动化布置，另外一种运用Github的GitHub Actions完成主动化布置。
sh脚本布置
sh脚本是什么
sh脚本是一种文本文件，其间包括一系列的指令和程序，用于在Unix/Linux体系上主动履行使命和操作。sh是shell的简写，是Unix/Linux上默认的指令行解释器。sh脚本能够用于主动化操作、批量处理数据以及在体系启动时主动运行程序等。
布置作业
咱们在 Github 上新建一个库房，库房名为：myblog。
接着修正 config.js 文件，增加 base配置， base的值为刚刚创立的库房名，这个是为了后面拜访Github Pages用的。
此时config.js的结构为
module.exports = {
// ...
base: '/myblog/',
// ...
}
在项目的根目录下创立一个sh脚本，命名为deploy.sh,增加以下内容
#!/usr/bin/env sh
# 保证脚本抛出遇到的过错
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自界说域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:by3679512/myblog.git master:gh-pages
cd -
最终履行脚本，在库房的Settings -> Pages 中能够看到的Github Pages地址
GitHub Actions主动化布置
现在介绍怎么运用GitHub Actions主动化布置项目到Github Pages上。
当咱们完成项目本地化建立后，一般都是运用npm run buid或许yarn build指令进行打包
接着将打包文件长途推送到Github Pages上，拜访Github Pages地址承认是否布置成功
在咱们打包项目和推送静态文件这个进程中，会发现有许多类似的重复性操作，既然是重复性的，咱们能不能把操作写成脚本，以后每次操作只需履行脚本就好呢？
GitHub很早留意到这一点，推出了GitHub Actions帮助开发者完成这个主意。
GitHub Actions是什么？
GitHub Actions 是一个继续集成/继续布置（CI/CD）渠道，能够在 GitHub 上构建、测试和布置代码。它允许开发者界说主动化的作业流程，以呼应不同类型的事情，如提交代码、打标签或发布版别等。GitHub Actions 提供了一组预界说的操作和工具，也能够运用 Docker 或自己的脚本进行自界说操作。
GitHub Actions中的基本概念
-
Workflow：作业流程，即界说主动化进程的 YAML 文件
-
Event：事情，触发作业流程的事情类型，如 push、pull_request 等
-
Job：使命，作业流程中一个独自的履行单元
-
Step：过程，使命中的一个独立操作，能够是一个 shell 指令、一个脚本或一个预界说的操作
-
Action：动作，可重用的代码块，能够在多个作业流程和使命中运用
-
Runner：运行者，托管作业流程的机器，能够是 GitHub 托管的虚拟机或自己的物理机器
关于YAML能够看阮一峰大大的这篇文章
建立一个作业流
创立一个 GitHub 库房命名为 myblog 点击Action进入作业流页面，在这里能够运用他人的作业流，也能够自己创立。
- 前期作业
在布置之前，咱们需要在自己的库房上设置Secrets进行身份验证，而设置Secrets就需要用到Token。
进入 Github 后，点击咱们的头像，进入 Settings -> Developer settings -> Personal access tokens ,点击进入生成token
此处的Note为用途，可随意命名，Expiration为期限，可随意选择，但主张设为No expiration,最终勾选repo 点击Generate token生成
复制刚刚生成的Token，留意Token生成只呈现一次，改写页面会找不到，主张保存好
在库房的 Settings -> Secrets 上，找到New repository secret创立一个secret，命名一定要为ACCESS_TOKEN,然后在Value填写刚刚生成的Token,最终Add secret。
- 创立作业流
在自己项目根目录创立.github/workflows/,并在其间创立文件deploy.yaml,文件命名随个人喜好，只需是yaml类型文件即可。
编写以下脚本
name: Build and Deploy
on: [push] #监听push动作
# 使命
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} #刚刚生成的secret
TARGET_REPO: by3679512/myblog #库房地址
TARGET_BRANCH: gh-pages #目标分支，gh-pages一般用来寄存生成的静态文件
BUILD_SCRIPT: yarn && yarn build
BUILD_DIR: docs/.vuepress/dist/ #生成的静态文件寄存目录
最终将本地库房推送到长途库房。
- 验证成果
翻开长途库房的Settings -> Pages，如果看到GitHub Pages现已生成，说明作业流现已成功履行。当每次咱们在本地推送一个push动作后，GitHub会主动履行.github/workflows/下的脚本，进行项目主动化布置。当然咱们能够点击库房中Actions检查咱们的作业流。
至此，咱们现已完成了项目的主动化布置。
