Implement complete GitHub Pages deployment configuration

.github/workflows/deploy-github-pages.yml

@@ -0,0 +1,55 @@
+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.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          static_site_generator: next
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build with Next.js
+        run: npm run build:github-pages
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  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

.github/workflows/deploy.yml

@@ -0,0 +1,62 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Next.js application
+        run: npm run build:github-pages
+
+      - name: Add .nojekyll file
+        run: touch out/.nojekyll
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -11,7 +11,7 @@ This is the official portfolio website built with Next.js, Tailwind CSS, and Rad
 - **Components**: [Radix UI](https://www.radix-ui.com)
 - **Typography**: [Geist Font](https://vercel.com/font)
 - **Language**: TypeScript
-- **Deployment**: Vercel
+- **Deployment**: GitHub Pages (automated via GitHub Actions)
 
 ## Getting Started
 
@@ -50,9 +50,26 @@ This project implements a comprehensive design system based on:
 
 - `npm run dev` - Start development server
 - `npm run build` - Build for production
+- `npm run build:github-pages` - Build for GitHub Pages deployment
 - `npm run start` - Start production server
 - `npm run lint` - Run ESLint
 
+## Deployment
+
+This project supports two deployment methods:
+
+### GitHub Pages (Recommended)
+The site is automatically deployed to GitHub Pages when changes are pushed to the main branch.
+
+- **Live Site**: [https://codestorm-hub.github.io/CodeStorm-Hub.github.io/](https://codestorm-hub.github.io/CodeStorm-Hub.github.io/)
+- **Deployment**: Automatic via GitHub Actions
+- **Configuration**: See [GitHub Pages Deployment Guide](docs/github-pages-deployment.md)
+
+### Vercel
+Alternative deployment platform with similar capabilities.
+
+- **Configuration**: `vercel.json` included for Vercel deployments
+
 ## Contributing
 
 We welcome contributions! Please see our contributing guidelines for more details.

docs/github-pages-deployment.md

@@ -0,0 +1,173 @@
+# GitHub Pages Deployment Guide
+
+This document outlines the deployment process for CodeStorm Hub using GitHub Pages with automated GitHub Actions workflow.
+
+## Overview
+
+CodeStorm Hub is deployed using GitHub Pages with a Next.js static export. The deployment process is fully automated through GitHub Actions, which builds and deploys the site whenever changes are pushed to the main branch.
+
+## Architecture
+
+- **Framework**: Next.js 15 with static export (`output: 'export'`)
+- **Deployment Platform**: GitHub Pages
+- **Automation**: GitHub Actions workflow
+- **Branch**: `main` (production deployment)
+- **Build Output**: Static HTML/CSS/JS files in `/out` directory
+
+## Deployment Configuration
+
+### 1. Next.js Configuration (`next.config.ts`)
+
+The application is configured for static export with GitHub Pages optimizations:
+
+```typescript
+const nextConfig: NextConfig = {
+  output: 'export',
+  trailingSlash: true,
+  images: {
+    unoptimized: true, // Required for GitHub Pages
+    remotePatterns: [new URL("https://github.com/CodeStorm-Hub.png")],
+  },
+  // GitHub Pages specific paths
+  basePath: process.env.NODE_ENV === 'production' ? '/CodeStorm-Hub.github.io' : '',
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/CodeStorm-Hub.github.io/' : '',
+};
+```
+
+### 2. GitHub Actions Workflow (`.github/workflows/deploy-github-pages.yml`)
+
+Automated deployment workflow that:
+- Triggers on pushes to `main` branch
+- Can be manually triggered via workflow_dispatch
+- Builds the Next.js application as static files
+- Deploys to GitHub Pages
+
+### 3. Additional Files
+
+- `.nojekyll`: Prevents GitHub from processing the site with Jekyll
+- `404.html`: Custom 404 page (automatically generated by Next.js)
+
+## Deployment Process
+
+### Automatic Deployment
+
+1. **Trigger**: Push changes to the `main` branch
+2. **Build**: GitHub Actions runs `npm run build:github-pages`
+3. **Export**: Next.js generates static files in `/out` directory
+4. **Deploy**: Files are deployed to GitHub Pages
+5. **Live**: Site is available at `https://codestorm-hub.github.io/CodeStorm-Hub.github.io/`
+
+### Manual Deployment
+
+You can manually trigger deployment:
+1. Go to the repository's Actions tab
+2. Select "Deploy to GitHub Pages" workflow
+3. Click "Run workflow" on the main branch
+
+## Local Testing
+
+To test the GitHub Pages build locally:
+
+```bash
+# Install dependencies
+npm install
+
+# Build for GitHub Pages
+npm run build:github-pages
+
+# Serve the static files (optional)
+npx serve out
+```
+
+## Repository Settings
+
+Ensure the following GitHub repository settings are configured:
+
+### Pages Settings
+1. Navigate to **Settings** → **Pages**
+2. **Source**: Deploy from a branch
+3. **Branch**: Select `gh-pages` (created automatically by the workflow)
+4. **Folder**: `/ (root)`
+
+### Actions Permissions
+1. Navigate to **Settings** → **Actions** → **General**
+2. Ensure "Allow all actions and reusable workflows" is selected
+3. Under "Workflow permissions", select "Read and write permissions"
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Build Fails**
+   - Check the Actions tab for error logs
+   - Ensure all dependencies are properly listed in `package.json`
+   - Verify TypeScript compilation passes locally
+
+2. **Assets Not Loading**
+   - Confirm `basePath` and `assetPrefix` are correctly configured
+   - Check that images use the Next.js `Image` component
+   - Verify links use Next.js `Link` component
+
+3. **404 Errors on Page Refresh**
+   - This is expected behavior for client-side routing in GitHub Pages
+   - The custom 404.html handles fallback routing
+
+4. **Workflow Permissions Error**
+   - Ensure repository has proper Actions permissions
+   - Check that GITHUB_TOKEN has necessary permissions
+
+### Validation Steps
+
+After deployment, verify:
+- [ ] Site loads at the GitHub Pages URL
+- [ ] Navigation works correctly
+- [ ] Images and assets load properly
+- [ ] All pages are accessible
+- [ ] Responsive design works across devices
+- [ ] Dark/light mode toggle functions
+- [ ] No console errors in browser developer tools
+
+## Performance Optimizations
+
+The GitHub Pages deployment includes several optimizations:
+
+- **Static Generation**: All pages are pre-generated at build time
+- **Asset Optimization**: Images and assets are optimized for web delivery
+- **Bundle Splitting**: JavaScript is split into optimized chunks
+- **CSS Optimization**: Tailwind CSS is purged of unused styles
+- **Caching**: Static assets leverage browser caching
+
+## Monitoring
+
+Monitor deployment status:
+- **Actions Tab**: View build and deployment logs
+- **Pages Settings**: Check deployment status and URL
+- **Repository Insights**: Monitor site traffic and performance
+
+## Maintenance
+
+Regular maintenance tasks:
+- Monitor GitHub Actions workflow runs
+- Update dependencies periodically
+- Review and optimize Core Web Vitals
+- Test deployment after major changes
+- Keep documentation updated
+
+## Custom Domain (Optional)
+
+To use a custom domain:
+1. Add a `CNAME` file to the repository root
+2. Configure DNS records with your domain provider
+3. Update the domain in repository Pages settings
+4. Update `basePath` and `assetPrefix` in `next.config.ts`
+
+## Security Considerations
+
+- All builds run in isolated GitHub Actions environments
+- No sensitive data is exposed in client-side code
+- Dependencies are automatically scanned for vulnerabilities
+- HTTPS is enforced by default on GitHub Pages
+
+---
+
+For questions or issues with deployment, please refer to the [GitHub Pages documentation](https://docs.github.com/en/pages) or open an issue in this repository.

next.config.ts

@@ -1,11 +1,21 @@
 import type { NextConfig } from "next";
 
+const isGitHubPages = process.env.NODE_ENV === 'production' && process.env.GITHUB_ACTIONS === 'true';
+
 const nextConfig: NextConfig = {
-  /* config options here */
-};
-module.exports = {
+  // Only enable export for GitHub Pages production builds
+  ...(isGitHubPages && { output: 'export' }),
+  trailingSlash: true,
   images: {
+    // Only disable optimization for GitHub Pages
+    unoptimized: Boolean(isGitHubPages),
     remotePatterns: [new URL("https://github.com/CodeStorm-Hub.png")],
   },
+  // GitHub Pages specific configuration
+  ...(isGitHubPages && {
+    basePath: '/CodeStorm-Hub.github.io',
+    assetPrefix: '/CodeStorm-Hub.github.io/',
+  }),
 };
+
 export default nextConfig;

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build --turbopack",
+    "build:github-pages": "NODE_ENV=production GITHUB_ACTIONS=true next build --turbopack",
     "start": "next start",
     "lint": "eslint"
   },