The Problem

When a new website layout generated with Hugo was pushed to production it rendered very differently on the web than it appeared locally.

It looked like the CSS was only partially applied and some elements overlapped one another.

The Process

First, the source files were compared, but, as expected, they appeared identical.

Next, DevTools in the Chrome browser was used to compare a sample element on the site running locally vs remotely and showed that the sites were being styled by different CSS rules.

Then a look at the DevTools Console output revealed an error message:

Mixed Content: The page at ‘https://loopedline.com/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://loopedline.com/css/main.css’. This request has been blocked; the content must be served over HTTPS.

A web search for “This request has been blocked; the content must be served over HTTPS." returned a related StackOverflow answer that added some additional context.

A search of the Hugo project files for “http:" revealed that the project’s config.toml file had “baseURL” set to “http://loopedline.com/".

The Solution

Updating “baseURL” to “https://loopedline.com/" resolved the issue.