Investigate deployment problems regarding index.html/application.css

[dscho]

Today is the second time in just a few days (I had to deploy manually on Sep 18 to fix an issue that in hindsight might have needed a bit more investigation and is likely the very same issue as today) that the deployment failed in a strange way: the Playwright tests report an error in dark mode that is solely due to a missing CSS:

Expected	Actual

And indeed, the Developer Tools report this:

GET https://git-scm.com/application.min.2d766985e4b24027125583b5ca0ebed493c4afa991a8bb022cef771ca8c5cce9.css [HTTP/2 404 11ms]

That URL indeed 404s, yet:

$ curl -s https://git-scm.com/ | grep application.*css
  <link rel="stylesheet" href="/application.min.2d766985e4b24027125583b5ca0ebed493c4afa991a8bb022cef771ca8c5cce9.css" integrity="sha256-LXZpheSyQCcSVYO1yg6&#43;1JPEr6mRqLsCLO93HKjFzOk=">

Something really strange is going on.

[dscho]

Even more strange:

$ curl -s https://git-scm.com/about/branching-and-merging | grep application.*css
  <link rel="stylesheet" href="/application.min.f5911df7aa2e5eeaab8797d8bd9f2bb05eb98a752cef362df993d56b323a7cf2.css">

It might be just the index.html page that has an incorrect link? And why is there no "integrity" attribute? It gets stranger and stranger. Maybe something's up with Hugo?

[dscho]

There's gohugoio/hugo@a09b8a6 which talks about minifiers, but it says something about addressing deprecated constructs, not about fixing errors.

[dscho]

Well, what do you know, the github-pages artifact of the deployment run does not have that problem:

$ unzip -p github-pages.zip artifact.tar | tar Oxvf - ./index.html | grep application.*css
  <link rel="stylesheet" href="/application.min.f5911df7aa2e5eeaab8797d8bd9f2bb05eb98a752cef362df993d56b323a7cf2.css">

(This also misses the integrity attribute...)

So it looks more like a GitHub Pages problem than a Hugo problem.

[dscho]

And the deployment run reports ./index.html as being packaged for deployment, therefore the bug is on GitHub's side, fair and square.

[dscho]

Given my history with reporting bugs to GitHub, I'll just re-deploy and 🤞 that it won't happen too often.

[To1ne]

@dscho Isn't the issue simply the Cloudflare magic?

[To1ne]

Personally, I wouldn't mind if we move away from SCSS and use vanilla CSS (and no build). There is much (is there anything) that's not possible with modern CSS.

[dscho]

There is much (is there anything) that's not possible with modern CSS.

I do like the variables, mixins and the ability to nest sections, those are SCSS features unless I am mistaken.

[dscho]

@dscho Isn't the issue simply the Cloudflare magic?

That is possible, I didn't think of that. It might have a still-cached version of index.html but fail to have a cached version of application.min.*.css. Seems a bit counter-intuitive to have the probably heavily-exercised .css excised from the cache before index.html but... possible.

[dscho]

Isn't the issue simply the Cloudflare magic?

That is possible

But then, we have this in the deployment workflow, precisely to side-step Cloudflare magic:

git-scm.com/.github/actions/deploy-to-github-pages/action.yml

Lines 281 to 287 in ba2e629

	- name: Edit /etc/hosts to map the deployed domain to GitHub
	shell: bash
	# This side-steps any caches that might be configured on the domain,
	# and works even when the real server is not reachable from GitHub.
	run: |
	host="$(echo "$base_url" | sed -E 's|^https?://([^:/]+).*|\1|')"
	sudo sh -c "echo '185.199.108.153 $host' >>/etc/hosts"

[To1ne]

I do like the variables, mixins and the ability to nest sections, those are SCSS features unless I am mistaken.

Variables are possible and widely supported. Nesting is too, although a little less. Mixins are overrated in my opinion. In a more tailwind-like approach (which is the hype), mixins are also not needed.

[To1ne]

But then, we have this in the deployment workflow, precisely to side-step Cloudflare magic:

Makes sense we have something in place already, but my spidey sense still points in that direction.

[dscho]

I do like the variables, mixins and the ability to nest sections, those are SCSS features unless I am mistaken.

Variables are possible and widely supported. Nesting is too, although a little less. Mixins are overrated in my opinion. In a more tailwind-like approach (which is the hype), mixins are also not needed.

Okay, then. I am not familiar enough with a Tailwind-like approach, but I'm sure I can get used to it ;-)

But then, we have this in the deployment workflow, precisely to side-step Cloudflare magic:

Makes sense we have something in place already, but my spidey sense still points in that direction.

True, I should have tried it myself, side-stepping Cloudflare. Next time this happens (which will hopefully be... never), I'll make sure to (temporarily!) edit my /etc/hosts accordingly.

[dscho]

In any case, let's close this here ticket. The SCSS -> CSS idea can be discussed in its own ticket (or Pull Request? 😁 )