背景
最近不是在弄博客嘛，之前活动的时候买的阿里云服务器过期了，现在也没优惠了，淦，搬砖党买不起啊，现在就想搞个服务器把我博客弄上去跑起来~
我主要就是玩下静态博客和nodejs啥的，对服务端没啥需求，docker和mysql我也不搞，所以就算搞了服务器也是浪费呀，没必要没必要~
我白嫖党只是单纯的想要个白嫖的机会
简单说明下我的需求：
- 有个可以部署博客的服务器（当然最好是免费的，这个很重要）
- 可以和GitHub绑定实现自动化部署（我代码都是放在GitHub的，我提交代码的时候希望可以实现博客自动更新）
- 要稳定，不能三天两头打不开页面了~那我岂不是很尴尬
- 访问速度要跟上，最好有CDN加速服务，不能等了半天页面还在转圈圈~
- 支持自定义域名，最好再给个免费SSL证书，咳咳~
这么简单的要求应该不过分吧~
其实类似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 [email protected] # 步骤 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到 GitHubgh-pages分支 - 把
dist目录push到 Codingmaster分支
记得在文件头部指明编译器：#!/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 "[email protected]"
# 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接应一波~
Coding 配置静态博客自动化部署
Coding的配置还是比较友好的，我们只需要点点点，基本完事~
进入我们对应的项目，可以看到仓库已经更新了~
接着我们点击左侧菜单进入 持续部署 > 网站托管 页面，点击 新建网站
这里我们的代码来源选择现有仓库，仓库来源选择对应的仓库即可，勾选为静态网站，选择合适节点，等待系统部署即可
在部署成功后我们可以查看应用的基本信息
这时我们可以看到，系统会默认生成一个可访问的网站地址，如：https://serverless-page-bucket-2zrujpwd-1258454899.cos-website.ap-shanghai.myqcloud.com
不过，这个地址很不友好，看起来长长的一大串，要是让我记这个地址我直接原地裂开好不好~
好在，我们可以通过配置自定义域名设置自己的网站地址，这里比较简单，根据步骤和自定义域名配置文档几分钟基本就搞定了。
然后我们就可以使用自己的域名访问了~起飞：https://ssscode.com
最后就是HTPPS的SSL证书了，我们也可以直接免费开启，很方便，这里需要进入到腾讯云进行一些基本配置，按照按照步骤来即可。
OK，大功告成，总的来说还是比较简单的，没什么复杂的逻辑，都是一些基本配置和操作
不过，如果有不明白的地方，也可以花点时间看看文档，应对大多数场景基本没问题~
老实说，白嫖是真滴爽啊~