How to define links if I don't know BaseUrl in advance?

support
1

Hello,

I cannot know in advance what the BaseUrl will be.
I know urlpath on which blog will be hosted, for example /blog
I use i18n, so for example I have 2 html that located in /blog/en/index.html and /blog/fr/index.html
Static files are shared between en in fr versions, and for example have path like this /blog/css/style.css

How I should define link to css or images in index.html, so the final url in index.html to css will looks like this ../css/style.css or like this /blog/css/style.css

I tried to do the next things:
define in config file baseURL: "/blog"
define url in this way {{.Site.BaseURL}}/css/styles.css final url will be equal /blog/css/styles.css/
But when I try to start hugo server it generate url like this
Web Server is available at //localhost:1313///blog/ (bind address 127.0.0.1)
And this url does not work.

2

Juste have a look here: Configure Hugo | Hugo

baseURL

Hostname (and path) to the root, e.g. http://bep.is/

Your baseURL is a “path only” one :frowning:

3

I’m trying to imagine why this is. Is it the case you are handing a rendered site over to someone?

I mean, say I have an idea for a site before the domain, I just start developing, and if I put it online I use a staging URL, but when I get ready to host I will set the baseURL as needed.

Now, if I were distributing a package of HTML (though probably not /blog), I’d create templates that didn’t reference the baseURL. But that means tracking down each instance of how it is referenced and ensuring the paths do what you want.

I know that last paragraph sounds obvious, but I want to point out that all the URLs pointing to resources in the head are created by the templates, not the configuration exactly. Remove {{.SiteBaseURL}} from the template, since you don’t know what that is.

4

I’m trying to imagine why this is. Is it the case you are handing a rendered site over to someone?

More like, build/render site once and then upload result to different host/domains.

Remove {{.SiteBaseURL}} from the template, since you don’t know what that is.

Thank you for that, don’t know why I didn’t think of it before, I tried it before but I did not change urls in template
Now I removed {{.SiteBaseURL}} from template and changed url to css from like this /css/style.css to ../css/style.css.

5

Since you’re building the site for multiple hosts, you can pass a different baseURL to each build:

hugo --baseURL "https://example.com"

Also, instead of using:

{{.Site.BaseURL}}/css/styles.css

A better way (in my opinion) is to do this, and then your baseURL is automatically inserted:

{{ "/css/styles.css" | absURL }}
1 Like
6

More than opinion, the absURL way is the right way; that way you don’t have to worry if your set BaseURL is ending in / or not.

1 Like
7

Thank you for suggestion, but I don’t want to do multiple builds.

And using absURL I have the next results
With configure baseURL = “/blog”

{{ "/css/styles.css" | absURL }} -> /css/styles.css
{{ "css/styles.css" | absURL }} -> /blog/css/styles.css

but hugo server command witll try to run server with next url
Web Server is available at //localhost:1313///blog/ (bind address 127.0.0.1).
This url is not working.

8

This is likely because you don’t have a baseURL set in your config file, or you haven’t passed one through CLI