[SOLVED] What should be used for the value of .Site.BaseURL?

I’ve always filled this in with the URL of the site. This always seemed to cause problems from dev to testing to live, and I’d have to change this or base this off an ENV var.

I just thought to try it as “/” and apparently no longer the need for different values of it matter.

Question, why is this a setting? Perhaps I’m not able to see something. This confused me for a while, but perhaps I’m stoned, which I am always anyway.

What do you set your baseurl value to? Site URL? Base it off some ENV variable somehow?

Anyway the “/” works great for the baseurl and the same codebase now works on my local development as well as the netlify testing branch.

4 Likes

I’m not touching the comment on being stoned. However, in short: there are times where you want to use this.

That said, for things like calls to stylesheets, scripts, etc, check out the following:

https://hugodocs.info/functions/relurl
https://hugodocs.info/functions/absurl

This will obviate the need for the following:

1 Like
{{ "mystyle.css" | absURL }} → "http://yoursite.com/hugo/mystyle.css"
{{ "mystyle.css" | relURL }} → "/hugo/mystyle.css"

Both absURL and relURL consider the configured value of baseURL in your site’s config file. Given a baseURL set to “/”

{{ “mystyle.css” | absURL }} → “//hugo/mystyle.css”
{{ “mystyle.css” | relURL }} → “/hugo/mystyle.css”

So this would basically throw off the absURL as I understand.

How do you (in Hugo) move from development, testing, production without having to modify the baseurl every every diff stage of the process?

It seems that when on localhost, I have to set it to localhost. When on testing server, I have to set it to netlify, when on production, to the actual domain name being used.

That’s the issue I’m having. What would you suggest?

Ah, I see the confusion, and maybe we can explain this particular point better in the docs. When I think about it, I don’t know if I even set anything for this value and just leave it an empty string.

As far as local development, do this for me and you’ll see what I mean:

  1. Set baseurl = "" in your config
  2. Add {{.Site.BaseURL}} somewhere in a template

You’ll see that Hugo is smart enough to auto-magically assign //localhost:1313/ as the value. Then I would recommend using the relURL and absURL as I mentioned above since it gives your rendered website a convenient drop-in-anywhere functionality in case you move it outside of the root in the future. HTH.

2 Likes

Right, okay. That makes more sense. I wondered about that. yes. So just include it in the master index.html template (and since all other templates are inherited inside it or included inside it, it should just take effect globally). I think?

Thanks for this! Great explanation.

1 Like

I’m not 100% certain of what you mean, but I think you mean in your base template, in which case, yes, but you can use the relURL and absURL wherever you’d like, including in partials.

That is exactly what I meant. Thank you again, sir.

1 Like

There seems to be a slight issue with this approach:

The opengraph tags for FB (internal tempalte) render as such:

<meta property="og:url" content="/" />

And

Object at URL ‘https://marijuanadaily.net/’ of type ‘website’ is invalid because the given value ‘/’ for property ‘og:url’ could not be parsed as type ‘url’.

^ Error from Facebook Debugger

config.toml 
baseurl = ""

/layouts/index.html
{{.Site.BaseURL}} returns //localhost:1313 (on my machine)
{{.Site.BaseURL}} returns nothing (empty string) (on my server or netflify)`

EDIT: FB dugger also shows this (apparently it somehow fills in og:url by itself even if we outptu “/”):

Based on the raw tags, we constructed the following Open Graph properties
fb:app_id
og:url http://marijuanadaily.net/
og:type
og:title Health & Wellness with Daily Marijuana Use
og:description Healing the mind and body with Marijuana Daily!
og:image https://marijuanadaily.net/img/og.png
op:markup_url

EDIT 2:
works
confit.toml
images = [“https://MarijuanaDaily.net/img/og.png”]

Does not work.
confit.toml
images = ["/img/og.png"]

FB returns an error that the image could not be found, as it requires an absolute url. However in source of internal template, it’s | absUrling it. So that should generate a full url, but it’s not.

EDIT: upon further testing, if baseurl is “”, https://dev.marijuanadaily.net/blog/ (on netlify for example) none of the internal scripts/css loads on the pages. The scripts in my template are being loaded thusly.
`

