个人网站的部署

相信很多前端兄弟都购买了服务器，并将个人项目部署在服务器上。例如，我最近创建了一个个人博客网站。前端我使用的是腾讯云的服务器和vuepress。作为博客框架

但每次部署到服务器上，我都要分成几个步骤：

提交代码在本地打包并压缩成zip即可登录服务器宝塔。上传zip并解压到指定目录，这样就可以在网站上看到我部署的结果了。

图片

能否实现自动化

我需要手动做这么多事情吗？那么我可以以某种方式自动化它吗？例如：

我只需要做：提交代码自动化：打包、压缩、上传、解压，也就是说我只需要提交代码，剩下的事情都自动帮我完成。了解CI/CD 的朋友就会知道，其实现在市面上有很多自动化部署工具，比如：

github 操作、gitlab、cijenkins。由于后两者大多用在公司项目中，所以对于我们自己的个人项目来说，我们使用github actions更加方便简单。那么今天我就教大家如何使用github actions来自动部署自己的个人项目。酒吧！

开搞

前置知识

我们刚才说过：

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

那么在GitHub中如何进行打包、zip、上传、解压呢？我们需要使用工作流程

github token

看来在终端使用token操作github更方便？我们可以先去github申请一个token，这样以后做事情就更方便了~

图片

然后进入开发者设置，直到找到创建token的按钮~

图片

图片

记得把这两个勾起来~不然后面就无法做github的动作了

图片

workflows job step

我们需要在项目中新建一个.github文件夹，然后创建一个workflows文件夹。此工作流程文件夹包含您要执行的一些命令。这些命令包括打包、zip、上传、解压~

当我们将这些东西提交到github时，github会在.github中的工作流程中识别这些yml并执行它们（可以有多个yml文件）

图片

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

job：可以理解为任务步骤：可以理解为任务中的一些步骤run：运行命令并执行name: Cion: # 当代码推送时触发Push: # 当主分支时触发Branches: mainjobs: # 定义一个作业name 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

图片

图片

图片

然后回到github，我们需要将这三个变量设置到github actions中，这样我们在运行github actions的时候就可以获取到这三个变量

D_HOST：写入服务器ipD_USER：写入登录用户名图片

ci.yml

那么我们可以改进ci.yml。我们可以利用github actions提供的一些工具来完成一些操作，比如：

actions/checkout@v2：用于拉取最新代码actions/setup-node@v3：用于安装节点actions/cache@v3：用于缓存node_modulseasingthemes/ssh-deploy@v2.0.7：用于将产品部署到server name: Cion: # 推送代码时触发push: # 主分支时触发branches: mainjobs: # 定义一个名为CI的作业CI: # 使用github提供的机器运行runs-on: ubuntu-latest # 步骤steps: # 拉取最新代码- name: Checkout repository use: actions/checkout@v2 # 安装节点环境- name: Use Node.js use: actions/setup-node@v3 with: node-version: '16.x' # 设置node_modules的缓存- name: Cache # 缓存命中结果为保存在steps.[id].outputs.cache-hit中，在后续步骤中可以读取该变量id: cache-dependency use: actions/cache@v3 with: # 缓存文件目录的路径path: | **/node_modules key: $ {{runner.OS}} # 安装依赖- name: 安装依赖# 如果命中缓存，则无需安装依赖，直接使用缓存if: steps.cache-dependency.outputs.cache- hit !='true' run: npm install # 打包- name: 构建run: | npm run docs:build zip -r vuepress ./vuepress/** # 产品上传服务器- name: 上传到部署服务器使用： 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中的任务，发现部署已经完成。

图片

验证部署是否成功。我看到网上博客已经有这个变化了~

图片

用户评论

呆萌

真是一分钟学会GitHub Actions就够了么？我去试试看！

    有9位网友表示赞同！

泪湿青衫

以后简历上可以多加 CI/CD 了，感觉很厉害的样子！

    有12位网友表示赞同！

莫阑珊

十分钟体验Sounds good! 我已经很久想学习GHub Actions了！

    有14位网友表示赞同！

那伤。眞美

这篇博客内容是不是有点夸张？十分钟就学会了？要具体点儿吧~

    有13位网友表示赞同！

ヅ她的身影若隐若现

希望这篇文章能详细讲解GitHub Actions的操作步骤，我很想学这个！

    有20位网友表示赞同！

青衫故人

51CTO的博文质量一向不错，这篇文章应该值得一读。

    有8位网友表示赞同！

代价是折磨╳

学习到新技能真是太兴奋了！马上就去试试看CI/CD怎么做！

    有12位网友表示赞同！

轨迹！

想要搞定技术简历得掌握这些东西了，GitHub Actions我了解了解！

    有6位网友表示赞同！

三年约

这种快捷操作感觉真好用啊，代码开发效率大大提升！

    有15位网友表示赞同！

殃樾晨

博客标题很有吸引力，让我很想去看看具体的解释！

    有7位网友表示赞同！

孤独症

对于入门者来说，十分钟体验应该很适合，可以快速上手！

    有19位网友表示赞同！

素婉纤尘

GitHub Actions越来越流行了，学习它现在才不晚！

    有7位网友表示赞同！

陌上蔷薇

CI/CD确实是开发工作中必不可少的技能，这篇文章肯定能帮我提升！

    有12位网友表示赞同！

?娘子汉

学习新软件总是很有挑战性，期待这个博客能给我带来启发！

    有12位网友表示赞同！

把孤独喂饱

51CTO always has great tech articles. Let's check it out!

    有5位网友表示赞同！

爱你的小笨蛋

GitHub Actions已经应用很广泛了，希望这篇文章能帮助我了解它的具体用途！

    有5位网友表示赞同！

哭着哭着就萌了°

十分钟体验 GitHub Actions, 这也太吸引人了！赶快去学习一下吧！

    有20位网友表示赞同！

红玫瑰。

提升简历的竞争力，从掌握 CI/CD 开始！学习 GitHub Actions！

    有5位网友表示赞同！

艺菲

想了解更多关于 GitHub Actions 的内容，这篇文章应该是个不错的选择!

    有20位网友表示赞同！