search

alanorth / hugo-theme-bootstrap4-blog

A blogging-centric Bootstrap v4 theme for the Hugo static site generator.
Other
204 stars 132 forks source link

If you rebuild the css, visitors to your site do not get the new css file if they have the old css file cached. #120

Closed Jieiku closed 4 years ago

Jieiku commented 4 years ago

For instance I changed some settings in the main.scss file to adjust the appearance. I then npm run build && rsync the new files to my public web directory.

If I hold down control and press F5 then the site will display correctly. but if I do not then all css formatting is missing from the page and it looks very plain. This is especially bad on Android because there is no easy way to clear the cache, and even if there was the average user wont have any idea how to do it. They will just think your site is broken.

I have read about the Built in Cache-Busting on Hugo, apparently the result is your file gets served with a built in hash such as:

style.28ff9597bd48cd1d12c385c13aba5c051f64fd0251790ce49bb49e8911e9f79d.css

This makes it so that clients always get the correct css file, here is where I am reading from: https://johnjago.com/blog/cache-busting-hugo/

I am however not yet completely understanding how to implement this, still working on it.

I am going to keep trying to figure this out, but the automatic cache-busting would be priceless! I would be able to make changes to the css and not have to worry about my site appearing broken to end users because their browser would see that the filename has changed and download the new file.

Jieiku commented 4 years ago

EDIT: I think I see the problem, I need Hugo Extended for toCSS to work. EDIT2: Nope, still dont work:

<toCSS $options>: error calling toCSS: type map[string]interface {} not supported in Resource transformations

alanorth commented 4 years ago

Yeah I've been meaning to look into Hugo's pipes and SCSS support. I wrote all the npm build scripts and sub-resource integrity stuff a few years ago before Hugo had support for it. You're right that this can totally work for us, which simplifies the build and gives us the cache busting feature for free. I will look into it this weekend.

alanorth commented 4 years ago

Dear @xekon, this was easier than I expected. See https://github.com/alanorth/hugo-theme-bootstrap4-blog/commit/44e8c677a6ab1b291e27b104d6bf9e66e0c42fd1. Very cool! Thank you for the idea. It is in master now.

P.S. I suspect your issue was that you didn't move the CSS files to a new directory called assets. BTW, I will not be using the toCSS just yet, as I'm not quite ready for Hugo to be doing all the SCSS processing just yet.

Jieiku commented 4 years ago

So COOL! Thank you so much for implementing this! I think it will also make handling cached files easier with cloudflare as well. At first I thought it eliminated the need to npm run build, however I was mistaken. Still I am very excited about this update :)

edit: After a bit of testing this is 100% solving my missing styles issue. I can upload new css and hit refresh and change pages on the android phone and it instantly sees the new css!