Search code examples
githubgithub-pages

Javascript and images not working on github pages

The files work perfectly on my PC but when I view it on Github Pages, both the images and Javascript do not seem to work at all.

The page link is: https://lupe-fiasnow.github.io/Industrious-Website/

The code is here: https://github.com/Lupe-FiaSnow/Industrious-Website

I'd appreciate any help as I just can't figure this problem out.

Solution

  • The base path of your site is /Industrious-Website, in your index.html you referenced:

    <script src="/main.js"></script>

    which will load https://lupe-fiasnow.github.io/main.js instead of https://lupe-fiasnow.github.io/Industrious-Website/main.js.

    It should be (without the slash):

    <script src="main.js"></script>

    The same apply for the img tag source :

    <img src="/img/person-3.jpg" alt="">

    should be :

    <img src="img/person-3.jpg" alt="">

    Also in your css file, you have :

    /* Showcase */
.showcase {
  background-color: #000;
  height: 55vh;
  background: linear-gradient(rgba(244, 56, 56, 0.5), rgba(0, 0, 0, .8)),
    url(/img/skyline.jpg) center no-repeat;   <================== this line
  background-size: cover;
}
.info-mid{
  background: linear-gradient(rgba(244, 56, 56, 0.5), rgba(0, 0, 0, .8)),
    url(/img/skyline.jpg) center no-repeat fixed; <================== this line
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /img/skyline.jpg will load https://lupe-fiasnow.github.io/img/skyline.jpg which doesn't exist, you want https://lupe-fiasnow.github.io/Industrious-Website/img/skyline.jpg. Update with url(img/skyline.jpg) would work