feat: auto deploy to github page

Author: wangdicoder

.github/workflows/deploy-site.yml

@@ -0,0 +1,54 @@
+name: Deploy Site
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build site
+        run: npm run site:build
+        env:
+          PUBLIC_PATH: /tiny-ui/
+
+      - name: Copy 404.html for SPA routing
+        run: cp site/build/index.html site/build/404.html
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: site/build
+
+  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

site/config/webpack.common.js

@@ -2,13 +2,16 @@ const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+const PUBLIC_PATH = process.env.PUBLIC_PATH || '/';
 
 module.exports = {
   entry: path.resolve(__dirname, '../src/index.tsx'),
   output: {
     path: path.resolve(__dirname, '../build'),
     filename: 'bundle.[contenthash].js',
-    publicPath: '/',
+    publicPath: PUBLIC_PATH,
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
@@ -45,5 +48,8 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '../public/index.html'),
     }),
+    new webpack.DefinePlugin({
+      'process.env.PUBLIC_PATH': JSON.stringify(PUBLIC_PATH),
+    }),
   ],
 };

site/src/index.tsx

@@ -11,8 +11,10 @@ import HomePage from './containers/home';
 import GuidePage from './containers/guide';
 import ComponentsPage from './containers/components';
 
+const basename = (process.env.PUBLIC_PATH || '/').replace(/\/$/, '');
+
 const App = (): React.ReactElement => (
-  <BrowserRouter>
+  <BrowserRouter basename={basename}>
     <>
       <Header />
       <Routes>