Set up website deployment on Vercel with preview

.github/VERCEL_SETUP.md

@@ -0,0 +1,114 @@
+# Vercel Deployment Setup
+
+This repository is configured to automatically deploy to Vercel using GitHub Actions.
+
+## Features
+
+- **Production Deployments**: Automatically deploys to production when pushing to the `main` branch
+- **Preview Deployments**: Creates preview deployments for all pull requests
+- **PR Comments**: Automatically comments on PRs with the preview deployment URL
+
+## Setup Instructions
+
+### 1. Create a Vercel Project
+
+1. Go to [Vercel](https://vercel.com) and sign in
+2. Create a new project and link it to this repository (or create it manually)
+3. Note down your project settings
+
+### 2. Get Your Vercel Credentials
+
+You'll need three pieces of information:
+
+#### Get your Vercel Token:
+1. Go to https://vercel.com/account/tokens
+2. Create a new token with a descriptive name (e.g., "GitHub Actions")
+3. Copy the token (you won't be able to see it again)
+
+#### Get your Organization ID:
+1. Go to your Vercel dashboard
+2. Go to Settings → General
+3. Copy your "Organization ID" (or "Team ID")
+
+#### Get your Project ID:
+1. Go to your project in Vercel
+2. Go to Settings → General
+3. Copy your "Project ID"
+
+### 3. Add GitHub Secrets
+
+Add the following secrets to your GitHub repository:
+
+1. Go to your repository on GitHub
+2. Navigate to Settings → Secrets and variables → Actions
+3. Click "New repository secret" and add each of the following:
+
+| Secret Name | Description |
+|------------|-------------|
+| `VERCEL_TOKEN` | Your Vercel authentication token |
+| `VERCEL_ORG_ID` | Your Vercel organization/team ID |
+| `VERCEL_PROJECT_ID` | Your Vercel project ID |
+
+### 4. Configure Vercel Project Settings (Optional)
+
+In your Vercel project settings, you may want to:
+
+- Set the **Framework Preset** to "Vite"
+- Set **Build Command** to `npm run build` (or leave as default)
+- Set **Output Directory** to `dist` (default for Vite)
+- Set **Install Command** to `npm install` (or leave as default)
+
+### 5. Test the Workflow
+
+1. Create a new branch and make a change
+2. Open a pull request
+3. The workflow will automatically create a preview deployment
+4. Check the PR comments for the preview URL
+
+## Workflow Details
+
+The workflow (`vercel-deploy.yml`) runs on:
+
+- **Push to main**: Creates a production deployment
+- **Pull request**: Creates a preview deployment and comments with the URL
+
+## Troubleshooting
+
+### Deployment fails with "Project not found"
+
+- Verify that `VERCEL_PROJECT_ID` is correct
+- Ensure the project exists in your Vercel account
+
+### Authentication errors
+
+- Verify that `VERCEL_TOKEN` is valid and not expired
+- Check that the token has the necessary permissions
+
+### Build errors
+
+- Test the build locally with `npm run build`
+- Check Vercel logs for detailed error messages
+
+## Manual Deployment
+
+You can also deploy manually using the Vercel CLI:
+
+```bash
+# Install Vercel CLI
+npm install -g vercel
+
+# Login
+vercel login
+
+# Deploy preview
+vercel
+
+# Deploy production
+vercel --prod
+```
+
+## Additional Resources
+
+- [Vercel Documentation](https://vercel.com/docs)
+- [GitHub Actions Documentation](https://docs.github.com/en/actions)
+- [Vite Documentation](https://vitejs.dev/)

.github/workflows/vercel-deploy.yml

@@ -0,0 +1,60 @@
+name: Vercel Deploy
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install Vercel CLI
+        run: npm install -g vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=${{ github.event_name == 'push' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build ${{ github.event_name == 'push' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Deploy to Vercel
+        id: deploy
+        run: |
+          if [ "${{ github.event_name }}" == "push" ]; then
+            vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} > deployment-url.txt
+          else
+            vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > deployment-url.txt
+          fi
+          echo "url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT
+
+      - name: Comment PR with Preview URL
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+            const deploymentUrl = fs.readFileSync('deployment-url.txt', 'utf8').trim();
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `## 🚀 Preview Deployment\n\nYour preview deployment is ready!\n\n🔗 **Preview URL:** ${deploymentUrl}\n\n---\n*Deployed via Vercel*`
+            });

README.md

@@ -8,4 +8,13 @@
   Run `npm i` to install the dependencies.
 
   Run `npm run dev` to start the development server.
+
+  ## Deployment
+
+  This project is configured to automatically deploy to Vercel using GitHub Actions.
+
+  - **Production deployments**: Automatically deploy when pushing to the `main` branch
+  - **Preview deployments**: Automatically created for all pull requests
+
+  For setup instructions, see [.github/VERCEL_SETUP.md](.github/VERCEL_SETUP.md).