|
| 1 | +# GitHub Pages Deployment Guide |
| 2 | + |
| 3 | +## ✅ Configuration Complete |
| 4 | + |
| 5 | +Your portfolio is now fully optimized for GitHub Pages deployment! |
| 6 | + |
| 7 | +## What Was Configured |
| 8 | + |
| 9 | +### 1. **Next.js Configuration** (`next.config.js`) |
| 10 | + |
| 11 | +- ✅ `output: 'export'` - Enables static HTML export |
| 12 | +- ✅ `images.unoptimized: true` - Required for GitHub Pages (no server-side image optimization) |
| 13 | +- ✅ `basePath` support for custom repository names |
| 14 | + |
| 15 | +### 2. **GitHub Actions Workflow** (`.github/workflows/nextjs.yml`) |
| 16 | + |
| 17 | +- ✅ Auto-deploys on push to `main` branch |
| 18 | +- ✅ Environment variables set: `EXPORT=true`, `UNOPTIMIZED=true` |
| 19 | +- ✅ Uploads to `./out` directory |
| 20 | +- ✅ Automatic deployment to GitHub Pages |
| 21 | + |
| 22 | +### 3. **Build Scripts** (`package.json`) |
| 23 | + |
| 24 | +- ✅ Standard build: `yarn build` |
| 25 | +- ✅ GitHub-optimized build: `yarn build:github` |
| 26 | + |
| 27 | +### 4. **Static Export Files** |
| 28 | + |
| 29 | +- ✅ `.nojekyll` file created (prevents Jekyll processing) |
| 30 | +- ✅ `.env.production` with GitHub Pages settings |
| 31 | + |
| 32 | +## 🚀 How to Deploy |
| 33 | + |
| 34 | +### Automatic Deployment (Recommended) |
| 35 | + |
| 36 | +1. Commit your changes: |
| 37 | + |
| 38 | + ```bash |
| 39 | + git add . |
| 40 | + git commit -m "Optimize for GitHub Pages" |
| 41 | + git push origin main |
| 42 | + ``` |
| 43 | + |
| 44 | +2. GitHub Actions will automatically: |
| 45 | + - Build your site |
| 46 | + - Generate static files in `./out` |
| 47 | + - Deploy to GitHub Pages |
| 48 | + |
| 49 | +3. Check deployment status: |
| 50 | + - Go to your repo → **Actions** tab |
| 51 | + - Watch the "Deploy Next.js site to Pages" workflow |
| 52 | + |
| 53 | +### Manual Deployment |
| 54 | + |
| 55 | +```bash |
| 56 | +# Build for GitHub Pages |
| 57 | +yarn build:github |
| 58 | + |
| 59 | +# The ./out directory now contains your static site |
| 60 | +``` |
| 61 | + |
| 62 | +## 🔧 GitHub Repository Settings |
| 63 | + |
| 64 | +Make sure GitHub Pages is enabled in your repository: |
| 65 | + |
| 66 | +1. Go to **Settings** → **Pages** |
| 67 | +2. Source: **GitHub Actions** (should be auto-selected) |
| 68 | +3. Your site will be at: `https://Antot-12.github.io/Potrfolio/` |
| 69 | + |
| 70 | +### If using custom domain: |
| 71 | + |
| 72 | +Update `siteMetadata.js`: |
| 73 | + |
| 74 | +```javascript |
| 75 | +siteUrl: 'https://yourdomain.com', |
| 76 | +``` |
| 77 | + |
| 78 | +### If using repo name in URL (e.g., `/Potrfolio`): |
| 79 | + |
| 80 | +The workflow automatically handles this with `basePath`. |
| 81 | + |
| 82 | +## 📊 What Gets Deployed |
| 83 | + |
| 84 | +- ✅ Static HTML pages |
| 85 | +- ✅ Optimized CSS (Tailwind) |
| 86 | +- ✅ Client-side JavaScript |
| 87 | +- ✅ All images from `/public` |
| 88 | +- ✅ Blog posts (MDX → HTML) |
| 89 | +- ✅ Certifications data |
| 90 | +- ✅ Projects data |
| 91 | +- ✅ RSS feeds |
| 92 | + |
| 93 | +## ⚠️ Limitations (Static Export) |
| 94 | + |
| 95 | +The following features require a server and won't work on GitHub Pages: |
| 96 | + |
| 97 | +- ❌ API routes (`/api/*`) |
| 98 | +- ❌ Server-side image optimization |
| 99 | +- ❌ ISR (Incremental Static Regeneration) |
| 100 | +- ❌ Server-side database queries (Prisma) |
| 101 | + |
| 102 | +Your site uses client-side rendering and static data, so these limitations don't affect it. |
| 103 | + |
| 104 | +## 🎨 Features That Work Perfectly |
| 105 | + |
| 106 | +- ✅ About page with Stats, Skills, Certifications, Career Timeline |
| 107 | +- ✅ Blog with MDX posts |
| 108 | +- ✅ Projects showcase |
| 109 | +- ✅ Dark/Light theme toggle |
| 110 | +- ✅ Responsive design |
| 111 | +- ✅ SEO optimization |
| 112 | +- ✅ RSS feeds |
| 113 | +- ✅ Search functionality (client-side) |
| 114 | + |
| 115 | +## 🐛 Troubleshooting |
| 116 | + |
| 117 | +### Build fails on GitHub Actions |
| 118 | + |
| 119 | +- Check the Actions tab for error logs |
| 120 | +- Common issues: |
| 121 | + - Missing dependencies |
| 122 | + - TypeScript errors |
| 123 | + - Build script errors |
| 124 | + |
| 125 | +### Images not loading |
| 126 | + |
| 127 | +- Make sure images are in `/public/static/images/` |
| 128 | +- Use relative paths: `/static/images/...` |
| 129 | + |
| 130 | +### 404 on navigation |
| 131 | + |
| 132 | +- Verify `output: 'export'` is set in `next.config.js` |
| 133 | +- Check that pages are in `/app` directory |
| 134 | + |
| 135 | +### Styles not loading |
| 136 | + |
| 137 | +- Tailwind CSS is compiled during build |
| 138 | +- Check `tailwind.config.js` content paths |
| 139 | + |
| 140 | +## 📝 Update Site Metadata |
| 141 | + |
| 142 | +Before final deployment, update `data/siteMetadata.js`: |
| 143 | + |
| 144 | +```javascript |
| 145 | +siteUrl: 'https://Antot-12.github.io/Potrfolio/', // Your actual GitHub Pages URL |
| 146 | +siteRepo: 'https://github.com/Antot-12/Potrfolio', // Your repo |
| 147 | +``` |
| 148 | + |
| 149 | +## ✨ Performance Optimizations |
| 150 | + |
| 151 | +- ✅ Static generation (fast loading) |
| 152 | +- ✅ Next.js Image component (optimized images) |
| 153 | +- ✅ Code splitting |
| 154 | +- ✅ CSS minification |
| 155 | +- ✅ Tree-shaking unused code |
| 156 | +- ✅ Compression |
| 157 | + |
| 158 | +## 🔄 Continuous Deployment |
| 159 | + |
| 160 | +Every push to `main` automatically: |
| 161 | + |
| 162 | +1. Triggers GitHub Actions |
| 163 | +2. Builds the site |
| 164 | +3. Deploys to GitHub Pages |
| 165 | +4. Site updates in ~2-3 minutes |
| 166 | + |
| 167 | +## 📱 Testing Before Deploy |
| 168 | + |
| 169 | +Test locally with production build: |
| 170 | + |
| 171 | +```bash |
| 172 | +yarn build:github |
| 173 | +npx serve out |
| 174 | +``` |
| 175 | + |
| 176 | +Then open http://localhost:3000 |
| 177 | + |
| 178 | +--- |
| 179 | + |
| 180 | +**Your site is ready for GitHub Pages! 🎉** |
| 181 | + |
| 182 | +Push to `main` and watch it deploy automatically. |
0 commit comments