`Hugo` rendering very different from `Hugo Server` rendering

Summary

  1. what you were doing or what you tried
    Trying to render my website as I had for over a year before something broke between March and June of 2022. Using hugo server has continued to show my website rendered correctly, but hugo no longer works. I upgraded my versions of hugo and hugo-extended. I’ve played around with the baseurl many times. To simplify it, I took the example website from my theme, Hugo Future Imperfect Slim, and put that as my website, with the only changes being making the baseurl the same as my website (https://www.brendanmaxon.com/), and toggling relativeURLs and uglyURLs to see if that was the cause.
  2. what you expected
    I expected it to render just like the theme’s example website. Note the theme’s demo site no longer is up and doesn’t look like it’s supported anymore. However I did test a different active theme and still got the same issues.
  3. what actually happened.
    Ugly rendering - https://www.brendanmaxon.com/

Code

Link to code on github

Environment Details

~> hugo env
hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.18.3"

~> git version
git version 2.31.0.windows.1

~> hugo version
hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio

Thanks for reading!

It doesn’t look like hugo fault.

Its CSS or whatever way you use to implement it is reporting error.

Did not parse stylesheet at 'https://www.brendanmaxon.com/css/bundle.min.5233f2a4cd515395301b4154f6c1c621695e8cf53faa0935b76ac52fed7f4585.css' because non CSS MIME types are not allowed in strict mode.

Also, you got Theme as submodule. When you go into your theme it states

This repository has been archived by the owner. It is now read-only.

Is this theme is no longer supported/broken?

I’m still very much a Hugo (and websites in general) n00b, so really appreciate your response. The theme doesn’t appear to be supported, so I did test using a theme that was still active (I tried using Clarity, on other_theme branch). However I got the same results as my original theme: hugo server rendered perfectly while hugo (whether looking at the html locally or after pushing up to my google cloud bucket and looking at my website) still was failing the CSS

I see the css file up on google, is there something else causing the Did not parse stylesheet at 'https://www.brendanmaxon.com/css/bundle.min.5233f2a4cd515395301b4154f6c1c621695e8cf53faa0935b76ac52fed7f4585.css' because non CSS MIME types are not allowed in strict mode. error?

I’m almost certain that this is a baseURL issue, you need to put in a valid URL, e.g. baseURL=https:/example.org.

There is a bit of issues with CSS on its own,
if you turn off minifying you will see

   @supports (padding: max(0px)) {
        .fancybox-caption {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }
    }
}@charset "UTF-8";
/*!
* Future Imperfect by HTML5 UP
* html5up.net | @n33co
* Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*

The @charset rule must be the first element in the style sheet and not be preceded by any character. If several @charset rules are defined, only the first one is used. The @charset rule cannot be used inside a style attribute (on an HTML element), or inside the <style> element where the character set of the HTML page is relevant.

My advise would be, simplify config and sort out theme first and start adding bits and bats one by one to see when this is failing.

The observed behavior is not caused by running hugo instead of hugo server.

Cloudflare is serving your CSS files (and other file types) with the wrong MIME type.

1 Like

this was it! I had to change the metadata on my google cloud bucket for all *.css files to be MIME type “text/css” (stackoverflow). Thank you all for the quick help!

You’re welcome. Check the MIME type for other file types (e.g., JS) as well.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.