【GitHub Actions + GitHub Pages 实现前端自动部署到Github免费站点】（无需服务器，以vue项目为例）

配置GitHub Actions

第一步，在项目目录的.github/workflows文件夹下新建一个ci.yml文件

当github发现我们的yml文件后，会帮我们运行。

# 以下以一个构建vue项目的yml文件为例子
name: CI 
on:
  push:
    branches:
      - main # 这里只配置了main分支，所以只有推送main分支才会触发以下任务
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout  ️ # 将代码拉取到虚拟机
        uses: actions/checkout@v3

      - name: Install and Build   # 安装依赖、打包，如果提前已打包好无需这一步
        run: |
          npm install
          npm run build

      - name: Deploy   # 部署
        uses: JamesIves/github-pages-deploy-[email protected]
        with:
          branch: gh-pages # 部署后提交到那个分支
          folder: dist # 这里填打包好的目录名称

第二部，推送当前分支（main），推送完成之后，可以在仓库的action看到正在进行的工作流。

第三步，当工作流完成后，基于上面的yml配置，可以看到已经帮我们完成了打包工作，并推送在gh-pages分支。

到此，关于项目的打包就已经结束。

部署到GitHub站点

第一步，打开当前仓库的settings>Pages
第二部，部署方式选择 Deploy from branch

这种方式是从某个分支的代码进行部署，另一种方案是直接用Action的产物进行部署，此处不提及。

第三部，指定分支（即在配置文件里指定的gh-pages分支，默认为当前根目录）

选择完成后点击save，这时候去Actions里看到GitHub帮我们执行了一个推送到站点的一个任务，详细执行的信息可以点击进去查看

到这里，就完成了最简单的一个自动部署流程，之后每当我们推送代码，GitHub就会自动帮我们执行任务部署到GitHub的静态站点。