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

最新推荐文章于 2024-02-27 16:45:17 发布

关注前端小帅

最新推荐文章于 2024-02-27 16:45:17 发布

阅读量537

点赞数

分类专栏：服务器文章标签： github 云服务

本文链接：https://blog.csdn.net/weixin_44777255/article/details/120273810

版权

服务器专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景

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

我主要就是玩下静态博客和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接应一波~

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

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

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

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

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

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

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

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

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

然后我们就可以使用自己的域名访问了~起飞：https://ssscode.com

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

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

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

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

关注前端小帅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
GitHub + Coding 实现博客快速自动化部署

背景最近不是在弄博客嘛，之前活动的时候买的阿里云服务器过期了，现在也没优惠了，淦，搬砖党买不起啊，现在就想搞个服务器把我博客弄上去跑起来~我主要就是玩下静态博客和nodejs啥的，对服务端没啥需求，docker和mysql我也不搞，所以就算搞了服务器也是浪费呀，没必要没必要~我白嫖党只是单纯的想要个白嫖的机会????简单说明下我的需求：有个可以部署博客的服务器（当然最好是免费的，这个很重要????）可以和GitHub绑定实现自动化部署（我代码都是放在GitHub的，我提交代码的时候希望可以实
复制链接

扫一扫