Hugo and Netlify CSS not loading

Recently deployed a static Hugo site using the continuous deployment service  Netlify. Netlify is like Heroku but for static websites. It allows developers to deploy static websites via Git repositories and offers Custom domain name and SSL options for free (at the time of this writing).

After constructing a website using Hugo (Go static site generator) and connecting to Netlify, the website was deployed with no problems. But after navigating to the Netlify's generated URL the styles and fancy JavaScript were no where to be found. Bummer.

After tinkering a little the Chrome inspector revealed that my vendor JS and CSS were not loading.

The issue was config.toml. Specifically I set the baseURL to the domain name that I had not yet connected to Netlify and so the webpage was trying to load the stylesheets and scripts from the wrong location.

My <head> section was set up to load the plugins from the configuration URLs.

<head>
  {{ "<!-- plugins -->" | safeHTML }}
  {{ range .Site.Params.plugins.css }}
  <link rel="stylesheet" href="{{ .URL | absURL }} ">
  {{ end }}
</head>
<head> section of index.html
# -- snipped -- 
baseURL = "https://mydomainname.com" 
# -- snipped -- 
config.toml before

The fix itself is trivial, you can just set the config.toml base url value to / and redeploy.

# -- snipped -- 
baseURL = "/" 
# -- snipped -- 
config.toml after

Things are pretty once again. Have fun!