Hugo Theme CSS is not rendering

[puzant]

• I've added the Hermit theme to use in my Hugo website, and started developing & adding content, evrything was working perfect in development mode(when I was running the hugo server hugo server -D) but when run hugo command to build & deploy my site, only the ugly HTML was showing on my website

• like this
  

• but when running the server the website looks great
  

Config.toml

baseURL = "https://npoladian.com/"
languageCode = "en-us"
defaultContentLanguage = "en"
title = "Hi, I’m Nazar Poladian"
theme = "hermit"
# enableGitInfo = true
pygmentsCodefences  = true
pygmentsUseClasses  = true
# hasCJKLanguage = true  # If Chinese/Japanese/Korean is your main content language, enable this to make wordCount works right.
rssLimit = 10  # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
enableEmoji = true  # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
# googleAnalytics = "UA-123-45"
# disqusShortname = "yourdiscussshortname"

[author]
  name = "Nazar Poladian"

[blackfriday]
  # hrefTargetBlank = true
  # noreferrerLinks = true
  # nofollowLinks = true

[taxonomies]
  tag = "tags"
  # Categories are disabled by default.

[params]
  dateform        = "Jan 2, 2006"
  dateformShort   = "Jan 2"
  dateformNum     = "2006-01-02"
  dateformNumTime = "2006-01-02 15:04 -0700"

  # Metadata mostly used in document's head
  # description = ""
  # images = [""]
  themeColor = "#494f5c"

  homeSubtitle = "A Mish-mash of A Management Consultant, Product Strategist And City Builder."
  footerCopyright = ' &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0  </a>'
  # bgImg = ""  # Homepage background-image URL

  # Prefix of link to the git commit detail page. GitInfo must be enabled.
  # gitUrl = "https://github.com/username/repository/commit/"

  # Toggling this option needs to rebuild SCSS, requires Hugo extended version
  justifyContent = false  # Set "text-align: justify" to `.content`.

  relatedPosts = false  # Add a related content section to all single posts page

  code_copy_button = true # Turn on/off the code-copy-button for code-fields
  
  # Add custom css
  # customCSS = ["css/foo.css", "css/bar.css"]

  # Social Icons
  # Check https://github.com/Track3/hermit#social-icons for more info.
  
  [[params.social]]
    name = "linkedin"
    url = "https://www.linkedin.com/in/npoladian/"

  [[params.social]]
    name = "twitter"
    url = "https://twitter.com/NPoladian"

  [[params.social]]
    name = "email"
    url = "mailto:n.poladian@gmail.com"


[languages]

  [languages.en]

    contentDir= "content/english"

    [[languages.en.menu.main]]
      name = "About"
      url = "/about"
      weight = 1
  
    [[languages.en.menu.main]]
      name = "product strategy and growth"
      url = "/product-strategy-growth"
      weight = 2
  
    [[languages.en.menu.main]]
      name = "city building and tech"
      url = "/city-building-tech"
      weight = 3

    [[languages.en.menu.main]]
      name = "Blog"
      url = "/blog"
      weight = 4


  [languages.ar]

    title="مرحبًا ، أنا نظار بولاديان"
    homeSubtitle="مستشار إداري واستراتيجي للمنتجات الرقمية وريادي اجتماعي."
    contentDir= "content/arabic"

    [[languages.ar.menu.main]]
      name = "من أنا"
      url = "/about"
      weight = 1
    
    [[languages.ar.menu.main]]
      name = "تسويق و بناء منتج رقمي"
      url = "/product-strategy-growth"
      weight = 2
    
    [[languages.ar.menu.main]]
      name = " المدن الذكية ،تِك والريادة الاجتماعية"
      url = "/product-strategy-growth"
      weight = 3

    [[languages.ar.menu.main]]
      name = "كتابات"
      url = "/blog"
      weight = 4

I've made my site multilingual so I don't know if that can introduce these breaking changes

• & the pages paths are always redirecting to 404 not found

• I'm really frustrated, I've tried everything & read the docs three times but still no fix whatsoever, any help would be appreciated

[faustind]

It's probably because your website is not served from the baseURL in your config.toml.
see https://discourse.gohugo.io/t/theme-not-working-on-netlify/11849

[puzant]

I have a baseUrl set in my config.toml but still no luck they only way was this to work was to build the files and go change the public/index.html by removing the baseURL from my the CSS & JS imports there

[jamesalangibson]

What happens when you refresh your browser after seeing the theme is not displayed? I have had the same experience described above. I haven't done the verification on this yet, but I suspect it is due to the site rendering before the css is fully downloaded - which is why it would work on reload and work on a local server but not when hosted remotely and on your first visit to the site. You can also click on one of your links to another page and you may find that the theme is being rendered, as I do.

[puzant]

it stays as it is after refreshing, even if I click on some of the links the styles still do not show, however one thing I noticed that when running the hugo command and checking the final generated index.html and the other files, there's was crossorigin="anonymous" on each of my imports, on the styles & JS imports, once I removed them the styles were back on display and with JS functionality

[Deleted user]

I encountered some problems similar to this and have worked my way through one of them. I thought I would document it here in case anyone encounters this in the future.

I had a similar (but I believe different) problem than the OP in terms of rendering not working. My home page was not rendering properly but when I navigated back to the home page via links in my page, everything was fine. Here is what I believe the problem was. When I ran "hugo server," Hugo bound to http://localhost:1313. In my browser, however, I was typing http://127.0.0.1:1313. Although localhost is equivalent DNS-wise to 127.0.0.1, they are different URLs but with cross-origin=anonymous, the CORS same-origin attribute was being set (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). When I browsed to http://localhost:1313, everything was fine. Lesson learned!

Now I need to work on the next problem - but I think it's related.

[Deleted user]

I thought I'd post an update on this. The crossorigin matter was at the root of my other error as well. My hosting provider allows me to have both the www subdomain as well as the "naked" domain pointing at the same web site (as in www.example.com and example.com). My Hugo baseURL is defined as www.example.com. When I browsed to https://example.com, the CSS did not render because of the crossorigin configuration while going to www.example.com worked fine. I was able to configure a 301 Redirect on my hosting provider from example.com to www.example.com to solve the problem.

[xxxcrow]

I thought I'd post an update on this. The crossorigin matter was at the root of my other error as well. My hosting provider allows me to have both the www subdomain as well as the "naked" domain pointing at the same web site (as in www.example.com and example.com). My Hugo baseURL is defined as www.example.com. When I browsed to https://example.com, the CSS did not render because of the crossorigin configuration while going to www.example.com worked fine. I was able to configure a 301 Redirect on my hosting provider from example.com to www.example.com to solve the problem.

Choose "www" or "non-www", then you need a dns record to redirect one to the other
And probably close the issue 👍