使用 GitHub Actions 自动部署博客教程

时间 2020-02-24

标签使用 github actions 自动部署博客教程栏目 Git 繁體版

原文原文链接

本篇以 Github Pages 为例，而且假设你已经掌握了 GitHub Pages 的使用。html

假设你的文章和静态文件在同一个仓库，使用 master 分支管理文章和代码，使用 gh-pages 分支存放生成的静态文件vue

通常部署博客的流程是：git

写一篇文章
生成静态文件：npm run build
切换 gh-pages 分支
复制静态文件到 gh-pages 分支
访问网址验证是否成功

博客就是用来写文章的，每次写篇文章还要搞那么多操做。github

当你使用了 GitHub Actions 以后，流程能够简化为：npm

写一篇文章
提交到 GitHub

结束了，是否是很方便？ubuntu

从机械的流程中解脱，专一于写做。服务器

那么开始打造咱们的 GitHub Actions 吧。网站

我建立了一个示例项目在个人 GitHub 仓库，用的是 VuePress（一个 Vue 官方的静态站点生成器）。ui

设置 Secrets

后面部署的 Action 须要有操做你的仓库的权限，所以提早设置好 GitHub personal access（我的访问令牌）。搜索引擎

生成教程能够看 GitHub 官方的帮助文档：建立用于命令行的我的访问令牌。

授予权限的时候只给 repo 权限便可。

令牌名字必定要叫：ACCESS_TOKEN，这是后面的 Action 须要用的。

编写 workflow 文件

持续集成一次运行的过程，就是一个 workflow（工做流程）。

项目结构如图：

建立.github/workflows/main.yml文件（能够到个人示例仓库中查看），内容以下：

name: Deploy GitHub Pages

# 触发条件：在 push 到 master 分支后
on:
  push:
    branches:
      - master

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 生成静态文件
      - name: Build
        run: npm install && npm run docs:build

      # 部署到 GitHub Pages
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist

这里我就不对语法做讲解了，须要了解 workflow 的基本语法能够查看官方帮助，也能够参考阮一峰老师的 GitHub Actions 入门教程。

这里我写了三步：

拉取代码。用到了一个 GitHub 官方 action：actions/checkout 。
生成静态文件。直接运行脚本，若是你不是用的 VuePress 或者脚本不同，要修改为你本身的。
部署到 GitHub Pages。使用了第三方做者的 action：JamesIves/github-pages-deploy-action@releases/v3。我详细介绍下这个 action：

使用 with 参数向环境中传入了三个环境变量：

ACCESS_TOKEN：读取 GitHub 仓库 secrets 的 ACCESS_TOKEN 变量，也就是咱们前面设置的
BRANCH：部署分支 gh-pages（GitHub Pages 读取的分支）
FOLDER：须要部署的文件在 docs/.vuepress/dist 路径，也就是咱们使用 npm run docs:build 生成的静态文件的位置

这里有一点须要注意：我使用的是 v3 版本，须要使用 with 参数传入环境变量，且须要自行构建；网上常见的教程使用的是 v2 版本，使用 env 参数传入环境变量，不须要自行构建，可以使用 BUILD_SCRIPT 环境变量传入构建脚本

至此，配置工做均已完成。提交你的代码，就会开启自动构建。

之后，你每次有代码 push 到 master 分支时，GitHub 都会开始自动构建。

验证

部署失败

按照教程是不会失败的，可是建议你了解下失败的状况。

若是部署失败你会收到一封部署失败的邮件

点击能够跳转到仓库的 Action 页面查看日志

展开错误的部署 job 查看日志

能够看到有这么一个错误日志：No such file or directory，经排查，是没有生成静态文件，所以致使路径不存在。

我这个错误是因为参考了网上常见的教程致使的。网上大部分教程（包括前面提到的阮一峰老师的教程）使用的是： JamesIves/github-pages-deploy-action 的 v2 版本，然而引用的时候写的都是： JamesIves/github-pages-deploy-action@master，引用的 master 分支。在做者写的时候可能当时这个 action 最新的就是 v2 版本，因此没有什么问题。然而如今 master 分支已是 v3 版本了，语法有变化，彻底按照教程就会出错。若是继续使用他的教程能够改为 JamesIves/github-pages-deploy-action@releases/v2。

修复后从新提交，GitHub 会再次部署。

部署成功

点击仓库的 Actions，查看部署状况。

若是正在部署中，应该是图中标出的这个样子。

这里显示全部的部署（应该叫作 Workflow，便于理解，就叫部署了）记录。图中有三种状态，分别是：部署中（黄色动态图标）、部署完成（绿色对号图标）、部署失败（红色错号图标）。

点击进入查看部署状况。

部署成功，全是绿色~

接下来访问网站验证一下：https://lasyislazy.github.io/gh-pages-action-demo/

完美结束，享受 GitHub Actions 带来的愉快体验吧~

其余

鉴于仍是有不少人不是用的 GitHub Pages，我这里再提供一下其余方式的思路，其实都是同样的，大概分红三步：

拉取代码
生成静态文件
部署到服务器

前两步都是同样的，不一样的方式区别也就在于第三步。

使用 GitHub Pages 的话可使用 JamesIves/github-pages-deploy-action 这个 action，使用其余的方式其实也能够找到对应的 action。

例如，个人网站是部署在虚拟主机空间上的，平时部署是用 FTP 的方式替换主机空间上的静态文件，所以找到了一个能够部署到 FTP 上的 acton SamKirkland/FTP-Deploy-Action，而后第三步就变为了：

- name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: xxx.xxx.com
          FTP_USERNAME: xxxx
          FTP_PASSWORD: ${{ secrets.BLOG_FTP_PASSWORD }}
          LOCAL_DIR: docs/.vuepress/dist
          REMOTE_DIR: /htdocs
          ARGS: --delete --transfer-all --exclude=logreport --verbose

通常都是传一些环境变量进去就能够了，须要哪些环境变量去这个 action 的 GitHub 上看下介绍就行了。

最后再说一下怎么找 action，如下是几个经常使用的网址：

https://github.com/actions：GitHub 官方的 action
https://github.com/marketplace?type=actions：GitHub 官方市场中的 action
https://github.com/sdras/awesome-actions：第三方收集的有用的 action

而后就是要利用好搜索引擎了。

实在找不到就得本身写 action 了，本篇就不讨论了。

以上即是本篇教程所有内容，本篇首发于个人我的博客：https://www.lasy.site/

参考连接：