前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
个人网站的部署
相信很多前端兄弟都买过服务器，并且把自己的个人项目部署到服务器上，就比如我最近在搞个人的博客网站，我用的是腾讯云的服务器，前端用的是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：跑命令，执行
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：用来把产物部署到服务器
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中的任务，发现已经部署完成了
图片
验证部署成功，我看看到线上的博客已经拥有了这个改动~
图片