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 # 生成的静态文件存放的地方