Layout Broken on Netlify

[qgiguiere]

When running a local server on my machine the site looks fine, but when I deploy it to my domain using Netlify, the layout is completely messed up. I've tried troubleshooting it for a while but can't figure out what the issue is. I am using the build command provided in the docs on Netlify and nothing is different in the code between my machine and what I have pushed to Netlify. I looked through the deploy logs on Netlify and there are no errors. I am using Hugo version 0.111.3 in both locations.

[cryptobandteam]

Could you please share your build settings from netlify? I can't even deploy the site because deploy is failing

[liamtill]

I have the same issue. Site looks fine locally when using hugo server --buildDrafts and just spent the last 2 hours trying to deploy to Github Pages (not rendering correctly), Cloudflare Pages (fails to build; toc.html line74 extra white space with - character) and Netlify which build with no issue but again does not render correctly. Seems like the CSS?

Also when testing locally with: npm i && HUGO_ENVIRONMENT=production hugo --gc the site renders the same as it does on Netlify. I don't know why it works with hugo server?

See screenshot from Netlify build that is similar to the OP.

Netlify logs attached.
netlify_build_log.txt

Local Hugo version: hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1

Followed guide and also tried a few other things with no luck.

Any idea how to fix this?

Thanks

[janvanveldhuizen]

Has this already been solved? I am not using Netlify, but I have the same layout issue. Local server works fine, but after deployment the blog and tags pages looks exactly like the screen in this issue.

[liamtill]

Has this already been solved? I am not using Netlify, but I have the same layout issue. Local server works fine, but after deployment the blog and tags pages looks exactly like the screen in this issue.

Not for me. I did some digging and think I know what the issue is but switched theme in the end. I did have the same issue with the theme I use now, after finding the same thing. I think it's because when we test locally the baseURL parameter is not used. After using Firefox developer tools I could see that when the site is deployed this URL is used for linking stylesheets plus other things. So, I think if you try changing the baseURL in your config to that of where your site is deployed (Netlify URL, Vercel URL, or a custom domain) then the absolute path to the stylesheet should work.

When I deployed I could see that the code was looking for the style sheet at baseURL which I had not set to the correct Netlify URL.

Note that I have not tested this and only based on what I think the solution is and that by using the correct baseURL on a deployment with another theme it sorted the styling.

[janvanveldhuizen]

Thank you for this extensive reply.
I will dig into it further.
I discovered two things already:

1. When I set the baseUrl to "" and set relativeurl to true, then the style works better, but it is not 100% correct for all links
2. When I add slashed to the blog and tags url in the menu definition, that helps as well, but the language switcher still loses the style

Besides that, even when the style works correct, the links seem to lose the protocol switching to http instead of https. This last thing might be a setting at my providers system, but I am not sure. Only this website has this behaviour.

I will keep investigating this. I'll keep you posted.

[janvanveldhuizen]

Okay... I know proved it is the theme, or Hugo.
It also happens to the example site.
See: https://test.janware.nl
Source: https://gitlab.com/janware/janware.nl

[janvanveldhuizen]

I finally cracked it!!

In the header partial you have to add a slash after the language links.

See lines 47 and 65 in https://gitlab.com/janware/papasmurf.nl/-/blob/main/layouts/partials/header.html

Besides that, in the config.toml,make sure to end all menu urls with a slash.

That's it!

My site works: papasmurf.nl

Refer to my gitlab source to see the details

[liamtill]

papasmurf.nl

Hey, Great! Glad you have cracked it and all working now.

Hopefully anyone else with the same issue can get it working using this thread.

[jmflaherty]

Thanks, guys! Just found the theme and had the same issue. So, to summarize:

1. Make sure that your baseUrl="https://your-site.com" in your config.toml exactly matches the URL of where you will deploy your site.
2. Copy the ./themes/blist-hugo-theme/layouts folder into your own site's ./layouts folder. At least, that is what I did to be able to customize things.
3. In your ./layouts/partials/header.html file, replace
   line 47 with:

          <a class="px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700" href="/{{ .Lang }}/" lang="{{ .Lang }}">{{ default .Lang .LanguageName }}</a>

   and 65 with:

        <a href="/{{ .Lang }}/" lang="{{ .Lang }}">{{ default .Lang .LanguageName }}</a>

4. Commit, push, serve, and enjoy!

@apvarun, this might be worth a fix, right?

[apvarun]

@jmflaherty definitely! I believe the change should only be the trailing slash right? and not the styles/classnames.
Can you send a PR ?