十分钟带你体验github actions，以后简历可以写 CI/CD 了~亮点！

前言

大家好，分钟我是体点林三心，用最通俗易懂的后简话讲最难的知识点是我的座右铭，基础是历可D亮进阶的前提是我的初心。

个人网站的分钟部署

相信很多前端兄弟都买过服务器，并且把自己的体点个人项目部署到服务器上，就比如我最近在搞个人的后简博客网站，我用的历可D亮是腾讯云的服务器，前端用的分钟是vuepress去进行当做博客的框架

但是我每次部署到服务器都要分为几步：

提交代码本地打包，并压缩成zip登录服务器宝塔，体点上传zip解压到指定目录

这样才能在网站上看到我部署后的后简成果

图片

能否实现自动化

我需要手动做这么多事情？那我能不能用某些方式，做到自动化呢？历可D亮比如：

我只需要做：提交代码自动化：打包、zip、分钟上传、网站模板体点解压

也就是后简我只需要提交代码，剩下的事情自动化都帮我去自动完成了，如果了解过 CI/CD 的朋友就知道，其实现在市场上提供了很多很多的自动化部署工具，比如：

github actionsgitlab cijenkins

由于后两个都是公司项目里用的多，至于我们自己个人项目，我们用github actions比较方便一些，也很简单~所以我今天就教教大家怎么使用github actions自动化部署自己的个人项目吧！

开搞

前置知识

我们刚刚说了：

我只需要做：提交代码自动化：打包、zip、上传、解压

图片

那要怎么在github中去执行 打包、zip、上传、解压 呢？我们需要使用到 workflows

github token

貌似现在终端中github操作使用token去操作会更加方便？我们可以先去github申请一个token，以后做事也方便~

图片

接着进去到开发者设置，直至找到创建token的按钮~

图片

图片

这两个记得勾起来哦~不然后面搞不了github actions滴

图片

workflows & job & step

我们需要在项目中新建.github文件夹，然后创建workflows文件夹，这个workflows文件夹里放的就是你要执行的一些命令，这些命令就包含 打包、zip、上传、服务器租用解压 ~

当我们把这些东西提交到 github后， github会去识别.github中的workflows中的这些yml，并去执行它们（可以多个yml文件）

图片

我们可以在ci.yml中先写一些测试的脚本，我们可以认识几个关键字：

job：可以理解为任务step：可以理解为一个任务中的一些步骤run：跑命令，执行 复制name: CI on: # 代码push的时候触发 push: # main分支的时候触发 branches: main jobs: # 定义一个job，名字为CI CI: # 使用github提供给我们的机器去跑 runs-on: ubuntu-latest # 步骤 steps: # 步骤名为test - name: test # 打印哈哈 run: echo 哈哈哈1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.

接着我们提交代码到github上，我们可以看到，在Actions中多了一个任务，名字是你的commit msg

图片

我们可以点进去看看这个任务的详情，我们可以看到它执行了我们写的那些命令~

图片

准备一些服务器资料

其实你可以把github actions中跑任务的地方想成是一个终端，我们想想平时终端ssh登录你的服务器，需要用到什么东西：

服务器的IP用户名密码

密码又分成自己设置的密码，或者秘钥，而在github actions我们需要使用秘钥去登录~那我们要怎么获取这个秘钥呢？很简单，我是腾讯云，我们需要先进入腾讯云，服务器托管进入秘钥，点击 创建秘钥

图片

一定要注意！！！！！秘钥的地域，一定要选择跟你服务器地域一样的才行！！！

图片

图片

创建完后，你会获取到一个秘钥，现在就可以拿这个秘钥去免密登录了~

图片

但是我们要怎么把这个秘钥复制出来呢？我这边是选择了去宝塔上复制的，怎么打开宝塔面板呢？我们可以先点击远程登录

图片

接着登录后，在终端输入/etc/init.d/bt default

图片

复制宝塔的外网链接，打开，并登录~进入之后点击 SSH安全管理

图片

把这个秘钥给复制下来~之后的github actions免密登录服务器需要用到这个

图片

接着回到github，我们需要把这三个变量设置进github的 action中，这样我们在跑github actions时才能获取到这三个变量

D_HOST：写上服务器ipD_USER：写上登录用户名D_PASS：写上刚刚复制的秘钥

图片

ci.yml

接着我们就可以完善ci.yml了，我们可以使用一些github actions提供给我们的工具，去完成一些操作，比如：

actions/checkout@v2：用来拉取最新代码actions/setup-node@v3：用来安装nodeactions/cache@v3：用来缓存node_modulseasingthemes/ssh-deploy@v2.0.7：用来把产物部署到服务器 复制name: CI on: # 代码push的时候触发 push: # main分支的时候触发 branches: main jobs: # 定义一个job，名字为CI CI: # 使用github提供给我们的机器去跑 runs-on: ubuntu-latest # 步骤 steps: # 拉取最新的代码 - name: Checkout repository uses: actions/checkout@v2 # 安装node环境 - name: Use Node.js uses: actions/setup-node@v3 with: node-version: "16.x" # 为node_modules设置缓存 - name: Cache # 缓存命中结果会存储在steps.[id].outputs.cache-hit里，该变量在继后的step中可读 id: cache-dependencies uses: actions/cache@v3 with: # 缓存文件目录的路径 path: | **/node_modules key: ${ { runner.OS}} # 安装依赖 - name: Installing Dependencies # 如果命中缓存，就不需要安装依赖，使用缓存即可 if: steps.cache-dependencies.outputs.cache-hit != true run: npm install # 打包 - name: Build run: | npm run docs:build zip -r vuepress ./vuepress/** # 产物上传服务器 - name: Upload to Deploy Server uses: easingthemes/ssh-deploy@v2.0.7 env: # 免密登录的秘钥 SSH_PRIVATE_KEY: ${ { secrets.D_PASS }} # 服务器登录用户名 REMOTE_USER: ${ { secrets.D_USER }} # 服务器的公网IP REMOTE_HOST: ${ { secrets.D_HOST }} # 你打包后产物的文件夹 SOURCE: "vuepress/" # 先清空目标目录 ARGS: "-avzr --delete" # 上传到服务器目标目录 TARGET: "/www/vuepress"1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.

接着我们修改一下代码，我给这个标题加了个 “啊”

图片

提交代码，查看Actions中的任务，发现已经部署完成了

图片

验证部署成功，我看看到线上的博客已经拥有了这个改动~

图片