利用 GitHub Actions 实现自动部署静态博客

前言

::: warning

我使用vuepress搭建了一个静态博客,挂在了 Github pagesCoding pages 上面。

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

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

:::

demo

实现

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

然后,将这两个token同时储存到github仓库的 Settings/Secrets 里面。变量名可以随便取,但是注意要和后面的ci.yml文件内的变量名一致,这里取的是 ACCESS_TOKENCODING_TOKEN

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

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

我的 ci.yml 文件:


name: CI

# 在master分支发生push事件时触发。

on: 

  push:

    branches:

      - master

jobs: # 工作流

  build:

    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest

    strategy:

      matrix:

        node-version: [10.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: run deploy.sh # 步骤3 (同时部署到github和coding)

        env: # 设置环境变量

          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量

          CODING_TOKEN: ${{ secrets.CODING_TOKEN }} # 腾讯云开发者平台(coding)私密token

        run: npm install && npm run deploy # 执行的命令  

        # package.json 中添加 "deploy": "bash deploy.sh"

具体步骤不解释了,不知道yaml结构的请自行google

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


#!/usr/bin/env sh

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

set -e

npm run build # 生成静态文件

cd docs/.vuepress/dist # 进入生成的文件夹

# deploy to github

echo 'blog.zerodegree.top' > CNAME

if [ -z "$GITHUB_TOKEN" ]; then

  msg='deploy'

  githubUrl=git@github.com:zerocola777/blog.git

else

  msg='来自github action的自动部署'

  githubUrl=https://zerocola777:${GITHUB_TOKEN}@github.com/zerocola777/blog.git

  git config --global user.name "zerodegree"

  git config --global user.email "77849093@qq.com"

fi

git init

git add -A

git commit -m "${msg}"

git push -f $githubUrl master:gh-pages # 推送到github

# deploy to coding

echo 'www.zerodegree.top\nzerodegree.top' > CNAME  # 自定义域名

if [ -z "$CODING_TOKEN" ]; then  # -z 字符串 长度为0则为true;$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量

   codingUrl=git@e.coding.net:zerodegree/zerodegree.git

else

   codingUrl=https://VzpWUthwxq:${CODING_TOKEN}@e.coding.net/zerodegree/zerodegree.git #注意!!!这里需要使用coding提供的个人令牌的用户名和token

 fi

git add -A

git commit -m "${msg}"

git push -f $codingUrl master # 推送到coding

cd -

rm -rf docs/.vuepress/dist

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

ps. leanku好像有些markdown语法不支持,不过大家应该都看得懂,就不修改了。。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!