diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml index 1688a5e..3a85bb6 100644 --- a/.github/workflows/nextjs.yml +++ b/.github/workflows/nextjs.yml @@ -9,7 +9,12 @@ # SETUP REQUIRED: # 1. Get free Web3Forms API key from https://web3forms.com # 2. Add as repository secret: WEB3FORMS_ACCESS_KEY -# 3. Enable GitHub Pages in repository Settings → Pages → Source: GitHub Actions +# 3. Add Gmail credentials as repository secrets: +# - GMAIL_USER: Gmail email address +# - GMAIL_APP_PASSWORD: Gmail app password (not regular password) +# - GMAIL_FROM: Display name for emails (e.g., "Wedding ") +# - TEST_EMAIL_TO: Test recipient email address +# 4. Enable GitHub Pages in repository Settings → Pages → Source: GitHub Actions # # EXCLUDED (requires server): # ❌ API routes (not supported in static export) @@ -110,10 +115,16 @@ jobs: # Email (placeholder - not functional in static export) RESEND_API_KEY="re_placeholder" - # Cloudinary (placeholder - not functional in static export) - CLOUDINARY_CLOUD_NAME="placeholder" - CLOUDINARY_API_KEY="placeholder" - CLOUDINARY_API_SECRET="placeholder" + # Gmail credentials for email functionality (from GitHub Secrets) + GMAIL_USER="${{ secrets.GMAIL_USER }}" + GMAIL_APP_PASSWORD="${{ secrets.GMAIL_APP_PASSWORD }}" + GMAIL_FROM="${{ secrets.GMAIL_FROM }}" + TEST_EMAIL_TO="${{ secrets.TEST_EMAIL_TO }}" + + # Cloudinary (set to empty for GitHub Pages deployment) + CLOUDINARY_CLOUD_NAME="" + CLOUDINARY_API_KEY="" + CLOUDINARY_API_SECRET="" # Web3Forms for static form submissions # Get your free access key at https://web3forms.com diff --git a/GITHUB_PAGES_DEPLOYMENT.md b/GITHUB_PAGES_DEPLOYMENT.md index 0ad5bf9..a75db66 100644 --- a/GITHUB_PAGES_DEPLOYMENT.md +++ b/GITHUB_PAGES_DEPLOYMENT.md @@ -66,10 +66,30 @@ The deployment is automated via `.github/workflows/nextjs.yml`: 1. Checkout repository 2. Setup Node.js 20 3. Install dependencies -4. Generate Prisma client -5. Run `npm run build:static` -6. Upload `client/out` directory to GitHub Pages -7. Deploy to GitHub Pages +4. Create environment file with secrets +5. Generate Prisma client +6. Run `npm run build:static` +7. Upload `client/out` directory to GitHub Pages +8. Deploy to GitHub Pages + +### Required GitHub Secrets + +To enable email functionality and proper builds, configure these repository secrets: + +1. **WEB3FORMS_ACCESS_KEY**: Free API key from [Web3Forms](https://web3forms.com) for contact forms +2. **GMAIL_USER**: Gmail email address for sending emails (e.g., `your-email@gmail.com`) +3. **GMAIL_APP_PASSWORD**: Gmail app password (NOT your regular password) + - Generate at: [Google Account App Passwords](https://myaccount.google.com/apppasswords) + - Requires 2-Factor Authentication enabled +4. **GMAIL_FROM**: Display name for sent emails (e.g., `"Wedding "`) +5. **TEST_EMAIL_TO**: Test recipient email address + +#### How to Add Secrets + +1. Go to repository **Settings** → **Secrets and variables** → **Actions** +2. Click **New repository secret** +3. Add each secret with its name and value +4. Secrets are encrypted and not visible after creation ## Form Handling in Static Mode diff --git a/GITHUB_SECRETS_SETUP.md b/GITHUB_SECRETS_SETUP.md new file mode 100644 index 0000000..e93b83d --- /dev/null +++ b/GITHUB_SECRETS_SETUP.md @@ -0,0 +1,204 @@ +# GitHub Secrets Setup for Email Functionality + +This document explains how to configure GitHub Secrets for the wedding website's email functionality when deployed to GitHub Pages. + +## Overview + +The wedding website uses Gmail (via Nodemailer) to send emails for: +- Contact form submissions +- RSVP confirmations +- Admin notifications + +For security, email credentials are stored as **GitHub Secrets** rather than hardcoded in the repository. + +## Required Secrets + +### 1. GMAIL_USER +**Description**: Your Gmail email address used for sending emails. + +**Example**: `wedding@example.com` or `your-email@gmail.com` + +**How to get it**: Use any Gmail account you have access to. + +--- + +### 2. GMAIL_APP_PASSWORD +**Description**: Gmail App Password (NOT your regular Gmail password). + +**Important**: This is NOT your regular Gmail password. You must generate a special "App Password" from Google. + +**How to get it**: +1. **Enable 2-Factor Authentication** on your Google Account (required) + - Go to [Google Account Security](https://myaccount.google.com/security) + - Enable 2-Step Verification if not already enabled + +2. **Generate App Password**: + - Go to [Google Account App Passwords](https://myaccount.google.com/apppasswords) + - Select app: "Mail" or "Other (Custom name)" → "Wedding Website" + - Click "Generate" + - Copy the 16-character password (remove spaces) + +**Example**: `abcd efgh ijkl mnop` (use as: `abcdefghijklmnop`) + +--- + +### 3. GMAIL_FROM +**Description**: Display name and email shown in sent emails. + +**Format**: `"Display Name "` + +**Examples**: +- `"Wedding "` +- `"Incia & Arvin "` +- Just email: `"your-email@gmail.com"` + +**Note**: The email part should match your GMAIL_USER or be a verified sending address. + +--- + +### 4. TEST_EMAIL_TO +**Description**: Email address to receive test emails and notifications. + +**Example**: `admin@example.com` or `arvincia@sparrow-group.com` + +**Purpose**: Used for testing email functionality and receiving form submissions. + +--- + +### 5. WEB3FORMS_ACCESS_KEY +**Description**: API key for Web3Forms contact form service. + +**How to get it**: +1. Go to [https://web3forms.com](https://web3forms.com) +2. Sign up for free +3. Create a new form +4. Copy the Access Key + +**Note**: This secret may already be configured in your repository. + +--- + +## How to Add Secrets to GitHub + +### Step-by-Step Guide + +1. **Navigate to Repository Settings** + - Go to your GitHub repository + - Click **Settings** tab + - In the left sidebar, click **Secrets and variables** → **Actions** + +2. **Add Each Secret** + - Click **New repository secret** button + - Enter the secret name (exactly as shown above, case-sensitive): + - `GMAIL_USER` + - `GMAIL_APP_PASSWORD` + - `GMAIL_FROM` + - `TEST_EMAIL_TO` + - `WEB3FORMS_ACCESS_KEY` + - Paste the corresponding value + - Click **Add secret** + +3. **Verify Secrets** + - You should see all 5 secrets listed + - Secret values are encrypted and hidden (you can't view them after creation) + - You can update or delete secrets if needed + +### Screenshot Guide + +``` +Repository Settings → Secrets and variables → Actions → New repository secret +``` + +After adding all secrets, you should see: +``` +✓ GMAIL_USER +✓ GMAIL_APP_PASSWORD +✓ GMAIL_FROM +✓ TEST_EMAIL_TO +✓ WEB3FORMS_ACCESS_KEY +``` + +--- + +## Security Best Practices + +### ✅ DO: +- Use Gmail App Passwords (not regular passwords) +- Keep secrets confidential +- Use dedicated email accounts for production +- Rotate App Passwords periodically +- Use 2-Factor Authentication on Gmail + +### ❌ DON'T: +- Share secrets publicly +- Commit secrets to version control +- Use personal Gmail passwords +- Reuse passwords across services +- Disable 2-Factor Authentication + +--- + +## Testing Email Functionality + +After configuring secrets: + +1. **Trigger a Deployment** + ```bash + git push origin main + ``` + +2. **Check Workflow Run** + - Go to **Actions** tab + - Watch the "Deploy Next.js site to Pages" workflow + - Verify it completes successfully + +3. **Test Email Sending** + - Visit your deployed site + - Submit a contact form + - Check TEST_EMAIL_TO address for notifications + +--- + +## Troubleshooting + +### Workflow Fails with "Missing Gmail credentials" +**Solution**: Verify all secrets are added with exact names (case-sensitive). + +### Emails Not Sending +**Possible causes**: +1. Incorrect GMAIL_APP_PASSWORD (must be App Password, not regular password) +2. 2-Factor Authentication not enabled on Gmail +3. GMAIL_USER doesn't match the account that generated the App Password +4. Secrets not configured correctly + +**Solution**: +- Regenerate Gmail App Password +- Double-check secret values (delete and re-add if needed) + +### "Sign-in attempt blocked" Email from Google +**Solution**: You're using regular password instead of App Password. Generate an App Password. + +### Workflow Shows "Web3Forms key configured: No" +**Solution**: Add WEB3FORMS_ACCESS_KEY secret. + +--- + +## Related Documentation + +- **[QUICK_DEPLOY_GITHUB_PAGES.md](QUICK_DEPLOY_GITHUB_PAGES.md)** - Quick deployment guide +- **[GITHUB_PAGES_DEPLOYMENT.md](GITHUB_PAGES_DEPLOYMENT.md)** - Detailed deployment information +- **[.github/workflows/nextjs.yml](.github/workflows/nextjs.yml)** - Workflow file using these secrets + +--- + +## Support + +For issues or questions: +- **Email**: codestromhub@gmail.com +- **Phone**: +880 1234-567890 +- **Location**: Dhaka, Bangladesh + +--- + +**Last Updated**: October 12, 2025 +**Version**: 1.0 diff --git a/QUICK_DEPLOY_GITHUB_PAGES.md b/QUICK_DEPLOY_GITHUB_PAGES.md index d8ec807..b37c611 100644 --- a/QUICK_DEPLOY_GITHUB_PAGES.md +++ b/QUICK_DEPLOY_GITHUB_PAGES.md @@ -15,14 +15,19 @@ This guide will get your wedding website live on GitHub Pages in 5 minutes with ### 2️⃣ Configure GitHub Repository (2 minutes) 1. Go to your repository **Settings** → **Secrets and variables** → **Actions** -2. Click **"New repository secret"** -3. Name: `WEB3FORMS_ACCESS_KEY` -4. Value: Paste your Web3Forms access key -5. Click **"Add secret"** - -Now go to **Settings** → **Pages**: -1. Under "Source", select **"GitHub Actions"** -2. Click **"Save"** +2. Click **"New repository secret"** for each of the following: + +**Required Secrets:** +- **WEB3FORMS_ACCESS_KEY**: Your Web3Forms access key from step 1 +- **GMAIL_USER**: Your Gmail address (e.g., `your-email@gmail.com`) +- **GMAIL_APP_PASSWORD**: Gmail app password ([Get it here](https://myaccount.google.com/apppasswords)) + - Note: Requires 2-Factor Authentication enabled on your Google account +- **GMAIL_FROM**: Display name for emails (e.g., `"Wedding "`) +- **TEST_EMAIL_TO**: Test recipient email address + +3. After adding all secrets, go to **Settings** → **Pages**: + - Under "Source", select **"GitHub Actions"** + - Click **"Save"** ### 3️⃣ Deploy (1 minute) diff --git a/README.md b/README.md index de40f3f..be99791 100644 --- a/README.md +++ b/README.md @@ -255,6 +255,7 @@ The website automatically deploys to GitHub Pages via GitHub Actions on every pu #### Documentation - **Quick Start**: [`QUICK_DEPLOY_GITHUB_PAGES.md`](QUICK_DEPLOY_GITHUB_PAGES.md) - 5-minute setup guide +- **Secrets Setup**: [`GITHUB_SECRETS_SETUP.md`](GITHUB_SECRETS_SETUP.md) - GitHub Secrets configuration for email - **Full Guide**: [`GITHUB_ACTIONS_DEPLOYMENT_GUIDE.md`](GITHUB_ACTIONS_DEPLOYMENT_GUIDE.md) - Complete documentation - **Testing**: [`TESTING_GUIDE.md`](TESTING_GUIDE.md) - Post-deployment verification checklist