详细记录如何使用github actions自动化部署个人博客网站

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

个人网站的部署

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

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

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

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

能否实现自动化

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

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

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

github actions
gitlab ci
jenkins

由于后两个都是公司项目里用的多，至于我们自己个人项目，我们用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：**跑命令，执行

yml 复制代码

name: CI
on:
  # 代码push的时候触发
  push:
    # main分支的时候触发
    branches: main
jobs:
  # 定义一个job，名字为CI
  CI:
    # 使用github提供给我们的机器去跑
    runs-on: ubuntu-latest
    # 步骤
    steps:
      # 步骤名为test
      - name: test
        # 打印哈哈
        run: echo 哈哈哈

接着我们提交代码到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：**写上服务器ip
**D_USER：**写上登录用户名
**D_PASS：**写上刚刚复制的秘钥

ci.yml

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

**actions/checkout@v2：**用来拉取最新代码
**actions/setup-node@v3：**用来安装node
**actions/cache@v3：**用来缓存node_moduls
**easingthemes/ssh-deploy@v2.0.7：**用来把产物部署到服务器

yml 复制代码

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"

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

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

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

结语 & 加学习群 & 摸鱼群

我是林三心

一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
一个偏前端的全干工程师；
一个不正经的掘金作者；
一个逗比的B站up主；
一个不帅的小红书博主；
一个喜欢打铁的篮球菜鸟；
一个喜欢历史的乏味少年；
一个喜欢rap的五音不全弱鸡

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点