relURL returns path to Hugo project

Hello, I am new to Hugo and self-hosting my site.

I am using the ananke theme. After troubleshooting some other issues, I found out that my relURL and absURL are returning the entire path to my project, such as /path/to/hugo/project/content/posts/test.md rather than /content/posts/test.md. In the case of absURL it looks like this: https://example.com/path/to/hugo/project/content/posts/test.md

I am assuming I made a mistake when installing, or skipped a configuration step? I searched, but could not seem to find anyone that has had the same problem.

Here is the output of hugo env:

hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended linux/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.24.0"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"

Thank you for any help you can give me!

Missing info

  • content of your config
  • WHO is creating the wrong link? a shortcode? a render hook? a layout file?
  • is it a general problem (all links) or localized (just a specific spot)?
  • content of the layout file that is creating the absURL

I think “someone” is doing “something” between absURL and the layout file where you create the link or URL. It might be a shortcode or a render hook. I wonder what you might have troubleshoot before you ran into that issue, because without changes to the code it should not happen with Ananke.

Thank you for the reply - yes, I agree, I am thinking I probably broke something somewhere. I found the issue when I was troubleshooting placing @font-face in my custom.css and was not getting it to work. I then noticed that Chrome dev tools was saying that main.css was located in /path/to/my/hugo/project/ananke/css/main.css. So I looked at partial site-style.html and noticed relURL was being called, so I printed that to see that it was returning my project’s path. I am using the included, unedited site-style.html from ananke:

