Config settings for deployment

support
1

Hello guys,

  1. my website looks very well on localhost:1313, but when I generate .html - all links to .css, .js, images and bg images - are all wrong!
  2. My Home (home = “Home”) link does not ponit to index.html. It holds the address of the last called page. How to fix it?
    Just don’t tell me to read the docs - I’m reading as much as I can. Still no clarity on how the links are formed.
2

Hello,

Can you link the repository ? Maybe the config file is incorrect.

3

What command are you calling to ‘generate .html’? (I’m guessing hugo or hugo --minify.)

What is the value of baseURL in your config file?

4

I use just “hugo” to generate the html - without --minify.

baseURL = “/”.

I have some images, like “img/image1.jpg”, referenced from config.toml and from data/data.yml

The problem is, links produce different results - with or without a dot, like:

{{.Site.Params.slider.bgImage | absURL}} produces links without a dot "/img/image1.jpg"
{{ $data.about.image1 | absURL }} produces links with a dot "./img/image1.jpg"

Where and what regulates the use of that dot? How I can get same type of links not depending on where the variable is referenced from?

What is the best value to have in baseURL for hosting on Apache? May be it should not be used at all?
Some people say better avoid it (https://github.com/Phlow/feeling-responsive/issues/47)

I will upload the code to the repository later.

5

The dot in "./img/image1.jpg" means the current directory…so yes there’s a big difference between /img and ./img.

From your post - the first line looks good, but the second line is strange. What is $data?

And it may help your troubleshooting to inspect the code which is produced by running hugo server - by using the developer tools in your web browser.

6

What actually surprises me is the fact that Hugo uses one set of rules for rendering data in localhost:1313 and a different set of rules for rendering data in generated html. Everything works in localhost:1313 and nothing works in html generated for deployment.

$data references values from /data/files.yml

In my case, with baseURL="/", links “./img” work fine, while links “/img” show nothing.

This is a task with too many unknowns. May be I should use something else in baseURL="" or instead of baseURL. Hugo behaves in an unpredictable way. So far I can’t find a correct starting point.

Did you deploy a hugo website? Did you use baseURL or no?
If you used baseURL - what was the hosting webserver?
What value did you use in baseURL?
If you didn’t use baseURL - what did you use with what value?

7

It’s not so much that running the development server uses different rules, but that it overrides the baseURL value to be localhost:1313.

What is the url you’re deploying to?

I reckon you’d have more success of you set the baseURL value to something other than /.

Another thing you could try is using the relURL function rather than absURL-especially if you don’t know the url you’ll be serving the site from.

8

Looks like the Best Practices of using baseURL is not yet established.
Some very knowledgeable people recommend using baseURL="" for dev, baseURL=“https://test.domain.tld” for test, baseURL=“https://domain.tld” for prod.
Others recommend baseURL="/".
I will assume the first option and proceed to both destinations from there.
But first I’d also like to test it on my local apache (or nginx) webserver at /var/www/html/domainname - what baseURL do you think I should use for this build?

If I build it for my apache localhost with the baseURL="" - the index page works fine, but other pages look like they have no access to .css and .js files. While the source code of the link is <link rel="stylesheet" href="css/bootstrap.min.css" />, the actual called address is different - http://localhost/optimiware/contact/css/bootstrap.min.css - see the picture. contact_path
Do you understand what’s going on?

9

@vistad this is straightforward: the baseURL should be what your web server expects it to be. In Apache that is set in config/virtualhost config. So you set the localhost domain, though it is probably something like localhost. It will be different for each install of Apache, and that is info you can find in their support channels.

The “best practice” is to use the built-in development server in Hugo, and then set the baseURL for the production site.

10

It’s common and best practice is to have a development server, a test server and a production server. This setup is an especially must-have thing with an SSG like Hugo.

I have a LAMP stack installed on my computer without any virtualhosts. I am the support channel of my local apache web server which is indeed “localhost”.

But if I use baseURL=“localhost”, the index page is fine, but the rest of the pages are not working.

11

Are you running your website from a subdirectory? Try setting baseURL = "localhost/optimiware/".

It’s worth doing some reading on how web browsers interpret relative and absolute urls (a quick google found this article - I’m sure there’s better ones out there).

I think problems come when baseURL is set to either "/" or "" and the site is deployed to a subdirectory of a url (i.e. https://example.com/hugosite/). I think either set baseURL to what your web server expects it to be (quoting @maiki) or make sure you only ever use the various relative URL and permalink functions in your templates.

2 Likes
12

I have finally found settings that let me run my website on my local testing (LAMP) webserver, on a remote testing server and on a production server. Just copy the address of your webroot from your browser address field and put it into baseURL. Trailing slash is important!

#testing localhost
baseURL = “http://localhost/webroot/”
#testing remote:
baseURL = “https://www.testing.webroot.com/”
#production:
baseURL = “https://www.webroot.com/”
#development:
any of those will work - Hugo disregards them anyway.

relativeURLs = false

Hope that helps.

3 Likes