`

If baseurl="", then hugo renders it so that scripts are now being looked for on /news/js/front.js for example, and that’s a 404, since scripts at are /js/ and /css/ and not /news/js/ etc.

^^ This problem seems specific to Netlify. On localhost, baseurl is “” (blank) and the scripts are loaded fine on all pages. I wonder what is happening.

 {{ with .Site.Params.images }}
    <meta property="og:image" content="{{ index . 0 | absURL }}" >
 {{ end }}

If the value for images array is an element like this: “/img/path/pic.jpg” it’s still rendered as /img/path/pic.jpg instead of site.com/img/path/pic.jpg (remember it’s using absUrl so it should render a full url but it doesn’t).

There seems to be a huge difference in the way baseurl="" is parsed by “hugo serve” vs generating the site and looking at it using another httpd.

When using “hugo serve”, the blank baseurl="" renders as //localhost:1313 and when the site is generated, and put on nginx or apache httpd, baseurl renders as blank (no value, no output), and not “//site.com” (or whatever it maybe). When I’m on localhost, working, I do “hugo serve” and everything works fine. The baseurl="" when echoed out in the template as {{.Site.BaseURL}}, the value is //localhost:1313. Now, I push to netflify or my vps, same soruce… the value for {{.Site.BaseURL}} is an empty string. I would expect it to be //dev.marijuandaily.net (or whatever it is. you said it should automagically fill it in. It does but only on localhost using “hugo serve”). After the site is generated and viewed on another httpd (not hugot’s internal testing httpd), the value for baseurl becomes empty string.

EDIT: The only choice I am left with at this point is to simply use a value for baseurl. Otherwise there doesn’t seem to be any solution at all to this problem. baseurl = “https://PsychedelicsDaily.com/” and baseurl = “https://MarijuanaDaily.NET/” otherwise the sites don’t function correctly.

<meta property="og:image" content="https://MarijuanaDaily.NET/img/og.png" > so the absURL only works if baseurl is present, not blank. If we leave baseurl blank, relURL and absURL don’t render correctly.

This baseurl is giving me so many problems, parts of my site get broken… this is extremely confusing and I’ve been through all the documentation I could find.

EDIT AGAIN!: Just noticed this too, that when baseurl="" in config.toml

ERROR 2017/04/08 17:25:49 No ‘baseURL’ set in configuration or as a flag. Features like page menus will not work without one.

EDIT AGAIN! Jeez! :smiley: <3

Currently, I have had to set the baseurl = "https://MarijuanaDaily.NET/" otherwise the site is broken. Do you think I would have better luck using HUGO_* env variables in my OS?

EDIT AGAIN: Here’s something even more strange: baseurl="" only seems to work on localhost. When deployed on vps or netlify, it breaks the sites.

@rdwatters I’ve added you as a member on both PsychedelicsDaily.com and MarijuanaDaily.net repositories as a developer on the team, so you should have access to the project in case you wish to look at the source and compare, perhaps help me do some testing. I apprecite you, man. Thank you! :smiley:

LAST EDIT: For readability and coherency, as much as I’m capable. Thank you.

absURL, BaseURL etc. are calculated as follows:





According to the source, unless baseurl=“scheme://url.here/” is set, absURL is rendered useless, and that parts of the site don’t get the .Site.BaseURL paramerter they need, thus rendering the site broken in some cases.

For example, if the value of baseurl="", then {{.Site.BaseURL}}js/scripts.js would become “js/scripts.js”, which breaks the site in many places.

If the value of baseurl=“http://site.com/”, then {{.Site.BaseURL}}js/scripts.js would return “http://site.com/js/scripts.js” which is correct.

So, it seems that leaving baseurl="" to a blank value will generate an error in hugo during build: “There is no baseurl value set, menus won’t work something something something”.

So as you can see, we’re back to square 1.

How would you have a different value for baseurl based on the env? testing vs production etc.? As per my OP. Thank you.

@Hash_Borgir I don’t completely remember the context of this conversation, but I do remember thinking that it’s important that you know that you don’t need to set the value of baseurl manually in your config to localhost during local development.

The reason I told you to set the value to an empty string was not because I wanted you to have that be your permanent value but so that you can see that Hugo automatically assigns a value when running the local dev server.

If you are running flags at build time (e.g., hugo --baseURL="https://marijuanadaily.net"), please see the following related Discussion thread:

https://discuss.gohugo.io/t/baseurl-setting-vs-commandline-adding-an-extra/6072/2

Also, check out this issue here:

https://github.com/spf13/hugo/issues/3262

It looks like there is some consistency coming the way of v20 as well, which I hope will reduce the confusion.

Oh, alright, then. I thought you meant that if you set it blank, it defaults to //localhost or //site.com or what have you.

Ha. Seriously. :smiley: Haha. That was fun. :smiley:

You can pass baseURL as a flag when you build your site. It will overwrite whatever is in your site config. This is why I pointed you to the issue 3262, just so you have an idea of the small little “gotcha” that is going to be fixed with v20.

Yup. I’m familiar with DTAP.

I see what you mean. (I think). I have a different bash script each for master, testing for pulling/pushing etc. So what I would then do is this?

  1. Leave baseurl="" blank for localhost development.

  2. Use baseurl=“https://dev.site.com” when generating the site on netlify (modify my build command in netlify config), and baseurl=“https://site.com” when building for my vps (live production site).

  3. Be mindful of the trailing “/” problem until .20 :slightly_smiling:

I think that’s it? Right?

Just set it to whatever you want. Hugo is going to convert it to localhost when running the local server. Forget everything I said about the blank string. It was to illustrate that Hugo is smart enough to set it to localhost.

Depends on the problem you’re talking about, but if you are passing the baseURL as a flag, then yes, mind the issue I mentioned before…

There are multiple options available to you here.

Also, if you have a dev environment, I’m going to assume it doesn’t matter whether your meta property for something like OGP is set to marijuanadaily.net or yadayadayada because you’re not going to share links or have that site crawled the same way you will prod…

Right. I think I got it.

  1. By default, just leave config.toml’s baseurl="" (this will default to //localhost:1313 for “hugo serve”)
  2. When building the site anywhere else, specify hugo -b=“https://anywhere.else

This way I can easily switch my baseurl depending on the env I am building for in my build scripts.

Thanks for clarifying, sir. Thanks much! Let me test this out.

EDIT: config.toml baseurl="" empty. Netlify build command modified to include -b=“https://dev.marijuanadaily.net”. All is well on my end for this site. Just need to modify my build script for my vps.

Thanks again, dude. Wicked!

You’re right. It’s only for making sure things are generated and rendered as they should before pushing to live.

I prepared a gist for you with my scripts to generate Hugo Dev Build, Stage Build and Public Build. Hope this helps.

2 Likes

Note that .sh scripts work only on Mac. For Windows, install Git Bash and use that as your client.

But don’t you then have to flip this EVERYWHERE you use the path? For example js src="/thing.js" ?