Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Aug 22, 2025

When deployed to GitHub Pages, the website was not loading any images or videos due to incorrect asset path handling. GitHub Pages serves project repositories under a /web-novit base path, but the application was not properly accounting for this in asset references.

Problem

The original issue manifested as:

  • Logo images showing broken image placeholders
  • Background videos not loading
  • Case study images displaying as broken links
  • All static assets returning 404 errors when accessed through GitHub Pages

Root Cause

The problem had multiple components:

  1. Static assets in /public weren't being moved to the correct GitHub Pages structure - the post-build script was only moving locale directories and Next.js bundles, but leaving root-level assets like logos and favicons at the wrong path.

  2. Asset path function was inconsistent - the getAssetPath function wasn't properly adding the /web-novit base path for GitHub Pages builds.

  3. Navigation links were incorrectly using asset path logic - components were using getAssetPath for navigation hrefs, causing double base path application.

Solution

1. Enhanced Post-build Script

Updated scripts/post-build.js to properly copy root-level assets:

const rootAssets = [
  'novit-logo-official.png',
  'novit-icon-only.svg', 
  'favicon.png',
  'robots.txt',
  'site.webmanifest',
  'sitemap.xml'
];

2. Fixed Asset Path Logic

Corrected getAssetPath in src/config/constants.ts to properly detect GitHub Pages environment and add base path:

export function getAssetPath(path: string): string {
  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
  if (normalizedPath.startsWith('/web-novit')) {
    return normalizedPath;
  }
  const isGitHub = isOnGitHubPages();
  if (isGitHub) {
    return `/web-novit${normalizedPath}`;
  }
  return normalizedPath;
}

3. Separated Navigation and Asset Paths

Created getNavigationPath function to handle navigation links separately from static assets, preventing double base path application.

4. Updated Components

Modified all components to use the appropriate function:

  • getAssetPath() for images, videos, logos, favicons
  • getNavigationPath() for navigation hrefs and internal links

Result

All assets now load correctly in both environments:

  • Local development: http://localhost:3000/images/logo.png
  • GitHub Pages: http://novitsoftware.github.io/web-novit/images/logo.png

The website is now fully functional on GitHub Pages with all images and videos loading properly.

Fixes #61.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: RHV044 <7198182+RHV044@users.noreply.github.com>
@RHV044 RHV044 marked this pull request as ready for review August 22, 2025 20:58
@RHV044 RHV044 merged commit aef435a into master Aug 22, 2025
0 of 2 checks passed
Copilot AI changed the title [WIP] Imagenes y Videos no cargan cuando esta deployado en Github Pages Fix asset loading for GitHub Pages deployment - images and videos now load correctly Aug 22, 2025
Copilot AI requested a review from RHV044 August 22, 2025 21:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Imagenes y Videos no cargan cuando esta deployado en Github Pages

2 participants