baseURL for deployment messing up links to /static/

support
1

When I build my site locally using “hugo serve”, everything is great.

When I deploy to gitlab, using hugo --baseURL="username.gitlab.io/sitename/" in the .gitlab-ci.yml deployment script (Gitlab and Hugo), then all the images referenced in the /static/ folder don’t load properly. And if I try any other basURL argument, then the navigation to the content doesn’t work. How do I work around this?

2

It would help if we had a bit more info per Requesting Help.

That said, have you tried --baseURL="http://username... specifying the protocol?

3

Sorry for not providing more detail. You can see my project here: https://gitlab.com/pyrex41/TradingSite

And you can see the site that isn’t building quite right here: http://pyrex41.gitlab.io/TradingSite/

On this page in particular, there are supposed to be two images that aren’t showing up: http://pyrex41.gitlab.io/TradingSite/vol/2017-11-10/

edit

In response to suggestion regarding protocol, it looks like I was including http://; just did not type question correctly here. Another reason better to link to source…

4

The image is hosted here:

https://pyrex41.gitlab.io/TradingSite/images/2017-11-10/cm45_recent.png

… but you have it pathed here on that page (looking at html source):

 https://pyrex41.gitlab.io/images/2017-11-10/cm45_recent.png
5

Ok, looks like images is right under static which I think is typical, but you’re copying the site up into /TradingSite? That’s where that extra URL path is coming from… I think.

6

I have changed the deployment file to say hugo --baseURL="http://pyrex41.gitlab.io/"; you should be able to see this in the repository now. It does not appear to have changed anything though…

7

Actually now, when you hit the “Home” button on the page, it tries to go to http://pyrex41.gitlab.io/ which returns a 404 error…

8

Ok, looks like you may need:

 --baseURL="http://pyrex41.gitlab.io/TradingSite"

… if you’re actually copying the site up into that folder? It’s acting as the site’s root, so.

9

Updated to your suggestion. Seems to be right back to the initial problem…

10

If by that you mean the images not showing, you need to set the short codes to have the right path. You were specifying /images but there is nothing there. Instead, try & specify /TradingSite/images when you set their path.

11

I️ will give that a try. I️m confused about what baseURL Is used for then. I️ thought the links in the shortcode would automatically have baseURL prepended to them.

12

Ok updating the short codes works. However the same issue seems to be affecting some aspect of the CSS rendering. Do you have any suggestions on where it look for this?

13

Now, after fixing the shortcodes, running into issue for css stylesheet. view-source:https://pyrex41.gitlab.io/TradingSite/.

Stylesheet link is href="/css/main.css"

How can I alter this to say 'href="/TradingSite/css/main.css"?

Perhaps some use ref or relref?

14

Looks like you found it. Your header partial refers to a css partial which uses params in the config. However, there are no params set to this, so doing what you did makes sense.

15

Use the absURL or relURL template funcs.

1 Like
16

Thank you @bep and @RickCogley.

I have been able to use relURL to avoid having to hard code /TradingSite/ by doing the following:

  • I created two custom shortcodes:
    myimg:
    <img src = "{{ .Get "src" | relURL}}" alt="">
    download:
    <a href="{{ .Get "href" | relURL}}" download="{{ .Get "download" }}">{{ .Get "text" }}</a>

These shortcodes can then be used in content creation without having to think about what the baseURL for the site is.

  • Similarly, I updated the partials/css section to also refer to relURL:
    <link rel="stylesheet" href= {{ "/css/main.css" | relURL }}>

This now works equally well when deployed on development server (baseURL = "http://example.com") or when pushing to some other baseurl (eg, baseURL = "http://user.gitlab.io/sitename/").

Thank you all for your help.

2 Likes