feat: publish to github pages

Author: kungfux

.github/workflows/publish.yml

@@ -0,0 +1,52 @@
+name: Publish
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22.x
+          cache: "npm"
+
+      - name: Restore
+        run: npm ci
+
+      - name: Test
+        run: npm run lint
+
+      - name: Build
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -2,7 +2,7 @@
 
 Binary Timer is a simple countdown timer that counts down in binary.
 
-Available online at [https://binarytimer.surge.sh](https://binarytimer.surge.sh)
+Available online at [https://kungfux.github.io/binarytimer](https://kungfux.github.io/binarytimer)
 
 ![screenshot](public/screenshot-wide.png)
 

index.html

@@ -5,12 +5,11 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="google-site-verification" content="DuybeW01gi4SeBHy7YyqfLYOfQ82DNm-heBEhjprUVc" />
   <meta name="description"
     content="Binary Timer Countdown - A Unique Way to Track Time in Binary!
     This interactive tool lets you visualize countdowns in binary, making it perfect for tech enthusiasts, programmers, and learners. Whether you're exploring binary concepts, teaching coding fundamentals, or simply fascinated by unique timers, our binary countdown tool combines education and functionality. Learn, teach, and enjoy the simplicity of binary time tracking today!">
   <meta name="author" content="kungfux">
-  <link rel="canonical" href="https://binarytimer.surge.sh/">
+  <link rel="canonical" href="https://kungfux.github.io/binarytimer/">
   <title>Binary Timer</title>
 </head>
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZX3L2JT8RY"></script>

package.json

@@ -3,10 +3,10 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": "https://kungfux.github.io/binarytimer",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "publish": "surge ./dist binarytimer.surge.sh",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/main.tsx

@@ -7,7 +7,7 @@ import App from "./App.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename="/binarytimer">
       <App />
     </BrowserRouter>
   </StrictMode>

src/pages/TimerCountdown.page.tsx

@@ -106,8 +106,18 @@ function TimerCountdown() {
 
   return (
     <>
-      <audio id="bee" src="bee.mp3" preload="auto" muted={isMuted} />
-      <audio id="doo" src="doo.mp3" preload="auto" muted={isMuted} />
+      <audio
+        id="bee"
+        src="/binarytimer/bee.mp3"
+        preload="auto"
+        muted={isMuted}
+      />
+      <audio
+        id="doo"
+        src="/binarytimer/doo.mp3"
+        preload="auto"
+        muted={isMuted}
+      />
       <div className="flex flex-col items-center justify-center text-center">
         <div className="flex flex-col items-center justify-center text-center">
           <h1 className="text-5xl uppercase mb-8">Please stand by</h1>

vite.config.ts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
+  base: '/binarytimer/',
   plugins: [react(),
     VitePWA({
       registerType: 'autoUpdate',