|
| 1 | +# PR Preview Setup Guide |
| 2 | + |
| 3 | +This repository includes workflows for deploying PR previews to either Netlify or Vercel. Choose one and follow the setup instructions below. |
| 4 | + |
| 5 | +## Option 1: Netlify (Recommended) |
| 6 | + |
| 7 | +Netlify offers a generous free tier and is easy to set up. |
| 8 | + |
| 9 | +### Setup Steps: |
| 10 | + |
| 11 | +1. **Create a Netlify account** at https://netlify.com |
| 12 | + |
| 13 | +2. **Create a new site**: |
| 14 | + - Go to your Netlify dashboard |
| 15 | + - Click "Add new site" → "Configure manually" |
| 16 | + - Note the Site ID |
| 17 | + |
| 18 | +3. **Get your auth token**: |
| 19 | + - Go to User Settings → Applications → Personal Access Tokens |
| 20 | + - Create a new token and save it |
| 21 | + |
| 22 | +4. **Add GitHub Secrets**: |
| 23 | + - Go to your GitHub repository settings |
| 24 | + - Navigate to Secrets and Variables → Actions |
| 25 | + - Add these secrets: |
| 26 | + - `NETLIFY_AUTH_TOKEN`: Your personal access token |
| 27 | + - `NETLIFY_SITE_ID`: Your site ID |
| 28 | + |
| 29 | +5. **Enable the workflow**: |
| 30 | + - Keep `pr-preview-netlify.yml` |
| 31 | + - Delete `pr-preview-vercel.yml` if not using Vercel |
| 32 | + |
| 33 | +## Option 2: Vercel |
| 34 | + |
| 35 | +Vercel is also free for open source projects and offers excellent performance. |
| 36 | + |
| 37 | +### Setup Steps: |
| 38 | + |
| 39 | +1. **Create a Vercel account** at https://vercel.com |
| 40 | + |
| 41 | +2. **Install Vercel CLI** locally: |
| 42 | + ```bash |
| 43 | + npm i -g vercel |
| 44 | + ``` |
| 45 | + |
| 46 | +3. **Link your project**: |
| 47 | + ```bash |
| 48 | + vercel link |
| 49 | + ``` |
| 50 | + This will create a `.vercel` folder with your project settings |
| 51 | + |
| 52 | +4. **Get your tokens**: |
| 53 | + - Create a token at: https://vercel.com/account/tokens |
| 54 | + - Get your Org ID and Project ID from `.vercel/project.json` |
| 55 | + |
| 56 | +5. **Add GitHub Secrets**: |
| 57 | + - Go to your GitHub repository settings |
| 58 | + - Navigate to Secrets and Variables → Actions |
| 59 | + - Add these secrets: |
| 60 | + - `VERCEL_TOKEN`: Your access token |
| 61 | + - `VERCEL_ORG_ID`: Your organization ID |
| 62 | + - `VERCEL_PROJECT_ID`: Your project ID |
| 63 | + |
| 64 | +6. **Enable the workflow**: |
| 65 | + - Keep `pr-preview-vercel.yml` |
| 66 | + - Delete `pr-preview-netlify.yml` if not using Netlify |
| 67 | + |
| 68 | +## Security Benefits |
| 69 | + |
| 70 | +Using Netlify or Vercel for PR previews instead of GitHub Pages provides: |
| 71 | + |
| 72 | +- **Isolation**: PR previews are completely separate from your production site |
| 73 | +- **No write access**: PRs cannot modify your main GitHub Pages deployment |
| 74 | +- **Automatic cleanup**: Previews are automatically removed after PRs are merged |
| 75 | +- **Access control**: You can add password protection if needed (paid feature) |
| 76 | + |
| 77 | +## Choosing Between Services |
| 78 | + |
| 79 | +| Feature | Netlify | Vercel | |
| 80 | +|---------|---------|--------| |
| 81 | +| Free tier | 100GB bandwidth/month | 100GB bandwidth/month | |
| 82 | +| Build minutes | 300 min/month | 6000 min/month | |
| 83 | +| Setup complexity | Simple | Moderate | |
| 84 | +| Preview URLs | Custom aliases | Automatic unique URLs | |
| 85 | +| Comments on PR | ✅ Automatic | ✅ Automatic | |
| 86 | + |
| 87 | +Both services work great for PR previews. Choose based on your preference and existing infrastructure. |
0 commit comments