GitHub + Coding 实现博客快速自动化部署

2021-09-13 本文已影响0人 sssgoEasy

背景

最近不是在弄博客嘛，之前活动的时候买的阿里云服务器过期了，现在也没优惠了，淦_{，搬砖党买不起啊}，现在就想搞个服务器把我博客弄上去跑起来~

我主要就是玩下静态博客和nodejs啥的，对服务端没啥需求，docker和mysql我也不搞，所以就算搞了服务器也是浪费呀，没必要没必要~

我白嫖党只是单纯的想要个白嫖的机会😎

简单说明下我的需求：

有个可以部署博客的服务器（当然最好是免费的_{，这个很重要😆}）
可以和GitHub绑定实现自动化部署（我代码都是放在GitHub的，我提交代码的时候希望可以实现博客自动更新）
要稳定，不能三天两头打不开页面了~那我岂不是很尴尬
访问速度要跟上，最好有CDN加速服务，不能等了半天页面还在转圈圈~
支持自定义域名，最好再给个免费SSL证书，咳咳~

这么简单的要求应该不过分吧~

hello

其实类似hexo等开源博客框架有些已经集成了自动部署至GitHub与Coding的功能。

GitHub我们自不必多少，懂得都懂😐，开源代码首选，很多框架和库基本都对其做了相关部署支持，其提供的gh-pages服务也非常简单方便（GitHub Pages），可供我们快速部署一个网站，而且终生免费~，我直呼GitHub yyds~

对于静态网站服务，Gitee等也都有提供（Gitee Pages），有兴趣的可以自行探索，这里我们主要围绕Coding的使用做一些介绍

什么是Coding

Coding系腾讯旗下全资子公司, 旗下一站式软件研发管理平台—CODING（https://coding.net/ ）是一站式软件研发管理协作平台，提供 Git/SVN 代码托管、项目协同、测试管理、制品库、CI/CD 等一系列在线工具，帮助研发团队快速落地敏捷开发与 DevOps 开发方式，提升研发管理效率，实现研发效能升级。

为什么要用Coding

对于Coding的作用，就我自身使用场景来说，抛开其协作平台能力不谈，其实就类似Gitee一样，属于国内部署，速度提升非常明显，而且还可以被百度收录。由于众所周知的原因，国内访问GitHub速度感人，我也试过一开始直接使用GitHub的gh-pages，但是受网络环境影响很大、波动明显，效率很低，如果只是为了开发的demo展示倒也无妨，但毕竟是作为博客使用，还是求稳定，因此最终选择了Coding作为仓库镜像，当然这里换成Gitee也是一样的。

话不多说，开干~

开整

这里就以我的博客举例说明：https://ssscode.com/

生成 GitHub token 与 Coding token

这一步主要是为了给GitHub Action脚本提供token使用权限

Github token、Coding token

GitHub token：执行gh-pages分支推送时需要对应GitHub的repo权限
Coding token：执行push到Coding仓库时需要对应Coding的repo权限
为了安全性我们需要设置环境变量供脚本使用

token的配置还是蛮简单的，我们把 repo的权限勾选就行，其他无所谓

我们拿到GitHub生成的token值、与Coding生成的token值，在我们的GitHub仓库下

点击 setting => Secrets => New repository secret

新建秘钥，把值对应粘贴进去，确保 key是一致的： ACCESS_TOKEN/CODING_TOKEN

这样，在我们执行脚本的时候就可以获取到环境变量 ACCESS_TOKEN/CODING_TOKEN了

创建 GitHub Action 脚本

首先在项目目录下创建文件夹 .github/workflows

然后我们在该目录下创建脚本文件 ci.yml

整体思路如下：

简单说明下：

ci.yml的主要作用就是在我们提交代码时，监听到我们的提交行为后，执行我们的build打包脚本，然后把生成的dist目录文件同步到Coding仓库，这一步主要是让Coding获取到部署文件。（同时我们也顺便部署了一个gh-pages到GitHub）
对于博客的部署，这一部分我们交给Coding处理。

yml语法也比较简单，有不清楚的同学可以查看阮一峰老师的教程 YAML 语言教程

# 流程名称
name: Deploy

# 监听事件
on:
  push: # 监听push事件，在master分支发生push事件时触发。
    branches:
      - master

jobs: # 工作流
  build: # 自定义名称
    name: deploy-site
    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest

    steps: # 步骤
      - name: Checkout # 步骤 1
        uses: actions/checkout@v2 # 作用：检出仓库，获取源码

      - name: Use Node@14.x # 步骤 2
        uses: actions/setup-node@v1 # 作用：安装nodejs环境
        with:
          node-version: 14.x

      - name: Install dependencies # 步骤 3
        run: npm install # 安装依赖

      - name: run deploy.sh # 步骤  3 （同时部署到github和coding）
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
          CODING_TOKEN: ${{ secrets.CODING_TOKEN }} # toKen私密变量
        run: npm run deploy # 运行我们自己写的shell脚本

package.json

{
  "scripts": {
    "deploy": "bash deploy.sh"
  }
}

因为逻辑比较多，所以，我单独把部署流程写成独立的脚本抽离出来了，接下来我们切入 deploy.sh

编写部署脚本 deploy.sh

该脚本主要执行以下几个步骤：

npm run build 打包生成 dist
把 dist 目录 push 到 GitHub gh-pages 分支
把 dist 目录 push 到 Coding master 分支

记得在文件头部指明编译器：#!/usr/bin/env sh

#!/usr/bin/env sh

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

# 系统当前时间
nowDate=$(date "+%Y-%m-%d %H:%M:%S")

# 生成静态文件
npm run build

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

msg="deploy.sh===>update：${nowDate}"

# 设置 git用户信息
git config --global user.name "JS-banana"
git config --global user.email "sss213018@163.com"

# git commit 
git init
git add -A
git commit -m "${msg}"

# deploy to github
githubUrl=https://JS-banana:${GITHUB_TOKEN}@github.com/JS-banana/vuepress.git
git push -f $githubUrl master:gh-pages # 推送到github

# deploy to coding
#注意！！！这里需要使用coding提供的个人令牌的用户名和token
codingUrl=https://个人令牌的用户名:${CODING_TOKEN}@e.coding.net/ssscode/blog/vuepress.git 
git push -f $codingUrl master # 推送到coding

# 退回开始所在目录
cd -

# 删除 dist
rm -rf docs/.vuepress/dist

ok，至此，GitHub的工作结束~

我们现在去Coding接应一波~