Deploy your Vue App to GitHub Pages with Caching

Learn how to speed up your GitHub Actions workflows by caching node_modules and properly deploy Vue apps to GitHub Pages

Problem

Need a free and efficient way to deploy a Vue app? GitHub Pages is an excellent solution. Here’s how to set it up with proper caching.

Solution

1. Enable GitHub Pages

Go to repository Settings > Pages and enable GitHub Pages.

2. Create GitHub Action

Create .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: npm

      - name: Cache node modules
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

3. Configure Vite

Update vite.config.ts:

import import vuevue from '@vitejs/plugin-vue'
import { function defineConfig(config: UserConfig): UserConfig (+3 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.defineConfig } from 'vite'

export default function defineConfig(config: UserConfigFnObject): UserConfigFnObject (+3 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.defineConfig(({ command: "build" | "serve"
'serve': during dev (`vite` command)
'build': when building for production (`vite build` command)command }) => ({
  UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.plugins: [import vuevue()],
  UserConfig.base?: string | undefined
Base public path when served in development or production.
@default'/'base: command: "build" | "serve"
'serve': during dev (`vite` command)
'build': when building for production (`vite build` command)command === 'build' ? '/your-repo-name/' : '/',
}))

Key Features

• Implements dependency caching to speed up builds
• Uses proper concurrency control to prevent conflicting deployments
• Automatically configures correct base URL for GitHub Pages
• Utilizes latest GitHub Actions versions

#github-actions #vue #deployment #performance