Use github action to deploy vue app to github page

by
Reading Time: < 1 minute

Loading

  • Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it
  • Go to Actions tab of the github repo
  • Create main.yml under .github/workflow
 name: Deploy to github pages
 on:
   push:
    branches:
     - master
 jobs:
    build:
      name: Deploying to gh-pages
      runs-on: ubuntu-latest
      steps:
        - name: Setup Node.js for use with actions
          uses: actions/setup-node@v1.1.0
          with:
            version:  12.x
        - name: Checkout branch
          uses: actions/checkout@v2

        - name: Clean install dependencies
          run: npm ci

        - name: Build app
          run: npm run build
        
        - name: deploy
          uses: peaceiris/actions-gh-pages@v3
          with:
           github_token: ${{ secrets.ACCESS_TOKEN }}
           publish_dir: ./dist

There is no need to write custom deployment script and travis configuration file to automate the CI/CD process. Github does it for you when latest changes are pushed to master to start the build process and copy the contents of output folder to gh-pages branch.

References: