Skip to content

Fix GitHub Pages deployment: resolve CSS and images not loading issue #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rezwana-karim merged 2 commits into from
Sep 29, 2025
Merged

Fix GitHub Pages deployment: resolve CSS and images not loading issue #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6ec960
Initial plan
Copilot Sep 29, 2025
af30725
Fix GitHub Pages deployment: ensure .nojekyll file creation and add d…
Copilot Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,20 @@ jobs:
run: npm run build:github-pages

- name: Add .nojekyll file
run: touch out/.nojekyll
run: |
echo "Creating .nojekyll file to disable Jekyll processing"
touch out/.nojekyll
echo "Verifying .nojekyll file was created:"
ls -la out/.nojekyll

- name: Debug build output
run: |
echo "Build output structure:"
ls -la out/
echo "Checking _next directory:"
ls -la out/_next/
echo "Checking static assets:"
ls -la out/_next/static/chunks/ | head -5
Copy link

Copilot AI Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The debug step uses hardcoded paths and assumptions about directory structure. Consider adding error handling with || echo 'Directory not found' to prevent workflow failures if directories don't exist as expected.

Suggested change
ls -la out/_next/static/chunks/ | head -5
ls -la out/_next/static/chunks/ | head -5 || echo 'Directory not found'

Copilot uses AI. Check for mistakes.

- name: Upload artifact
uses: actions/upload-pages-artifact@v3
Expand Down
16 changes: 9 additions & 7 deletions docs/github-pages-deployment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,20 @@ const nextConfig: NextConfig = {
};
```

### 2. GitHub Actions Workflow (`.github/workflows/deploy-github-pages.yml`)
### 2. GitHub Actions Workflow (`.github/workflows/deploy.yml`)
Copy link

Copilot AI Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The heading should maintain consistency with the actual workflow filename. Consider using a more descriptive heading like 'GitHub Actions Deployment Workflow' to better explain its purpose.

Suggested change
### 2. GitHub Actions Workflow (`.github/workflows/deploy.yml`)
### 2. GitHub Actions Deployment Workflow (`.github/workflows/deploy.yml`)

Copilot uses AI. Check for mistakes.

Automated deployment workflow that:
- Triggers on pushes to `main` branch
- Triggers on pushes to `main` branch and pull requests
Copy link

Copilot AI Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation states the workflow triggers on pull requests, but this should be verified against the actual workflow configuration to ensure accuracy.

Suggested change
- Triggers on pushes to `main` branch and pull requests
- Triggers on pushes to `main` branch

Copilot uses AI. Check for mistakes.
- Can be manually triggered via workflow_dispatch
- Builds the Next.js application as static files
- Deploys to GitHub Pages
- Builds the Next.js application as static files using `npm run build:github-pages`
- Creates `.nojekyll` file to disable Jekyll processing
- Deploys to GitHub Pages using official GitHub Pages action

### 3. Additional Files
### 3. Critical Files for Deployment

- `.nojekyll`: Prevents GitHub from processing the site with Jekyll
- `404.html`: Custom 404 page (automatically generated by Next.js)
- **`.nojekyll`**: Automatically created during build to prevent GitHub from processing the site with Jekyll (critical for `_next` directory assets)
- **`404.html`**: Custom 404 page (automatically generated by Next.js)
- **Asset files**: All CSS/JS files in `_next/static/` directory with correct basePath prefixes

## Deployment Process

Expand Down