Intro
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.
Errors
Console Errors:
- Incorrect MIME type –>
css
files being set astext/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
andalias
between myserver
andlocation
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.
Solution
In the end, newbs.rocks 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.
Resources
Working Nginx Config File
# ------------------------------------------------------------
# selfhosted.rsmsn.co
# ------------------------------------------------------------
server {
listen 80;
listen [::]:80;
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name selfhosted.rsmsn.co;
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;
}
}