Google cloud bucket static site styling different from local copy

0
votes

I am hosting a static site on a google storage bucket. I use cloudflare for https.

I went to the site today and saw that the styling was broken. Parts of the site were cut off and others were shifted off center--not as it was designed. I cleared out the bucket and uploaded my most recent version of the site through gsutil CLI. On the same chrome browser, the local copy of the site looks completely different from the bucket copy.

I checked whether the style sheets were uploaded and they were. I temporarily removed the main style sheet from the local copy to see if it produced the same result, and it did not.

1
cssgoogle-cloud-storagebucketgsutil
I have a problem developing in Chrome where the browser caches a previous stylesheet. I solve it by doing a hard refresh (clearing my cache). This is the best possible problem because it means new visitors who don't have your stylesheet cached don't see the broken CSS, so I hope for you that this is the issue! – Sydney Y
That was it! Thanks @SydneyY ! Any suggestions forcing cache clearing for future updates? – Jake Durell
There's a checkbox in the dev tools in Chrome labeled "prevent cache' which I think is in the network tab. But it ONLY pauses caching when the dev tools are open. I'm so glad that worked :) – Sydney Y
I added some resources on the subject in the answer for you :) It's a cool subject. There's so many facets to web development. – Sydney Y

1 Answers

1
votes

I have a problem developing in Chrome where the browser caches a previous stylesheet. I solve it by doing a hard refresh (clearing my cache). This is the best possible problem because it means new visitors who don't have your stylesheet cached don't see the broken CSS, so I hope for you that this is the issue!

(Originally a comment)

Edit: further resources

Also, for your users you can force their browsers to get the new version: https://www.alainschlesser.com/bust-cache-content-hash/ and to set some guidelines for browsers from your server, like 'cache html for 24h' https://www.keycdn.com/blog/http-cache-headers