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

ppylox
·2/28/2023·11 阅读

大家好我是图恩,前面讲过如何将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


评论 (0)

暂无评论,来写第一条吧