How to use with a reverse proxy?

support
1

I am trying to use an nginx reverse proxy to redirect traffic from port 80 to my hugo server on port 4980. The nginx redirect is working properly (I am getting a site title and other services like gitbucket are working when tested), but the css does not load properly from my hugo server and the page just hangs. The command I am running is:

hugo server --bind="localhost" --port=4980 --baseUrl="www.kyleathompson.net" --theme=greyshade --buildDrafts

And I think the problem is that the webpage is being served by nginx on port 80, but the css etc. is coming from port 4980. If I just connect directly with the ip/port instead of using a URL with the redirect the page loads okay. Furthermore if just run:

hugo server --theme=greyshade --buildDrafts

The server tries to serve on http://127.0.0.1:1313/ which obviously won’t work for serving to the web. If I try to bind to port 80 it says it is already being used, when the OS clearly reports that it is not (assuming that nginx is disabled of course) which is why I tried the reverse proxy in the first place. This is really driving me nuts. Is there any way to make Hugo work properly with a reverse proxy?

2

there’s a whole bunch of settings that would need to be made in nginx to get it to reverse proxy, namely in /etc/nginx/conf.d/mysite.com.conf.

My opinion? If some things are, and some are not getting proxied, I’d look at the ngnix settings first, or, set it to proxy an apache-hosted site to prove it’s ngnix or not.

Perhaps you have, though.

3

Another comment: if the system says port 80 is in use, it probably is. Thinking aloud: what command did you use to confirm that, and was the context of the command “root” rather than “user”?

4

Thank you for your reply. sudo fuser 80/tcp reports nothing when Nginx isn’t running, but does report something when it is. Therefore I think it’s reasonable to assume that the issue there is with Hugo.

As I said (Perhaps not very well) above, I was able to do the reverse proxy with my Gitbucket instance running on port 8080. I had no problems with that at all. The problem (I believe) is with the way that Hugo generates the paths it uses. For example Gitbucket links to assets like this:

<link href="/assets/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">

Whereas Hugo generates links like this:

 <link rel="stylesheet" href="http://www.kyleathompson.net:1313//css/redlounge.css">

I think these absolute paths do not work with Ngnix’s reverse proxy because the page is being served from port 80, not port 1313.

5

Yes, ok, that is possible.
But why not just generate without the full uri, then?

6

Because for some reason it defaults to generating a URI based on a LAN IP:

hugo server --theme=greyshade --buildDrafts wiegraf@li704-200 ERROR: 2015/06/10 Site's .BaseUrl is deprecated and will be removed in Hugo 0.15. Use .BaseURL instead. 2 of 2 drafts rendered 0 future content 2 pages created 1 paginator pages created 0 tags created 0 categories created in 29 ms Serving pages from /home/wiegraf/Sync/Hugo/public Web Server is available at http://127.0.0.1:1313/ Press Ctrl+C to stop

Taking a look at index.html:

<link href="http://localhost:1313//css/screen.css" media="screen, projection" rel="stylesheet" type="text/css">

7

What’s your template look like, for that css load line?

8

Sorry what do you mean by template? Are you referring to the file/directory structure or the theme?

9

I see mention of the redlounge theme. You can copy its index.html template into the same place in your site structure (i.e. /layouts/index.html), and edit just that line or whatever lines are specifying that, to override the theme. Seems like it might be specifying {{ .Permalink }} perhaps.

10

I found this section int the redlounge layouts/index.html

<div class="read-more-link"> <a href="{{ .RelPermalink }}"><span class="read-more-slashes">//</span>Read More...</a> </div>

Would it be better to just wipe the Hugo directory and start with a theme with more suitable formatting? Do you have any suggestions on a theme that would be suitable?

11

In this case Hugo does an if err != nil log.ERROR("Port in use") That is the most likely explanation, but there could be others.

12

The Css should be getting loaded in the head so look for the line in partial templates such as header.html or head.html.

13

@wiegraffolles use --appendPort=false flag in your original command. That should solve you problem. relevent docs

hugo server --port=4980 --baseUrl="www.kyleathompson.net" --appendPort=false --theme=greyshade --buildDrafts

Run nginx on port 80, reverse proxy hugo to port 4980. It should work.

3 Likes
14

Thank you I will try this as soon as I can.

15

I apologize for the very late reply but I wanted to confirm that this resolved the problem. Thank you so much for your help!

1 Like