Issue with Nginx serving Hugo static files with proper theme

support
1

I’m facing an issue where the site loads fine with the hugo server command, but when served through Nginx with static files, the theme doesn’t load correctly.

nginx Configuration (Hugo Server)):

http {
    server {
        listen 80;
        server_name localhost;
    
        location / {
            proxy_pass http://localhost:1313; 
        }
    }
}

nginx Configuration (Static files):

http {
    server {
        listen 80;
        server_name localhost;
        root /Users/pramodchoudhari/personal_projects/my_blog/promode_me/public/;
        index index.html;
    }
}

Hugo Command for Public Directory Generation:
hugo --theme hugo-PaperMod

Hugo Server Command:
hugo server -D

I would appreciate any guidance or suggestions to resolve this issue. Thank you in advance for your help!

Screenshot 2023-12-02 at 7.35.31 PM
Screenshot 2023-12-02 at 7.35.31 PM1658×835 36.1 KB

2

What’s the values of baseURL and relativeURLs in the config file?

3

baseURL: "localhost:1313"

I have not set anything for relativeURLs, what is the recommended value?

4

Screenshot 2023-12-02 at 8.12.29 PM
Screenshot 2023-12-02 at 8.12.29 PM1046×389 54.3 KB

There are no errors in network or console log too

5

BaseURL should be an absolute url, see, Configure Hugo | Hugo
Maybe you could try baseURL: "http://localhost/".
I don’t know why you add the port here.

The default value of relativeURLs is False. It should be OK.

6

The hugo server command is only for development.

In production you let Nginx, or any other web server, serve the generated “public” directory.

When you have new or updated content you regenerate the “public” directory.

7

I had deleted the public dir and had recreated it multiple times using the command mentioned in the topic above, but no luck.

8

If you have a baseURL set for port 1313, how would the references to localhost:1313 be solved in a site served from port 80?

You could’ve, BTW, just opened the developer tools of your browser and checked their error messages. That would’ve told you which files the browser couldn’t find and where it was looking for them.

Using nginx as a proxy for a running hugo server seems to be a bit contrived – what’s the point of nginx in that context, except to create confusion?

9

But you do not need the proxy_pass or the hugo server parts at all in production. Hugo does not need to be installed at all on the server.

Hugo outputs all the html, css and js to the “public” directory. That is all you need to upload to the server.

Make sure “baseURL” is set to the actual domain of the production site, something like “https://www.example.com/”. The same domain is then set as “server_name” in Nginx conf.

The Nginx conf is something like this (but you really should use SSL/TLS in production).

server {
  listen 80;

  server_name www.example.com;
  root /Users/pramodchoudhari/personal_projects/my_blog/promode_me/public;
  index index.html

  location / {
    try_files $uri $uri/ /index.html;
  }
}
10

Yes, I will be using public dir on my prod setup with SSL/TLS enabled.

But on local not sure why its not loading properly
Here is the link to repo
Steps to reproduce:

git clone https://github.com/promode1414/promode_me.git
cd promode_me
git clone https://github.com/nanxiaobei/hugo-paper.git themes/hugo-paper
hugo --theme hugo-PaperMod
brew install nginx
# edit the nginx as per the topic mentioned 
nginx -t
nginx
# open localhost in the browser

Would appreciate any help or guidance to resolve this issue, as it is the final step in publishing my blog.

11

Why are you using Nginx in your local setup? What problem are you trying to solve with this complicated setup?

Normally you run hugo server and then open up “http://localhost:1313/” in your browser, done.

12

Set your base URL to the public URL (https://example.com). Always. Hugo server will do The Right Thing. Do not use localhost:1313 as you base URL.

13

I wanted to check on local if its working fine,
If it does then i will be deploying it to my production setup.

14

Then just create the public/ directory by running hugo (not as server) and set nginx to serve that directory. Do not set your BaseURL to anything other but your production URL.
Using a localhost base URL guarantees that it will not work in deployment. Although you’re seeing that “it’s working fine” locally.

Just drop the idea of having nginx serve what hugo server serves anyway, i.e. localhost:1313.

1 Like