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

Hash_Borgir · March 23, 2017, 5:31am

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.

rdwatters · March 23, 2017, 6:10am

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:

Hash_Borgir · March 23, 2017, 6:20am

{{ "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?

rdwatters · March 23, 2017, 2:35pm

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:

Set baseurl = "" in your config
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.

Hash_Borgir · March 24, 2017, 1:07pm

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.

rdwatters · March 24, 2017, 5:43pm

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.

Hash_Borgir · March 24, 2017, 7:49pm

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

Hash_Borgir · April 8, 2017, 3:44pm

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.

If the value fo the baseurl is “/”, then https://marijuanadaily.net/blog/ (and css/scripts) start to work. The images are still rendered as og:image=“/img/something.jpg” instead of the absolute url.
If the value of the baseurl is “https://MarijuanaDaily.NET/”

<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! <3

https://marijuanadaily.net/blog/could-marijuana-give-athletes-an-unfair-advantage/

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!

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

Hash_Borgir · April 8, 2017, 7:44pm

absURL, BaseURL etc. are calculated as follows:

github.com

gohugoio/hugo/blob/5989c4d46474298e7f9f26ddeec8e3ec62ae5677/helpers/baseURL.go

// Copyright 2017-present The Hugo Authors. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package helpers

import (
	"fmt"
	"net/url"
	"strings"
)

This file has been truncated. show original

github.com

gohugoio/hugo/blob/4e16a6d4fdb46cc072bd0bf0f8977d6a5f224694/transform/absurl.go

// Copyright 2015 The Hugo Authors. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package transform

var ar = newAbsURLReplacer()

// AbsURL replaces relative URLs with absolute ones
// in HTML files, using the baseURL setting.
var AbsURL = func(ct contentTransformer) {

This file has been truncated. show original

github.com

gohugoio/hugo/blob/492327368848bcf21cfd23d5490bc47b6ea44897/helpers/url.go

// Copyright 2015 The Hugo Authors. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package helpers

import (
	"fmt"
	"net/url"
	"path"
	"path/filepath"

This file has been truncated. show original

github.com

gohugoio/hugo/blob/492327368848bcf21cfd23d5490bc47b6ea44897/helpers/pathspec.go

// Copyright 2016-present The Hugo Authors. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package helpers

import (
	"fmt"

	"github.com/spf13/hugo/config"
	"github.com/spf13/hugo/hugofs"

This file has been truncated. show original

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.

rdwatters · April 8, 2017, 8:57pm

@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.

Hash_Borgir · April 8, 2017, 9:06pm

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. Haha. That was fun.

rdwatters · April 8, 2017, 9:43pm

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.

Hash_Borgir · April 8, 2017, 9:49pm

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?

Leave baseurl="" blank for localhost development.
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).
Be mindful of the trailing “/” problem until .20

I think that’s it? Right?

rdwatters · April 8, 2017, 9:52pm

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…

Hash_Borgir · April 8, 2017, 9:57pm

Right. I think I got it.

By default, just leave config.toml’s baseurl="" (this will default to //localhost:1313 for “hugo serve”)
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!

Hash_Borgir · April 8, 2017, 10:06pm

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

Leo_Merkel · July 23, 2017, 8:09pm

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

gist.github.com

https://gist.github.com/Lego2012/5e0d5b7619bb6205f24d5244c405010a

00-explanation.md

The BaseURL in `config.yml` is set to `/`.

The `domains.sh` holds the URLs for Production Build and Stage Build.

`do-dev.sh` takes just the BaseURL from `config.yml`. When it comes to Stage or Build Production the BaseURLs are taken from `do-prod.sh` or `do-stage.sh`. And those are feeded by `domains.sh`.

Although this is a convenient way to create different builds be aware of the risk of the `source` command in the `do-` files. If you like to know more about it: Google is your friend.

01-domains.sh

#!/bin/zsh

# These are the BaseURLs for do-stage.sh and do-prod.sh
export BASE_STAGE="http://test.domain.tld/"
export BASE_PROD="http://domain.tld/"

# These are the directories on the server where the builds are published to
export DIR_STAGE="/test.domain.tld/"
export DIR_PROD="/domain.tld/"

02-do-dev.sh

#!/bin/zsh
DIR=$(pwd -P)
BUILD_DIR="/build/dev"

if [ -d $DIR$BUILD_DIR ]
then
  rm -rf $DIR$BUILD_DIR
  echo Directory $DIR$BUILD_DIR deleted
else
  echo Directory $DIR$BUILD_DIR not existing

This file has been truncated. show original

There are more than three files. show original

Leo_Merkel · July 23, 2017, 8:21pm

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

David1 · October 18, 2018, 5:48pm

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

Topic		Replies	Views
How not to specify URL site? support	10	4172	March 5, 2017
URL : BaseUrl support	1	470	June 5, 2018
Using {{.Site.BaseURL}} results in a 404 support	4	572	February 4, 2020
Need help understanding url conversions support	20	5602	November 4, 2016
Confusion regarding baseURL support	1	995	October 5, 2018

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

Related topics