Understanding relative URLs

relURL returns a path relative to the protocol+host portion of the baseURL specified in config.toml.

Example 1

baseURL = "https://www.example.org/"

The baseURL protocol+host is https://www.example.org
The baseURL path is /

{{< relurl "quez.html" >}}    --> /quez.html
{{< relurl "/quez.html" >}}   --> /quez.html
{{< relurl "../quez.html" >}} --> /quez.html
{{< relurl "./quez.html" >}}  --> /quez.html

Example 2

baseURL = "https://www.example.org/foo/bar/baz/"

The baseURL protocol+host is https://www.example.org
The baseURL path is /foo/bar/baz/

{{< relurl "quez.html" >}}    --> /foo/bar/baz/quez.html
{{< relurl "/quez.html" >}}   --> /foo/bar/baz/quez.html
{{< relurl "../quez.html" >}} --> /foo/bar/quez.html
{{< relurl "./quez.html" >}}  --> /foo/bar/baz/quez.html

How It Works

The relURL function uses path.Join to assemble the return value.

Join joins any number of path elements into a single path, separating them with slashes. Empty elements are ignored. The result is Cleaned.

What does “Cleaned” mean? From the path.Clean documentation:

Clean returns the shortest path name equivalent to path by purely lexical processing. It applies the following rules iteratively until no further processing can be done:

1. Replace multiple slashes with a single slash.
2. Eliminate each . path name element (the current directory).
3. Eliminate each inner .. path name element (the parent directory)
   along with the non-.. element that precedes it.
4. Eliminate .. elements that begin a rooted path:
   that is, replace "/.." by "/" at the beginning of a path.

This was helpful:

Setting relativeURLs = true in config.toml has no effect when running hugo server. It only affects the output generated when you build the site with hugo.

2 Likes