nusserstudios / tailbliss

TailBliss is a Hugo Starter theme built on TailwindCSS 3, and Alpine.JS.
https://tailbliss.netlify.app/
Apache License 2.0
283 stars 129 forks source link

[BUG] baseURL Causing CSS Linking Errors #169

Closed Tzion0 closed 3 weeks ago

Tzion0 commented 5 months ago

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 }}
kenshin-takahiro commented 4 months ago

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.

Tzion0 commented 4 months ago

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?