大家好我是图恩,前面讲过如何将vuepress2.x项目部署到github pages并绑定自定义域名,本期介绍如何自动部署vuepress 项目。
上篇讲到网站实际访问的是main这个只有静态文件的分支,dev才是实际项目源码分支,所有我们只需要将dev分支的代码build后写入main分支即可。
所幸的是github目前已经支持这个功能,通过actions可以做到自动化拉取代码、编译、打包、写入新分支,以下代码供参考,文件目录为/.github/workflows/main.yml
name: docs\n\non:\n # 每当 push 到 main 分支时触发部署\n push:\n branches: [dev]\n # 手动触发部署\n workflow_dispatch:\n\njobs:\n docs:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v3\n with:\n # “最近更新时间” 等 git 日志相关信息,需要拉取全部提交记录\n fetch-depth: 0\n - name: Setup Node.js\n uses: actions/setup-node@v3\n with:\n # 选择要使用的 node 版本\n node-version: 16\n # 缓存 pnpm 依赖\n cache: npm\n # 运行构建脚本\n - name: npm install\n run: npm install\n # 运行构建脚本\n - name: Build VuePress site\n run: npm run docs:build\n\n # 查看 workflow 的文档来获取更多信息\n # @see https://github.com/crazy-max/ghaction-github-pages\n - name: Deploy to GitHub Pages\n uses: crazy-max/ghaction-github-pages@v2\n with:\n # 部署到 gh-pages 分支\n target_branch: main\n # 部署目录为 VuePress 的默认输出目录\n build_dir: docs/.vuepress/dist\n env:\n # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret\n GITHUB_TOKEN: ${{ secrets.VUEPRESS_TOKEN }}\n