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,12 @@
   <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="google-site-verification" content="0K_4YI_cVN1OmXDCAid5ReK3zOBKivJl5oeWoiDQGS8" />
   <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>

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',