Hugo site with Github repo. CSS doesn't load until a link is clicked

Support
, ,
1

I have a (very barren) site deployed at compassionate-feynman-1e69e9.netlify.app.

If you click the link, it will display the index page without CSS applied. A click on a page link, either the one page or the link back to root, will append main-- to the front of the address and css will be loaded properly. Also a direct link to main--compassionate-feynman-1e69e9.netlify.app will display properly. BTW, main is my deploy branch.

I had another netlify deploy that was acting this way until I changed over to a custom domain and added netlify.toml to the root. The netlify.toml was essentially a copy of https://github.com/gohugoio/hugo/blob/master/docs/netlify.toml with updates to the hugo version that I am running. Adding this same file to compassionate-feynman-1e69e9.netlify.app failed the deploy.

Thanks, Zak

Github repo is public if that helps. https://github.com/zjeaton/hugo-demo-site

2

Try changing the following:

  1. In your layouts/partials/head.html, change all .Permalink to .RelPermalink and absURL to relURL.
  2. In your config.toml, change theme = "github.com/adityatelange/hugo-PaperMod" to:
[module]
  [[module.imports]]
    path = "github.com/adityatelange/hugo-PaperMod"
  1. Add a netlify.toml to the root of the repo with the following code:
[build]
	base = "/"
	command = "hugo"
	context = "production"
	publish = "public"

[build.processing]
	skip_processing = true

[context.production.environment]
	HUGO_VERSION = "0.78.1"
	HUGO_ENV = "production"
  1. Delete the theme folder from your repo.

This worked for me while testing your code.

Check here: https://vigilant-hugle-2f5f63.netlify.app/ and https://github.com/Hrishikesh-K/hugo-demo-site-main

1 Like
3

@hrishikesh Wow, what a great answer!

1 Like
4

Wow, that’s brilliant. Works perfectly. I really appreciate your help! I’ve still got a lot to learn. :slight_smile:

1 Like