148 lines
7.0 KiB
Markdown
148 lines
7.0 KiB
Markdown
---
|
|
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/)
|