GitHub workflows

Author: mmktomato

.github/workflows/pages.yaml

@@ -0,0 +1,42 @@
+name: pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+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-file: .node-version
+          cache: npm
+      - name: Install
+        run: npm install
+      - name: Test
+        run: npm test
+      - name: Build
+        run: npm run build
+      - name: Upload
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+  deploy:
+    needs: build
+    permissions:
+      id-token: write
+      pages: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy
+        uses: actions/deploy-pages@v4
+        id: deployment

index.html

@@ -12,7 +12,7 @@
     <div id="root"></div>
     <script
       type="module"
-      src="/src/main.tsx"
+      src="./src/main.tsx"
     ></script>
   </body>
 </html>

package.json

@@ -6,8 +6,9 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite --port 3456",
-    "build": "npm run lint && tsc -b && vite build",
+    "build": "tsc -b && vite build",
     "lint": "eslint . && prettier --check .",
+    "test": "npm run lint",
     "preview": "vite preview"
   },
   "dependencies": {

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

tailwind.config.js

@@ -1,11 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};

vite.config.ts

@@ -4,5 +4,6 @@ import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "./",
   plugins: [react(), svgr()],
 });