Search code examples
cssgithub-pages

GitHub Pages website rendering locally but not on server


I am developing a personal website at https://kajalv.com. I made a number of changes now and they look fine locally. (Also, downloading the repo and opening index.html works fine.) But when I pushed to my master repository at https://github.com/kajalv/kajalv.github.io, some CSS seems to have been lost.

For example, this works locally but the change isn't visible on the actual site -

#contactContainer img
{
  height: 80px;
  width: 80px;
  border-radius: 50%;
  opacity: .5;
  border: 2px solid black;
  box-shadow: 5px;
  margin-bottom: 40px;
}

Similarly, a paragraph font color is set to black but this change isn't reflected on the site:

.eduInfo p
{
  color: black;
}

Another issue is my favicon. I can see it when I open the index.html file locally, but not on the actual site. I have set it using this code.

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

I checked to see if I had any uncommitted changes, but there were none:

On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working directory clean

I have a number of such changes, but I'm assuming they are all the same issue. What could be the problem? Could this be an issue with GitHub Pages using my changes very slowly?


Solution

  • I've taken a look at your last commit and I can see these changes on your page. I can also see the favicon you have in the repo on the page.

    If the changes are working correctly locally and not on GH pages, just give it some time. It's a caching problem. Usually, it takes GH pages few minutes to update. You can also try with emptying the browser cache, in Chrome, you can open the Dev Tools -> Application -> Clear storage -> [Check everything] -> Clear site data. Or, with Dev Tools open, you can right click on the refresh button and choose Empty Cache and Hard Reload.

    For extra measure, you can check Disable cache in the Network tab, although this doesn't clear the cache in all cases, so don't rely solely on this feature.

    If that doesn't work, you try with private browsing mode, but make sure you close the session between updates to make sure the cache is cleared.

    P.S.: Your page looks really cool, great job :)