diff --git a/.github/workflows/deploy-github-pages.yml b/.github/workflows/deploy-github-pages.yml new file mode 100644 index 0000000..1655382 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..cffb7c9 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 4632ad0..2c0776f 100644 --- a/README.md +++ b/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. diff --git a/docs/github-pages-deployment.md b/docs/github-pages-deployment.md new file mode 100644 index 0000000..411ad1a --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next.config.ts b/next.config.ts index fd12277..1c8dacf 100644 --- a/next.config.ts +++ b/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; diff --git a/package.json b/package.json index 31dd374..b4c9f06 100644 --- a/package.json +++ b/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" },