Github Actions自动化部署前端项目（超详细）

前言

关于部署项目，一直以来我也没注重太多；作为前端开发，例如自己 github 代码仓库的项目,就直接使用 git pages 了，一是用起来方便，而是也不需要额外购置云服务器。

对于 git pages ，部署项目会先选择部署的分支，然后选择部署的目录就 OK 了，但是部署的目录只能是 docs 或者根目录，所以一直以来用的都是 docs 目录，在前端 vue 项目或者 react 项目打包输出成 docs 就行，所以对于 Github Actions 也没有太多的了解。

直到最近几天，准备搭建一个文档类型的网站，本来也是准备采用 docs 目录进行部署，但是搭建的项目里已经存在了 docs 目录，打包的时候就只能换个目录输出，这才有了以下的 Github Actions。

如何创建 wrokflow

关于 github 上如何创建代码仓库以及关联本地项目就不做介绍了，本文主要讲解下前端工程化项目的自动打包部署。
在代码仓库点击 Actions ，然后选择 New workflow。

这里的话新建自己的 Workflow。

默认为 main.yml，名称随意，点击提交即可。

之后自己的项目下就会生成一个 .github 的文件，拉取一下代码，在本地配置一下 actions。

配置 wrokflow

打开拉取到本地的配置文件

主要配置代码如下

name: CI
 # 触发条件：在 push 到 main/master 分支后，新的 Github 项目 应该都是 main，而之前的项目一般都是 master
 on:
   push:
     branches:
       - main

 # 任务
 jobs:
   build-and-deploy:
     # 服务器环境：最新版 Ubuntu
     runs-on: ubuntu-latest
     steps:
       # 拉取代码
       - name: Checkout
         uses: actions/checkout@v2
         with:
           persist-credentials: false
       # 生成静态文件
       - name: Build
         run: |
           npm install  # 安装依赖
           npm run docs:build  # 执行打包

       # 部署到 GitHub Pages
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4.3.3
         with:
           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 也就是我们刚才生成的 secret
           BRANCH: gh-pages # 部署到 gh-pages 分支，因为 main 分支存放的一般是源码，而 gh-pages 分支则用来存放生成的静态文件
           FOLDER: docs-dist # 生成的静态文件存放的地方