---
title: 'Trouble Hosting Hugo with Nginx'
date: 2023-09-20T11:33:22-04:00
draft: false
tags: ["git", "backups", "commandline"]
author: "Me"
showToc: true
TocOpen: false
draft: false
hidemeta: false
description: "Learn one way to push your git changes to multiple remote repositories."
disableHLJS: false # to disable highlightjs
disableShare: false
disableHLJS: false
hideSummary: false
searchHidden: true
ShowReadingTime: true
ShowBreadCrumbs: true
ShowPostNavLinks: true
ShowWordCount: true
ShowRssButtonInSectionTermList: true
UseHugoToc: true
cover:
    image: "hugo-nginx-trouble.png"
    alt: "Hugo Logo, Nginx Logo, Tired Face emoji"
    caption: "Hosting Hugo on a self-hosted nginx server brought some troubles!"
    relative: false # when using page bundles set this to true
#    hidden: true # only hide on current single page
---

## 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]({{< ref "posts/npm_to_nginx_tutorial.md" >}}) 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 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](https://gideonwolfe.com/posts/sysadmin/hugonginx/).

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](https://newbs.rocks/posts/hugo-setup/) 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]({{<ref "hosting_hugo_troubles.md#nginx-config">}}), I was able to add back in the [Authelia](https://www.authelia.com/) 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](https://discourse.gohugo.io/search?expanded=true&q=mime%20type), 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 {#nginx-config}

```config
# ------------------------------------------------------------
# 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;
    }
}
```

### Blogs and Sites

* [Gideon Wolfe - Deploying a static Hugo site with NGINX](https://gideonwolfe.com/posts/sysadmin/hugonginx/)
* [Pvera - Deploying a simple static website using Nginx and Hugo](https://pvera.net/posts/create-site-nginx-hugo/)
* [Hugo Support thread on Discourse](https://discourse.gohugo.io/t/help-deploying-with-nginx/12609)
* [BravosLab - Static website with Hugo and Nginx](https://bravoslab.com/post/static-website-wirh-hugo-io-and-ngnix/)
* [Cavelab - Hugo Build deploy to Nginx](https://blog.cavelab.dev/2021/02/hugo-build-deploy-to-nginx/)
* [River - Serving Hugo from a non-root location with Nginx](https://river.me/blog/hugo-non-root-location/)