{{ with partialCached "func/style/GetMainCSS.html" "style/GetMainCSS" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" >
{{ end }}

{{ range site.Params.custom_css }}
  {{ with partialCached "func/style/GetResource.html" . . }}{{ else }}
    <link rel="stylesheet" href="{{ relURL . }}">
  {{ end }}
{{ end }}

For testing I have tried printing absURL from different places including within partials and in baseof.html, all with the same results.

Here is the content of hugo.toml:

baseURL = 'https://mysite.com/'
languageCode = 'en-us'
title = 'My Site'
theme = 'ananke'


[params]
  custom_css = ["custom.css", "comentario.css"]
  description = "My site test description"
  name = 'gershom'
  author = 'gershom'
  featured_image = '/images/An_den_Wassern_Babels.jpg'
  featured_image_class = "cover bg-center"
  comentario = true
  body_classes = "avenir"
  site_image = '/images/An_den_Wassern_Babels.jpg'
  favicon = '/images/favicon.ico'
  recent_posts_number = 10

[params.ananke.social.share]
  icons = true
  sharetext = true
  networks = [
    "email",
    "facebook",
    "x-twitter",
    "bluesky",
    "linkedin"
  ]


[markup.goldmark.parser.attribute]
  title = true
  block = true

As far as I can tell, ananke does not use relURL or absURL anywhere else, so all the other links look OK. I am using some edited partials - but not sure that I could redefine absURL or relURL there?

mmh, i did: hugo.toml

baseURL      = 'https://example.org/'
languageCode = 'en-us'
title        = 'My New Hugo Site'
theme        = 'ananke'

[params]
   custom_css = ['custom.css']

and the file in site_root/assets/ananke/css/custom.css

and it works

check the filename incl. letter case!

tl;tr;

I used the quickstart with the most recent commit of ananke (git clone). This has a slightly different site-style.html
<link rel="stylesheet" href="{{ urls.RelURL (.) }}"> but that is irrelevant, maybe some other changes in the called partial.

you can’t redefine that template functions. But anyhow the line is not executed if the file is at the correct place in assets.

if it’s not there the docs state that the filename will be relative to the sites root. So placing them in static will help.

Note on retrocompatibiliy for custom css : If the files registered through the custom_css setting are not found in assets/ananke/css the theme will expect them to live at the given path relative to the static directory and load them as <link> requests.

If you cannot find it, maybe you can share your repo - will speed things up

@irkode thank you for your reply. I believe I have custom.css in the right place in assets/ananke/css/custom.css. My styles are working (except @font-face).

Regardless, I would not expect for relURL or absURL to expose my system’s file structure, based on the documenation?

Here is my repo: GitHub - gershom-mx/sojournersonearth

Thank you again for your help.

I did this:

git clone --recurse-submodules https://github.com/gershom-mx/sojournersonearth
cd sojournersonearth/
hugo

Which file in the public directory contains an unexpected URL?

tracked that down a little bit:
there’s a partial layouts\partials\comentario.html
and for test purposes the op outputs <div>{{ relURL . }}</div>
which prints the full path to the filename.

it’s used fe in http://localhost:1313/posts/test/

imho the main problem here is, that the Ananke partial site-style is operating on strings whereas the OPs partial is called with a context PAGE.

So he’s actually calling relURL PAGE-object that results in the full path. which in any case didn’t work before.

Dunno if the conversion is done by relURL or when evaluating the argument but a %s on the page object returns the full Path (equal to .Page.File.Filename)

looks like the automatic conversion of DOT to string has changed. (remembering there was something with changes of pages backed by a file ?)

v 128.1

WARN  relURL -  DOT: Page(/posts/test) -> /Page(/posts/test)
WARN  relURL -  .Path: /posts/test -> /posts/test
WARN  relURL -  .File: test -> /test
WARN  relURL -  .File.Filename: C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md -> C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md
WARN  absURL -  DOT: Page(/posts/test) -> https://sojournersonearth.uk/Page%28/posts/test%29
WARN  absURL -  .Path: /posts/test -> https://sojournersonearth.uk/posts/test
WARN  absURL -  .File: test -> https://sojournersonearth.uk/test
WARN  absURL -  .File.Filename: C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md -> C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md

v 145.0

WARN  relURL -  DOT: C:/_repos/github/clone/topic-54339-relurl/content/posts/test.md -> C:/_repos/github/clone/topic-54339-relurl/content/posts/test.md
WARN  relURL -  .Path: /posts/test -> /posts/test
WARN  relURL -  .File: test -> /test
WARN  relURL -  .File.Filename: C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md -> C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md
WARN  absURL -  DOT: C:/_repos/github/clone/topic-54339-relurl/content/posts/test.md -> C:/_repos/github/clone/topic-54339-relurl/content/posts/test.md
WARN  absURL -  .Path: /posts/test -> https://sojournersonearth.uk/posts/test
WARN  absURL -  .File: test -> https://sojournersonearth.uk/test
WARN  absURL -  .File.Filename: C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md -> C:\_repos\github\clone\topic-54339-relurl\content\posts\test.md

v0.136.0 and earlier:

{{ .Page | string }} --> Page(/posts/post-1)

v0.137.0 and later:

{{ .Page | string }} --> /home/jmooring/code/hugo-testing/content/posts/post-1.md

https://github.com/gohugoio/hugo/pull/12996

1 Like

additionally to the context stuff above which means you have a DOT context difference to the original code.

  • to get the URL of a Page use .Permalink or .Relpermalink instead

  • to get the comentario.css use: custom_css = ["custom.css", "css/comentario.css"] because that’s in the static folder.

  • guessing the font needs proper relative names…

Thank you, this explanation makes sense and helps me understand its behavior a bit. But some notes:

  • (I don’t really plan to use relURL or absURL in pages, outside of testing). When I inspect the code with Chrome I still see the following in the Sources tab: /path/to/project/hugo/ananke/css/main.css. See screenshot:

Same on Ananke’s demo site:

  • comentario.css is actually being called by a third-party commenting module and not by Ananke, so it has been working.
  • Yes, I need to figure out relative path for @font-face, but the current relative path seems to be relative to system root rather than project root, based on screenshots above?

That’s because of the generated public\ananke\css\main.css.map

mmh, if it’s statically loaded otherwise, why do you have it in custom_css. That setting does not work

no idea, but if you cannot get that to work, there are some topic here, maybe a fresh topic regardiung the font include would be good. to get this one closed with the initial relURL thing.

OK, I see. Yes I can close this topic and create a new one. I was assuming that the relative path needed in my css was related to the relative path generated by relURL, but I now see that it is not.

I will open a topic on the Ananke theme site, since the main.css.map is being generated by the theme. And I suspect that my @font-face problem is related to the relative url generated by main.css.map.

Thank you for you explanations.

Edit: I figured out how to disable SourceMap to hide system path, nothing to do with my font issue. Still have a lot to learn…

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.