ci: add GitHub Pages workflow for Astro site with base path support

.github/workflows/deploy-site.yml

@@ -0,0 +1,50 @@
+name: Deploy Astro Site to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'site/**'
+      - '.github/workflows/deploy-site.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: site
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: site/package-lock.json
+
+      - run: npm ci
+      - run: npm run build
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: site/dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

site/astro.config.mjs

@@ -1,7 +1,10 @@
 import { defineConfig } from 'astro/config'
 import tailwindcss from '@tailwindcss/vite'
 
+const isGitHubPages = process.env.GITHUB_ACTIONS === 'true'
+
 export default defineConfig({
   output: 'static',
+  base: isGitHubPages ? '/clustri/' : '/',
   vite: { plugins: [tailwindcss()] },
 })

site/src/components/ScreenshotTour.astro

@@ -1,5 +1,6 @@
 ---
 import DotMatrixText from './DotMatrixText.astro'
+const base = import.meta.env.BASE_URL
 ---
 <section id="tour" aria-labelledby="tour-title" class="scroll-mt-24 py-20 sm:py-28">
   <div class="mx-auto max-w-7xl px-6 lg:px-8">
@@ -33,8 +34,8 @@ import DotMatrixText from './DotMatrixText.astro'
         <p id="tour-frame-label" class="font-mono text-[10px] tabular-nums text-muted-foreground">Virtual Machines — 4 VMs across the cluster</p>
         <span class="hidden font-mono text-[10px] text-success sm:inline">● live</span>
       </div>
-      <div class="relative bg-[#0e0e12]">
+      <div class="relative bg-[#0e0e12]" data-base-url={base}>
-        <img id="tour-img" src="/screenshots/vms.png" alt="Clustri VM list showing running and stopped VMs" width="1600" height="1000" class="h-auto w-full object-cover object-top transition-opacity duration-300" loading="lazy" decoding="async" />
+        <img id="tour-img" src={`${import.meta.env.BASE_URL}screenshots/vms.png`} alt="Clustri VM list showing running and stopped VMs" width="1600" height="1000" class="h-auto w-full object-cover object-top transition-opacity duration-300" loading="lazy" decoding="async" />
       </div>
     </div>
 
@@ -59,10 +60,11 @@ import DotMatrixText from './DotMatrixText.astro'
   const img = document.getElementById('tour-img') as HTMLImageElement | null
   const label = document.getElementById('tour-frame-label')
   const tabs = document.querySelectorAll<HTMLButtonElement>('[data-tour-tab]')
+  const baseUrl = img?.closest('[data-base-url]')?.getAttribute('data-base-url') || '/'
   const sources: Record<string, { src: string; label: string; alt: string }> = {
-    vms: { src: '/screenshots/vms.png', label: 'Virtual Machines — 4 VMs across the cluster', alt: 'Clustri VM list showing running and stopped VMs' },
+    vms: { src: `${baseUrl}screenshots/vms.png`, label: 'Virtual Machines — 4 VMs across the cluster', alt: 'Clustri VM list showing running and stopped VMs' },
-    console: { src: '/screenshots/console.png', label: 'VNC Console — web-01 (QEMU) on pve1', alt: 'Clustri console view with VNC viewer' },
+    console: { src: `${baseUrl}screenshots/console.png`, label: 'VNC Console — web-01 (QEMU) on pve1', alt: 'Clustri console view with VNC viewer' },
-    backups: { src: '/screenshots/backups.png', label: 'Backups — datastores, groups and snapshots', alt: 'Clustri backups view with datastores and prune controls' },
+    backups: { src: `${baseUrl}screenshots/backups.png`, label: 'Backups — datastores, groups and snapshots', alt: 'Clustri backups view with datastores and prune controls' },
   }
   tabs.forEach((btn) => {
     btn.addEventListener('click', () => {

site/src/layouts/Base.astro

@@ -11,7 +11,7 @@ const { title = 'Clustri', description = 'A desktop client for managing Proxmox
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/png" href="/icon.png" />
+    <link rel="icon" type="image/png" href={`${import.meta.env.BASE_URL}icon.png`} />
     <title>{title}</title>
     <meta name="description" content={description} />
   </head>