Rel. and abs. path in Hugo. GitLab pages doesn't work correct

support
1

I have created a small website using Hugo and Bootstrap. This website is hosted on GitLab Pages.
I would like to extend the website with a javascript based full text search function. I found the following link: A simple javascript based full text search function

Unfortunately, the example does not work properly with my Hugo and GitLab Pages configuration:

With baseURL = "https://user.gitlab.io" the website works without errors. When I call up the search site and search for a term, the path is not forwarded correctly: https://user.gitlab.io/company would be https://user.gitlab.io/developer/company.
Apparently gitlab converts absolute URLs into relative paths. In the header, for example, “/favicon/favicon.ico” will be included - which actually leads to “https://user.gitlab.io/favicon/favicon.ico”. In the HTML source code of the website, however, the favicon is included in relative terms - e.g. “…/favicon.ico”. Apparently gitlab converts absolute paths to relative paths. However, this obviously does not take into account paths in JSON files.

The GitLab documentation says the following:

The baseURL in your site configuration must reflect the full URL of your GitLab pages repository if you are using the default GitLab Pages URL (e.g., https://.gitlab.io//) and not a custom domain.

If I change the baseURL to: baseURL = "https://user.gitlab.io/developer/" the website is displayed without css.

How can I implement the seach funktion?

Probably an error in the head.html:

<meta charset="utf-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
	name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title itemprop="name">{{ .Title }} - {{ .Site.Title }}</title>
<meta property="og:title" content="{{ .Title }} - {{ .Site.Title }}" />
{{ if and (eq .Kind "taxonomy") (eq .Type "categories")}}
<meta name="robots" content="noindex, nofollow, noarchive" />
{{ else }}
<meta name="robots" content="noindex, nofollow, noarchive" />
{{ end }}

<!-- Dart Sass -->
{{ $opts := dict "transpiler" "dartsass" }}
{{ $scss := resources.Get "scss/styles.scss" | fingerprint }}
{{ $styles := $scss | resources.ToCSS $opts }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />

<title>
	{{- if .IsHome -}}
	{{- .Site.Title -}}{{ with .Site.Params.slogan }} - {{ . }}{{ end }}
	{{- else -}}
	{{- .Title }} - {{ .Site.Title -}}
	{{- end -}}
</title>

hugo.toml

baseURL = "https://user.gitlab.io"
title = ""
languageCode = "en-US"
theme = "developer"

enableRobotsTXT = true
relativeUrls = true
canonifyurls = true
enableGitInfo = true

[module]
	[[module.imports]]
		path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"

[languages]
  [languages.en]
	  languageCode = "en-US"
    languageName = "English"
    contentDir = "content/en"

[markup]
	[markup.goldmark]
		[markup.goldmark.renderer]
    		unsafe = true

index.json

[
  {{- $i := 0 -}}
  {{- range where .Site.RegularPages "Section" "ne" "" -}}
  {{- if not .Params.noSearch -}}
    {{- if gt $i 0 }},{{ end -}}
    {"date":"{{ .Date.Unix }}", "url":"{{ .Permalink }}",
    "title":{{ .Title | jsonify  }},
    "summary":{{ with .Description}}{{ . | plainify | jsonify }}{{ else }}{{ .Summary | plainify | jsonify }}{{ end }},
    "content":{{ .Content | plainify | jsonify }},"tags":[ {{- $t := 0 }}{{- range .Param "tags" -}}{{ if gt $t 0 }},{{ end }}{{ . | jsonify }}{{ $t = add $t 1 }}{{ end -}} ],
    "section": {{ .Section | jsonify -}} }
    {{- $i = add $i 1 -}}
  {{- end -}}
  {{- end -}}
]

The "url":"{{ .Permalink }}", is not correct.

2

You are more likely to receive a prompt and accurate response if you post a link to your project’s Git repository.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

Also, I just noticed this in your site configuration:

relativeUrls = true
canonifyurls = true

This is almost never a good idea, but again, we’d need to see your complete project to be sure. At some point I hope we deprecate canonifyUrls, and relativeUrls should only be used for serverless sites that are only navigable via the file system. Related documentation:

3

Thank you for your reply. I will create a test repo. But it needs a little time.

I have tested the website on my web server. I have set the baseURL in Hugo.toml to baseURL = "https://developer.example.com". The search works as desired. If I set the baseURL to baseURL = "https://user.gitlab.io/developer/", the CSS is not displayed. The links do not work either.