tailbliss
tailbliss copied to clipboard
[BUG] baseURL Causing CSS Linking Errors
When baseURL is set, I found out that the CSS is not relatively linked, turns out by changing refPermalink
with Permalink
in layouts/partials/head.html
will resolve the issue:
{{ $styles := resources.Get "/css/style.css" | postCSS }}
{{ if .Site.IsServer }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" />
{{ else }}
{{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" />
{{ end }}
I have a similar issue I think, the page loads with no css when running in localahost. I tried the solution above but for me it didn't change anything. Still only seeing html without any css formatting. I tried deleting everything and cloning again but the same happens. Should it work out of the box or does it need at least some editing in hugo.yaml
?
EDIT: Never-mind, that was my local development issue, since I am using code-server and editing in a remote machine, so normally a hugo server
does not work in that scenario. You need instead hugo server --bind <remote-ip> --baseURL http://<remote-ip> -D
. So After I added this correction in the file package.json
in line 18 where is has the "watch:hugo": "hugo server"
, then it worked perfectly.
Cool! Looks like you've fixed the issue, I should take back my words because it seems not affected suddenly. I somehow able to load the CSS again regardless of local/remote environment.
By the way, I seems couldn't load the featured image successfully on layouts/index.html
:
<a href="{{.Permalink}}">
{{ with .Params.featured_image }}
{{ with resources.Get . }}
{{ $postimage := (.Resize "500x webp q90").RelPermalink }}
<img src="{{ $postimage }}" class="object-fill overflow-hidden rounded-t-lg" width="100%" height="" loading="lazy"
alt="{{ .Title }}" />
{{ end }}
{{ end }}
</a>
All I did is just set the baseURL
to baseURL: 'https://test.github.io/reponame/'
and feature_image
to featured_image: assets/images/featured/jan24.jpg
. I tried changing various format of featured_image path also no luck, it seems related to how the the code parser built-in on parsing this?