阅读 76

GitHub和Coding双管齐下白嫖一个网站

背景

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

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

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

简单说明下我的需求:

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

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

hello

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

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

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

什么是Coding

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

为什么要用Coding

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

话不多说,开干~

开整

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

生成 GitHub token 与 Coding token

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

Github tokenCoding token

  • GitHub token:执行gh-pages分支推送时需要对应GitHubrepo权限
  • Coding token:执行pushCoding仓库时需要对应Codingrepo权限
  • 为了安全性我们需要设置环境变量供脚本使用

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

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

点击 setting => Secrets => New repository secret

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

2

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

创建 GitHub Action 脚本

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

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

整体思路如下:

1

简单说明下:

  • ci.yml的主要作用就是在我们提交代码时,监听到我们的提交行为后,执行我们的build打包脚本,然后把生成的dist目录文件同步到Coding仓库,这一步主要是让Coding获取到部署文件。(同时我们也顺便部署了一个gh-pagesGitHub

  • 对于博客的部署,这一部分我们交给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

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

  1. npm run build 打包生成 dist
  2. dist 目录 pushGitHub gh-pages 分支
  3. dist 目录 pushCoding 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接应一波~

Coding 配置静态博客自动化部署

Coding的配置还是比较友好的,我们只需要点点点,基本完事~

进入我们对应的项目,可以看到仓库已经更新了~

3

接着我们点击左侧菜单进入 持续部署 > 网站托管 页面,点击 新建网站

这里我们的代码来源选择现有仓库,仓库来源选择对应的仓库即可,勾选为静态网站,选择合适节点,等待系统部署即可

4

在部署成功后我们可以查看应用的基本信息

5

这时我们可以看到,系统会默认生成一个可访问的网站地址,如:serverless-page-bucket-2zrujpwd-1258454899.cos-website.ap-shanghai.myqcloud.com

不过,这个地址很不友好,看起来长长的一大串,要是让我记这个地址我直接原地裂开好不好~

好在,我们可以通过配置自定义域名设置自己的网站地址,这里比较简单,根据步骤和自定义域名配置文档几分钟基本就搞定了。

最后就是HTPPS的SSL证书了,我们也可以直接免费开启,很方便,这里需要进入到腾讯云进行一些基本配置,按照按照步骤来即可。

6

OK,大功告成,总的来说还是比较简单的,没什么复杂的逻辑,都是一些基本配置和操作

不过,如果有不明白的地方,也可以花点时间看看文档,应对大多数场景基本没问题~

老实说,白嫖是真滴爽啊😏~

image

文章分类
前端
文章标签