如何通过github actions 自动部署vuepress项目？

大家好我是图恩，前面讲过如何将vuepress2.x项目部署到github pages并绑定自定义域名，本期介绍如何自动部署vuepress 项目。

上篇讲到网站实际访问的是main这个只有静态文件的分支，dev才是实际项目源码分支，所有我们只需要将dev分支的代码build后写入main分支即可。

所幸的是github目前已经支持这个功能，通过actions可以做到自动化拉取代码、编译、打包、写入新分支，以下代码供参考，文件目录为/.github/workflows/main.yml

name: docs

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [dev]
  # 手动触发部署
  workflow_dispatch:

jobs:
  docs:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
        with:
          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          # 选择要使用的 node 版本
          node-version: 16
          # 缓存 pnpm 依赖
          cache: npm
      # 运行构建脚本
      - name: npm install
        run: npm install
      # 运行构建脚本
      - name: Build VuePress site
        run: npm run docs:build

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          # 部署到 gh-pages 分支
          target_branch: main
          # 部署目录为 VuePress 的默认输出目录
          build_dir: docs/.vuepress/dist
        env:
          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
          GITHUB_TOKEN: ${{ secrets.VUEPRESS_TOKEN }}

本文章由javascript技术分享原创和收集