Hi, I am a new Hugo user. My development setup involves developing on a remote machine and testing it locally. I am able to get Hugo to work in this way, but the absURL function does not written the correct URL.
It returns localhost:1313 instead of my custom baseURL that I setup in hugo.toml
This makes some of the CSS / JS files unavailable and messes up the home URLs.
Only if you use fixed URLs to point to your CSS/JS files. Use relative ones, and everything just works out. The forum is full with posts explaining how to do that. Basically:
set your baseURL in your configuration to your final site (https://my-domain.com)
if you put your CSS, JS, font files in static, refer to them as described here
if you put your CSS, JS, font files in assets, refer to them as described here
There’s absolutely no need to use fully qualified URLs when you load CSS, JS, fonts, images from your site. Hugo will make sure that everything works if you run the server locally or use your site on the domain specified in baseURL.
@irkode
I did try that. The issue is if i use --port=1313 or don’t set one, the final server starts at https://my-domain.com:1313 which is not what I want
@chrillek
I think this is what I will have to do, but these URLs are set inside the theme I am using. So was hoping, I wouldn’t have to change (override) those. But maybe that is the best choice.
@irkode Thats whats boggling me. absURL returns localhost unless i specify a --baseURL when running the server. And even then it adds a port number to it.
If i do, hugo server --baseURL="code.1313.airetreat.co" I get
Web Server is available at //code.1313.airetreat.co:1313/ (bind address 127.0.0.1)
I already have code.1313.airetreat.co pointing to port 1313, so the additional port breaks the links that use absURL call
It would be helpful if you explained in more detail what you’re trying to do. Why are you even setting the baseURL in your development configuration?
According to the documentation
using absURL should not cause a problem in your setting.
What I’d do is drop the development configuration and just let Hugo do what it wants with a hugo server command. That will publish your site at localhost:1313 (unless the port is already taken).
If you copy your public directory to https://vipulvpatil.github.io/my-resume/ and point your browser to that URL, everything should work.
So the root cause here is, I am developing remotely. I ssh into my remote instance and run my hugo dev server there. When I do so in vanilla mode (no additional params or configs) everything runs and I can see the site running at port 1313 on my remote machine. Code Server (code-server Docs: Run VS Code Anywhere | Coder) sets up port forwarding such that code.1313.airetreat.co gets forwared to port 1313 on the instance. I have a DNS setup to take code.1313.airetreat.co to my remote instance. When I test my website, certain links do not work, because they get populated as localhost:1313. This also affects the CSS and JS being loaded by the theme. So I am unable to fully test while developing.
The production version works perfectly fine. The site can be found on github pages at https://vipulvpatil.github.io/my-resume/ with all links working correctly.
I am simply trying to fix and/or improve my dev experience.
your production site is served from a subfolder but your development config not
Change the baseURL to
https://code.1313.airetreat.co/my-resume/
And an estimated guess:
Your public folder on your dev server machine (and it’s copy u serve from if) contain some old files from some tryouts. This sometimes produces strange results.
Hugo does not remove anything there. It just adds and changes files. So I would start a fresh build with an empty folder and also clear the cache.
hugo server --gc --cleanDestinationDir --baseURL --port
The command i run for development is hugo server
Last output line is
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Outside of Hugo, I have setup https://code.1313.airetreat.co/ to point to localhost:1313 on this instance.
Now when I open this in my browser, I see the following problem.
So, you’re on host A and ssh into host B. On host B, you run hugo server. Also on host B, you “set up” https://code.1313.airetreat.co to “point to” localhost:1313.
If that’s the case (and I’m still not sure it is, as you use unfamiliar terms like “outside of Hugo” and “point host C to host B”):
start hugo server with the correct baseurl, which would be https://code.1313.airetreat.co, possibly with the added directory as pointed out by @irkode .
also, provide a bind option to the hugo server command, pointing to the public IP address of host B.
Finally: Accessing a HTTP host via HTTPS is a bit uncommon. And your setup is, in my opinion, overly complicated. If host B has a public IP anyway, why all this “pointing to” stuff? Why not use ssh forwarding (https://www.otorio.com/blog/back-to-basics-guide-to-ssh-tunneling/) if you’re ssh’ing to host B anyway?
@chrillek Your understanding of my setup is correct.
The setup is new and complicated as you rightly pointed out. I am working to iron it out soon, probably do a simpler port forwarding via ssh.
I will try the --bind with --baseURL option you mentioned.
To close the loop. I simplified my overall setup as @chrillek mentioned. Port forwarded my local 1313 to the remote instance and everything worked fine.
