For the last 3 days, I have been spending a few hours after working trying to figure out why my brand new Hugo site was not loading correctly on my sub-domain. For context, I use Nginx to host all my apps and servers, most of them using reverse proxy protocols such as $proxy_host, $forward_scheme, and $port. There are a few more and I’m happy to share some reverse proxy nginx config files. See my post on moving from NPM to Nginx for more information.

Once I got the basic idea of this blog up and running, I ran hugo and then used scp to send the files to my nginx host’s public folder. Despite index.html and all the CSS files being in the right spots, I kept getting a few repetitive errors from nginx - either in my browser’s console or in nginx’s log files. I swore I read through every StackOverflow or personal blog post I could find. In fact, the next day, I would sit back down after work to debug and I would continue to find the same sites and posts I found the day before! It was getting frustrating.

Wouldn’t you know… it was one of the simplest solutions that got it all working. Here’s a breakdown of what I was seeing and my hypothesis.


Console Errors:

  • Incorrect MIME type –> css files being set as text/html type.
  • 500/502 Errors when trying to load javascript files
  • 500 Errors when trying to load child pages.

Nginx Log Errors for this server:

  • [error] 1147432#1147432: *84013 invalid URL prefix in "://:/favicon-16x16.png"
  • [warn] 1147432#1147432: *84013 using uninitialized "port" variable

Nginx error.log errors:

  • [error] 1118832#1118832: *77105 directory index of "/var/www/html/" is forbidden

I thought I had tried everything, but it was a rip and replace from a single blog post that solved it for me. Some of the things I tried include the following. _Note: when I mention ’nginx config file’ below, I am referring to the specific file for this subdomain. I have a single global nginx.conf and then individual files for each subdomain/proxy host.

  • Editing index.html to ensure that any referenced file had an explicit mime type associated with it.
  • Included include { full path }/mime.types in the specific nginx config file.
  • Included specific location ~ \.(css|js)$ { sections in my nginx config file.
  • Tried assigning the $forward_scheme, $host, and $port variables (similar to a reverse proxy host).
  • Removing any SSL references <– This caused similar behavior but different errors! I thought I was making progress…🫥
  • Switched out the variables of root and alias between my server and location blocks.
  • Started with something super simple, such as the suggestions from Gideon Wolfe’s Block.

If you clicked on the link I just shared, you’ll see that Gideon’s setup is quite similar to the one that I finally got to work. My thought there is that my errors were less about the nginx config setup from within the file, and instead it’s very possible that I set incorrect directory permissions after transferring all the public files to the web server. Gideon’s blog was the very first I clicked on, so I owe them my thanks since their site was the entry point to figuring all this out! You can find a list of all the blogs I stumbled upon in this weird and fluctuating journey of doing something as simple as sharing my static files on an nginx web server.


In the end, blog post on setting up Hugo with nginx provided me a config example that worked for my setup. I think part of what happened was that as I was cycling through all the blog posts and StackOverflow posts, I would remove one or two lines (usually the one or two I changed from the previous post’s recommendations) but in doing that, was making more of a mess for myself, burying the error even more deeply. By replacing everything, I’ve brought it back to a manageable place.

You’ll also notice in my final config file, I was able to add back in the Authelia snippets, paths for the SSL certs, and a few other items that connect nginx to the rest of my infrastructure.

If you’ve stumbled upon this, I hope it helps you figure out your Hugo/Nginx issues! I definitely saw a lot of people posting in Hugo’s Discourse asking about mime type errors, so it is very likely that whatever you’re facing isn’t isolated to just you.

Now that I have this up and running, I need to write (and post!) a script that will pull from my repo, change directory ownership, and reload nginx.


Working Nginx Config File

# ------------------------------------------------------------
# ------------------------------------------------------------

server {
    listen 80;
    listen [::]:80;

    listen 443 ssl http2;
    listen [::]:443 ssl http2;


    root /var/www/html/public/;
    index /index.html;

    # Force SSL
    include conf.d/include/force-ssl.conf;

    # Custom SSL
    ssl_certificate custom_ssl/npm-3/fullchain.pem;
    ssl_certificate_key custom_ssl/npm-3/privkey.pem;

    access_log /var/log/nginx/blog.log combined;
    error_log /var/log/nginx/blog_error.log warn;

    include snippets/authelia-location.conf;

    location / {
        try_files $uri $uri/ =404;
        include snippets/authelia-authrequest.conf;

Blogs and Sites