文档
- https://github.com/marketplace/actions/deploy-to-github-pages
- https://cli.vuejs.org/zh/guide/deployment.html#github-pages
目录
使用GitHub Pages部署一个在线Demo,每次更新代码都要手动打包,切换分支,然后上传到github,感觉太麻烦了,这下有了Actions就可以实现自动部署了
第一步:配置workflows
在vue项目中创建文件
# .github/workflows/buildAndDeploy.yml # 自动发布 # https://github.com/marketplace/actions/deploy-to-github-pages name: Build and Deploy on: push: branches: - master jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v2.3.1 - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. run: | npm install npm run build - name: Deploy 🚀 uses: JamesIves/github-pages-deploy-action@4.1.1 with: branch: gh-pages # The branch the action should deploy to. folder: dist # The folder the action should deploy.
第二步:开启GitHub Pages
在github后台设置 Settings 中选择如下配置,配置完过一会就能看到网站地址了
例如我的:https://mouday.github.io/vue-print/
从现在开始,现在每次推送代码都能自动部署了