Deploy Vibe Dashboard to GitHub Pages (#6)

Copilot · Boshen · web-flow · commit 370efc2644e1 · 2025-08-24T18:49:15.000+08:00
* Initial plan

* Complete GitHub Pages deployment setup

Co-authored-by: Boshen &lt;1430279+Boshen@users.noreply.github.com&gt;

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: Boshen &lt;1430279+Boshen@users.noreply.github.com&gt;
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,60 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ['main']
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: '10'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Build
+        run: pnpm build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './apps/dashboard/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
diff --git a/README.md b/README.md
@@ -71,6 +71,18 @@ pnpm dev
 - `pnpm lint` - Run linting across all packages
 - `pnpm test` - Run tests across all packages
 - `pnpm clean` - Clean build artifacts
+- `pnpm build-deploy` - Lint and build for deployment
+
+### Deployment
+
+The dashboard is automatically deployed to GitHub Pages when changes are pushed to the `main` branch.
+
+**Live Demo**: [https://boshen.github.io/vibe-dashboard/](https://boshen.github.io/vibe-dashboard/)
+
+The deployment process:
+1. Runs linting and builds the project
+2. Deploys the built assets to GitHub Pages
+3. The app is served with the correct base path `/vibe-dashboard/`
 
 ## 📊 Dashboard Features
 
diff --git a/apps/dashboard/index.html b/apps/dashboard/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Vibe Dashboard</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/dashboard/vite.config.ts b/apps/dashboard/vite.config.ts
@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: '/vibe-dashboard/',
 })
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "build": "pnpm -r build",
     "lint": "pnpm -r lint",
     "test": "pnpm -r test",
-    "clean": "pnpm -r clean"
+    "clean": "pnpm -r clean",
+    "build-deploy": "pnpm lint && pnpm build"
   },
   "keywords": ["dashboard", "charts", "metrics", "frontend"],
   "author": "",
