Update homepage link in package.json and README.md to reflect new GitHub Pages URL. Configure Vite for GitHub Pages deployment with updated build settings.

Author: CodeRandomMC

.github/workflows/deploy.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Build
+        run: npm run build
+      
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+  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

README.md

@@ -7,7 +7,7 @@
 
 Pixel2CPP is a browser-based pixel art editor designed for Arduino and embedded display development. Draw your sprites, icons, and graphics, then export them as optimized C++ arrays ready to use with popular display libraries like Adafruit_GFX.
 
-🎮 **[Try it live](https://coderandom.com/pixel-to-cpp)** | 📖 **[Documentation](#usage-guide)** | 🐛 **[Report Issues](https://github.com/CodeRandomMC/pixel-to-cpp/issues)**
+🎮 **[Try it live](https://coderandommc.github.io/pixel-to-cpp)** | 📖 **[Documentation](#usage-guide)** | 🐛 **[Report Issues](https://github.com/CodeRandomMC/pixel-to-cpp/issues)**
 
 ![Pixel2CPP Screenshot](https://raw.githubusercontent.com/CodeRandomMC/pixel-to-cpp/main/screenshot.png)
 
@@ -44,8 +44,28 @@ npm install
 npm run dev
 
 # Open http://localhost:5173 in your browser
+
+### Building for Production
+```bash
+# Build the project
+npm run build
+
+# Preview the production build
+npm run preview
 ```
 
+### Deploying to GitHub Pages
+
+This project is configured to automatically deploy to GitHub Pages when you push to the main branch. The deployment is handled by GitHub Actions.
+
+**Manual Deployment:**
+1. Build the project: `npm run build`
+2. The built files will be in the `dist/` directory
+3. Configure GitHub Pages in your repository settings to serve from the `dist/` directory
+4. Or use the GitHub Actions workflow (recommended)
+
+**GitHub Pages URL:** `https://coderandommc.github.io/pixel-to-cpp`
+
 ## 📖 Usage Guide
 
 ### 1. Setting Up Your Canvas

package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/CodeRandomMC/pixel-to-cpp.git"
   },
-  "homepage": "https://coderandom.com/pixel-to-cpp",
+  "homepage": "https://coderandommc.github.io/pixel-to-cpp",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

vite.config.js

@@ -4,4 +4,10 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: '/pixel-to-cpp/', // Set the base path for GitHub Pages
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: false,
+  },
 })