Deploy Your Vite/Vue 3 Application in GitHub Pages using GitHub Actions

README.md

Deploy Your Vite/Vue 3 Application in GitHub Pages using GitHub Actions

• Copy the deploy.yml file contents
• And create deploy.yml file in .github/workflows folder inside your repo

Change workflow permissions

• Go to the repo settings
• Then perform following steps that are given in images
• And lastly, select Read and write permissions and hit Save:

Note - Basically, our action is going to modify the repo, so it needs the write permission.

Create GitHub token for GitHub Actions

A/c to our requirements generates a GitHub token and add to in Repository secrets

To perform following steps

deploy.yml

name: Deploy

on:
  push:
    branches:
      - main
      
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    - name: Run Git commands
      run: |
        git config --global user.email "your email"
        git config --global user.name "your github username"

        # Install depedencies
        npm i

        # build
        npm run build

        echo 'Deploying to gh-pages...'

        git add dist -f
        git commit -m 'Deploy' 
        git push origin `git subtree split --prefix dist main`:gh-pages --force

        echo 'Done'
      env:
        github-token: ${{ secrets.GH_TOKEN }}