GitHub Pages doesn't use updated CSS file

I’m using GitHub Pages for my website at this specific site: https://ludomath.net/LA/vectors.html. The problem is that whenever I push new files on GitHub, the CSS files do not update on the site. It just uses an older version. I tried making changes to the HTML file, and that works perfectly, but the CSS file still stays behind and loads an old version. It has been about 1 hour since I pushed the last changes, and it still doesn’t load the new CSS file. 

Just to be clear: the CSS file is updated on GitHub, but the actual website does not use the updated file. The CSS file can be found here: https://github.com/dexterAndre/LudoMath/tree/gh-pages/Common 

This problem seems to have many causes and fixes, but none have worked for me, so that’s why I’m asking here. I’m pretty new to web development, so please excuse me if I’m missing something obvious. 

5 Likes

So I’ve waited for about 3 hours, and finally the changed were made. I worked with some other files in the meantime, but I don’t know if that was the solution. The problem that the HTML file does update quickly, while the CSS file doesn’t update before 3 hours still persists, and I’m still interested in hearing how I can improve the CSS update speed for GitHub pages. 

3 Likes

Hi,

When I first started using GitHub pages, I also had the same experience. It is not GitHub’s fault, instead it is your browser. The solution to this is by going to your browser settings and reset cache and cookies. This should work.

Another way of doing this is by using Git. You make your changes on your local desktop, and see what the website looks like by opening index.html . Then you can git push it to github and be rest assured that it will be like what you saw in your local desktop.

16 Likes

I have tried deleting the cookies and resetting the cache in Chrome, but it doesn’t help. Also, I’m using both GitHub for Desktop and also directly modifying the file on the GitHub website itself, but none of these work, unfortunately. 

3 Likes

Even I faced the same.
I think its due to caching in their servers. For me, it took between 15-40 minutes.

GitHub pages should provide some way to avoid it.

5 Likes

About 4 hours and no updates happening. The files updated immediately in the repo, but not on the hosted page.

Finally the page updated…

2 Likes

I am experiencing the same problem.

When I use git to upload, the changes are only noticeable in incognito mode. But when I upload directly to github, the changes are noticeable after about 5 minutes.

2 Likes

same problem too yesterdy it takes 12 hour to updat the steelshet 

1 Like

Just clear the browsing data in the browser settings and it will work.

1 Like

Same problem for me too.

GitHub pages are not reflecting changes on the github repository. 

Hi everyone!

If clearing your cache/removing cookies doesn’t work as explained by @yangciou, I would recommend reaching out to private support with the name and link of the repository you are working with. They should be able to take a closer look.

Cheers!

It happened to me too. What i understand is you need to clear the cache of your browser. I try on other browser it is working fine. Please clear cache and try hope it works…

Was having the same issue and Ctrl + f5 did the trick for me (refreshes your cache)

I have same problem too. I created my own beta website at ‘betaleapofazzamgithubio’ repository. But the website only can loads CSS from third party CDN website (like CDNjs).

No, that is not the solution.

The problem is that the content on gitHub from which the site is built, is not reflected in what github.io serves.

There is an unpredicatble delay which can be seconds or hours.

As the CSS files could also be cached locally, it would be nice if support for https://github.com/tkareine/jekyll-minibundle is added to GitHub pages. minibundle adds a hash of the contents to the filename, so that a different filename is used when changes are made, avoiding the cache altogether for updated files.

If you have / before you css file remove it.

Example 

<link rel=“stylesheet” href="/main.css" />

won’t work but

<link rel=“stylesheet” href=“main.css” />

will work

@dexterandre wrote:

I’m using GitHub Pages for my website at this specific site: https://putlockers.llc/. The problem is that whenever I push new files on GitHub, the CSS files do not update on the site. It just uses an older version. I tried making changes to the HTML file, and that works perfectly, but the CSS file still stays behind and loads an old version. It has been about 1 hour since I pushed the last changes, and it still doesn’t load the new CSS file. 

 

Just to be clear: the CSS file is updated on GitHub, but the actual website does not use the updated file. The CSS file can be found here: https://github.com/dexterAndre/LudoMath/tree/gh-pages/Common 

 

This problem seems to have many causes and fixes, but none have worked for me, so that’s why I’m asking here. I’m pretty new to web development, so please excuse me if I’m missing something obvious. 

When I first started using GitHub pages, I also had the same experience. It is not GitHub’s fault, instead it is your browser. The solution to this is by going to your browser settings and reset cache and cookies. This should work. Another way of doing this is by using Git. You make your changes on your local desktop, and see what the website looks like by opening index.html . Then you can git push it to github and be rest assured that it will be like what you saw in your local desktop.

I have the same problem. This is some kind of url caching on the server, if you change the url by adding ?random=1 the file is there, but the old urls give old cached result. I’ve just uploaded the file to verifiy in google webmaster tool and I can’t validate because without ?anything I have 404.

There should be some kind of flush function in repo settings, where user is able to force update the content. Or maybe using the API.

Hello @dexterandre! It definitely sounds like your old version is being cached, and @yangciou, @yuyoux, @nadiajoyce, @jaikangam93, and @csteitz01 are correct in their suggestions. Sometimes a hard refresh of your browser (as opposed to a standard refresh) is necessary to really clear out the old file. Below are some instructions for how to do this in various browsers.

Chrome:

Option 1: Hold down Ctrl and click the Reload button (Windows) or Shift and click the Reload button (Mac)
Option 2: Hold down Ctrl and press F5 (Windows) or Cmd and Shift and R (Mac)

Firefox:

Option 1: Hold Ctrl and press the F5 key (Windows) or Shift and click the Reload button (Mac)
Option 2: Hold down Ctrl and Shift and R (Windows) or Cmd and Shift and R (Mac)

Internet Explorer:

Option 1: Hold Ctrl and press the F5 key
Option 2: Hold the Ctrl key and click the Refresh button.

Safari:

Press Shift and click the Reload button

Additional Resources:

Here are some resources on the subject of clearing browser cache:

Chrome:
https://support.google.com/accounts/answer/32050

Firefox:
https://support.mozilla.org/en-US/kb/how-clear-firefox-cache

Microsoft Edge:
https://support.microsoft.com/en-us/help/10607/microsoft-edge-view-delete-browser-history

Safari:
https://support.apple.com/guide/safari/clear-your-browsing-history-sfri47acf5d6/mac

2 Likes