HUGO: was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

Question

I'm currently trying to deploy a HUGO site to Netlify but I have been unable to. I get the following error:

The resource from “https://cdn.jsdelivr.net/gh/theasteve/blog/[email protected]/public/assets/main.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).

Not sure why Netlify is returning HTML instead of the JavaScript file. Both files are there when I check prism.js file and the main.js file.

The error is shown coming from the About page, even after removing the script tags I still get a page without any styles being added.

<footer class="footer">
  <div class="footer__inner">
    {{ if $.Site.Copyright }}
      <div class="copyright copyright--user">{{ $.Site.Copyright | safeHTML }}</div>
    {{else}}
      {{ partial "logo.html" . }}
      <div class="copyright">
        <span>© {{ now.Year }} Powered by <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a></span>
        <span>Theme created by <a href="https://twitter.com/panr" target="_blank" rel="noopener">panr</a></span>
      </div>
    {{end}}
  </div>
</footer>

<script  src="https://cdn.rawgit.com/theasteve/blog/master/public/assets/main.js"></script>
<script  src="https://cdn.rawgit.com/theasteve/blog/master/public/assets/prism.js"></script>
<!-- <script src="{{ "assets/prism.js" | absURL }}"></script> -->

Here is my config.toml

# baseurl = "https://theasteve.github.io/"
languageCode = "en-us"
theme = "hello-friend"
paginate = 5

[params]
  # dir name of your blog content (default is `content/posts`)
  contentTypeName = "posts"
  # "light" or "dark"
  defaultTheme = "light"
  # if you set this to 0, only submenu trigger will be visible
  showMenuItems = 2
  # Show reading time in minutes for posts
  showReadingTime = false

[languages]
  [languages.en]
    title = "theAsteve"
    subtitle = "Lets get it"
    keywords = ""
    copyright = ""
    menuMore = "Show more"
    writtenBy = "Written by"
    readMore = "Read more"
    readOtherPosts = "Read other posts"
    newerPosts = "Newer posts"
    olderPosts = "Older posts"
    minuteReadingTime = "min read"
    dateFormatSingle = "2006-01-02"
    dateFormatList = "2006-01-02"

    [languages.en.params.logo]
      logoText = "theAsteve"
      logoHomeLink = "/"
    # or

    # path = "/img/your-example-logo.svg"
    alt = "theAsteve"

    [languages.en.menu]
      [[languages.en.menu.main]]
        identifier = "about"
        name = "About"
        url = "/about"

I commented out the baseurl because nothing was being shown when deploying to Netlify. Here, is my Netlify.toml

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.69.2"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.69.2"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.69.2"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.69.2"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

Why is HTML being returned ? Why are the assets not compiling?

Answer 1

Found a solution. It is because hugo trys to load the css/js files from another URL i.e. if you are on mydomain.com/en/ hugo trys to import mydomain.com/css/mycss.css but it has to be mydomain.com/en/css/mycss.css

So to perfom this you need to replace the static import in your baseof.html with:

<link rel="stylesheet" href='{{ "css/materialize.css" | absLangURL }}'>

You have to do that with all your href and src keywords. Hope I could help :D

Answer 2

I experienced this issue deploying to gitlab from local windows machine. I resolved this issue using recommended solution from Mad Mike: Commenting out the BaseURL line in config.toml and using relativeURLS in the config. See config.toml snippet below...

#baseURL = "/"
relativeURLs = true