New blog theme isn't applying (Cloudflare Pages)

So I created a new blog, followed everything to the T as my previous install, same theme and all. The New Repository is https://github.com/Nimrauko/High-rise-blog

Initially I copied the previous blogs files and folders precisely as they were on the other blog and then edited the Hugo.toml. It worked before so I figured it would be just as easy this time. Deployed to Cloudflare and it displayed perfectly! I had left a word out of the title on the Hugo.toml so went and added the word, no extra spaces or anything. Just a word. Go to check the deployment and the site no longer is abiding by the theme it’s just white with text, no form or shape as before (If that makes sense).

I delete the repo and the deployment and start from scratch this time manually doing everything by command line. Hugo Server shows the site as it should appear. Deploy. It appears normal for a moment, click to the Microposts link and bam broken again… Displays improperly (Attached image)

I am at a complete loss. Can you help me work this out? I have looked at everything and everything to me appears to be as it should be, but clearly I am mistaken

( https://high-rise-blog.pages.dev )

As mentioned in hundreds of other topics on this forum, use your browser’s dev tools to diagnose the problem.

Those URLs are broken.

Your site configuration contains:

baseurl = "https://high-rise-blog.pages.dev"

And that is incorrect. See https://gohugo.io/getting-started/configuration/#baseurl:

baseURL

(string) The absolute URL (protocol, host, path, and trailing slash) of your published site (e.g., https://www.example.org/docs/).

You are using this fragile construct:

<link rel="stylesheet" href="{{.Site.BaseURL}}css/joshin-color-palette.css" media="screen" charset="utf-8" />

And you don’t have a slash between the base URL and the first directory. So, add a slash to the baseURL in your site configuration.

But there is never a good reason to use .Site.BaseURL in a template, and the method will be deprecated at some point. Why? To avoid fragile constructs like the above. Do something like this instead:

<link rel="stylesheet" href="{{ relURL "css/joshin-color-palette.css" }}" media="screen" charset="utf-8">

You might want to run your entire site through an HTML validator; there are a number of errors.


Due to the number of people who, for whatever reason, were unable to add a trailing slash to their base URL, Hugo v0.123.0 and later automatically adds the trailing slash if not present.