diff options
| author | Joel Pettersson <petterssonjoel@gmail.com> | 2022-08-16 04:57:11 +0300 |
|---|---|---|
| committer | Joel Pettersson <petterssonjoel@gmail.com> | 2022-08-16 04:57:11 +0300 |
| commit | 0adbe4c9718496a4b40715808255745b8bb1bbf7 (patch) | |
| tree | 42062c2e6293b3ca5544d0df983ed9917b95d2f9 | |
| parent | 41ee32b40dd9ec193b3f9230cc05dee36580a91b (diff) | |
Avoid logotype link target issue when deployed to CloudFlare Pages
From
https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploying-with-cloudflare-pages:
Hugo allows you to configure the baseURL of your application. This
allows you to utilize the absURL helper to construct full
canonical URLs. In order to do this with Pages, you must provde
the -b or --baseURL flags with the CF_PAGES_URL environment
variable to your hugo build command.
Using the advice above, the baseURL is set to the specific deployment
URL by CloudFlare, e.g.
https://848e759b.my-project-name-here.pages.dev.
Let's say now that 848e759b is the most recent production build. That
means the same version is available at my-project-name-here.pages.dev.
Now, when visiting https://my-project-name-here.pages.dev/, however,
the target for the logotype link will be
https://848e759b.my-project-name-here.pages.dev/ because it's based on
the (absolute) base URL. That is likely not the desired behavior.
By using the relative permalink to the home page instead, the anchor
target will simply be `/`, which avoids the issue altogether. This is,
by the way, what the 'ananke' theme currently does.
| -rw-r--r-- | layouts/partials/header.html | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 495873a..4c878c2 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,10 +1,10 @@ <div class='header'> <div class="container"> <div class="logo"> - <a href="{{ .Site.BaseURL }}"><img height={{ .Site.Params.logo.desktop_height }} alt="{{ .Site.Params.logo.alt }}" src="{{ .Site.Params.logo.desktop | relURL }}" /></a> + <a href="{{ .Site.Home.RelPermalink }}"><img height={{ .Site.Params.logo.desktop_height }} alt="{{ .Site.Params.logo.alt }}" src="{{ .Site.Params.logo.desktop | relURL }}" /></a> </div> <div class="logo-mobile"> - <a href="{{ .Site.BaseURL }}"><img height={{ .Site.Params.logo.mobile_height }} alt="{{ .Site.Params.logo.alt }}" src="{{ .Site.Params.logo.mobile | relURL }}" /></a> + <a href="{{ .Site.Home.RelPermalink }}"><img height={{ .Site.Params.logo.mobile_height }} alt="{{ .Site.Params.logo.alt }}" src="{{ .Site.Params.logo.mobile | relURL }}" /></a> </div> {{ partial "main-menu.html" . }} {{ partial "hamburger.html" . }} |