I'm trying to create a website on GitHub Pages, but for some reason, my CSS is taking a very long time to update. I just want to be clear that my CSS does load, it just isn't updating. I tried everything, like clearing the browser cache. But when I go to deployments, my changes were never deployed, and the CSS file https://virxec.github.io/CSWeek/assets/main.css also hasn't updated. The page is here: https://virxec.github.io/CSWeek/MiniGames/ and the file is here https://github.com/VirxEC/CSWeek/blob/master/assets/main.css Is there a way to make GitHub Pages updated CSS files faster? I checked in the commits and it actually says that it hasn't built the page with the edits to the CSS file - only the other pages.
UPDATE: I just waited for a while and then made another small change and then committed it. It updated immediately. Why does this happen? Why didn't it just auto-rebuild?
It looks like you have to bust the cache manually on Github pages.
Here's how I do it in my Jekyll project:
<link rel="stylesheet" href="{{ "public/css/style.css" | prepend: site.baseurl }}?{{site.time | date: '%s%N'}}">
This spits out something like this:
<link rel="stylesheet" href="/public/css/style.css?1634299829608420276">
The timestamp appended after the ? changes on each build which invalidates the cache.
Related
I forked the Solid-jekyll theme (solid-jekyll) and got it to work locally. However, when I pushed it up to Github pages, it seems to loose it's css formatting.
My fork of solid-jekyll is on github, username:BeenzSyed. I tried changing the baseurl to "/solid-jekyll" but that didn't work either.
This is what it looks like on my fork: https://beenzsyed.github.io/solid-jekyll/.
This is what it should like though: http://ojs.xyz/solid-jekyll/.
I think it's because it can't find the _includes/css/style.css file but I'm not sure what to do to fix that. Any help is appreciated!
Faced exactly same issue long back and it consumed 2-3 days. Find your main stylesheets (like main.css) and save it to assets folder and commit. This way Github will be copying stylesheet to site built. It usually won't copy :( main.css
I followed the suggestion of dracos on this GitHub Issue page and related commit to change /_includes/head.html from:
<link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
to
<link rel="stylesheet" href="{{ "/public/css/poole.css" | relative_url }}">
Changing most site.baseurl references to relative_url works in both local testing and on GitHub Pages.
My commit for changes to my site can be found below:
https://github.com/naamancampbell/naamancampbell.github.io/commit/f60da4d4e48447708c2e157ff1e07303d5377587
As someone pointed out, the live demo uses a different stylesheet. So the repo isn't the same. I suggest creating a new issue in the repository.
I am not sure what's going on, but my personal site - built with Jekyll and hosted on Github pages - has been exhibiting odd css styles behavior as of the last few weeks or so.
I originally set it up on Jekyll 1.something-or-other. I am aware that it is at 3.something now and for the longest time, through 2 etc. I have not had a problem with the styles, everthing was fine up until less than a month ago.
I have not made any changes to the styles configuration for a couple years, but now it is only rendering the styles for the pages (Homepage, About Page, list pages for archives, etc.). But on the actual posts, it drops all the styles - looks like raw markdown and images and no layout.
I have updated jekyll to 3.1.2 on my local machine, and what's even stranger is that when I run it locally, it builds fine and all, but the problem is the opposite. That is, all the posts are formatted with the appropriate styles, but the pages (again - Homepage, about page, archive list) are unstyled.
Again, no changes in any configurations. Is there some obvious places I should be looking? I am using the jekyll bootstrap theme that's a little customized. but not much.
Site is http://subtxt.in
I found your repo and poked around. There is a lot going on there, it seems overly complex.
Using Chromes dev tools you can see the problem is with the css loading - on good pages the correct path is: <link href="/assets/themes/the-minimum/css/style.css" rel="stylesheet" media="all">
On posts where it doesn't work it is: <link href="/assets/themes//css/style.css" rel="stylesheet" media="all">
Note the missing theme name - the-minimum.
In your repo I can't quite figure out the logic, but you could simplify it I think. This file - _includes/themes/the-minimum/default.html I believe contains the head section for all pages.
The line <link href='{{ ASSET_PATH }}/css/style.css' rel="stylesheet" media="all"> I think is the problem, `ASSET_PATH seems to come back with different values. Try just hard coding it to be the correct path like:
<link href="/assets/themes/the-minimum/css/style.css" rel="stylesheet" media="all">
I'm not 100% sure this will fix it, but I think it will.
I would add a link to your repo if this doesn't fix it for you so other people can check it.
This is my first time creating a WP template. I used this tutorial: http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/
I am editing the style.css file that is in the template folder (WCCB Theme - Copy). It is on XAMPP, a local server, so there is no FTPing anything. I edit the file, and refresh my browser and nothing happens. Currently I only have one style in there, making H2s red, and the rest is blank (except for the header comment). Not sure what I'm doing wrong.
1: When I view the source, the file is listed as a stylesheet that is applied.
2: When I go directly to the URL of the file the browser can find it.
3: When I use the developer tools to inspect my H2, it says only user agent styles are being applied.
Initially it appeared as a caching issue, but I have cleared my cache (Chrome). I have no idea what is wrong. How can I get my CSS to udpate?
Go to the template folder (usually under: /var/www/html/wp-content/themes/<your theme>) and edit the file: header.php (don't forget to back it up first!)
replace the line:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
with:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>?v=123" media="screen" />
and refresh the page.
If it wasn't refreshed and you're using WP Super Cache - delete the cache.
Still didn't refresh? run from prompt service httpd restart (it restarts the Apache) and try again.
Worked for me!
I know I had problems like that before. Try ctrl+f5 to do full reload.
Not sure how I fixed this. I deleted the template from the WP admin panel and added it again with a different name and some CSS changes already made. It worked. Now I can change my CSS file and refresh my browser and the changes appear. Not sure what happened.
What I usually do is open the page on the Incognito Mode(Ctrl + Shift + N) - if you are using Mac (cmd + shift + N).
I'm having a css file and i want to modify it to fit my needs.
The problem is that it seems to be cached somewhere, as i just cannot see the changes, no matter what i do in the css file.
I am sure i am pointing to the right file, as by now i'v modified in it, and it worked.
Is there any setting so that i can turn the cache off?
Thanks!
As pointed out in this article http://www.wkoorts.com/wkblog/2009/07/12/css-auto-reload-with-django-templates/, you could force django reload your css file by using a parameter in your css link :
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?{% now "U" %}" />
This is a timestamp which takes a different value every second, so you could even reload your css second every second if needed!
Just go into your site, view source, and copy the link to your CSS file. Verify the link, verify it's being modified. Refresh the CSS file manually via your browser to get the latest.
This isn't a Django issue.
Did you try appending a datetime stamp to the end of the request? I know some frameworks do this to .js and .css files automatically to prevent caching.
Instead of using complicated solutions you can add extra parameter to your includes in the templates.
For static includes:
<script src="{% static 'js/polls/polls.js' %}?version=1"></script>
For direct includes:
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?version=1" />
Note the ?version=1 in the code. Every time you're modifying the file, change this version in the template, so browser will be forced to reload the file.
Of course you can use even now as suggested by #rom, but if your static files are not being changed very often, it's not the smartest idea to don't use cache at all.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.