github-pages

Git Page doesn't load CSS (external/internal) and images


Issue:

I was creating my personal page in git-page but CSS doesn't load in Git page.

CSS doesn't load in line our in file path and image/favicon doesnt load either.

I try videos in YouTube and ChatGPT answers, but I couldn't.

What can I try next?

Links:

I only use HTML and CSS in this.

Tried

I tried changing the path of the CSS file and folders several times but didn't work.

how (./cssLink ./imgPasteLink) - ( in head) -
(cssLink ,imgPasteLink)

in local host works normally.

I expected load css files and images in github-pages


Solution

  • GitHub Pages calls the index.html file from the root directory of your project. Therefore, you do not need to use the <base> tag to point to the portfolio directory.

    On your local machine, you might be accessing the index.html file from outside the portfolio directory, which is why you may have added the <base> tag. However, to ensure correct rendering on GitHub Pages, you should remove the following line from your index.html file:

    <base href="/portfolio/">
    

    Instead, navigate to the portfolio directory on your local machine before opening the index.html file.


    Update

    I noticed that your site is not loading neither _css and _images directories. Check this issue or link.

    Looks like directories with underscore are not loaded with github pages. As the people from the issue said, tried to add .nojekyll in the _css and _images directories.