baseURL for deployment messing up links to /static/


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


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