Yet another "BaseURL with subfolder results in broken links" issue

support
1

Hi,

I hope you are doing well. Apologizes by advances for this post, but I came accross many posts (such as this one) and I still could not solve my issue.

Problem statement
My problem is that file true locations and href are not corresponding.

Context

  • I created my first Hugo blog on GitHub using the Anake theme, and I successfully deployed it on GitHub Pages.
  • I also bounded the blog to a custom domain (weekly-tech.io)
  • My blog has a subfolder baseURL: https://tdard.github.io/weekly-tech
  • Every href that is used employs resources RelPermalink property to obtain links. Obtained hrefs are relative to https://tdard.github.io and not https://tdard.github.io/weekly-tech (it is a problem, isn’t it?)
  • No <base> tag has been added

Here is the config.toml file:

baseURL = 'https://tdard.github.io/weekly-tech'
languageCode = 'fr-FR'
title = 'Weekly tech'
theme = 'ananke'

Paginate = 10
summaryLength = 40

Details and examples
My issue is that all the links are broken, meaning:

  • The impossibility to navigate
  • No CSS
  • No JS

When I reach the website address, I can see the index.html page.

But when I click on the link of one post, it adds the subfolder as a prefix to the address (i.e. http://weekly-tech.io/weekly-tech/posts/2023-s1/ ) and therefore the page is not found.

When I remove the subfolder from the address, the post can be found: http://weekly-tech.io/posts/2023-s1/.

Here is an example of how I add a CSS file using a template located in assets:

{{- $styles := resources.Get "main.scss" | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

This resource is located at http://weekly-tech.io/main.min.<hash>.css, but the (relative) href displays /weekly-tech/main.min.<hash>.css, meaning that the full href is http://weekly-tech.io/weekly-tech/main.min.<hash>.css.

To make this work, it seems that:

  • Either I should ensure that the location of resources (other than the main index.html) is in a weekly-tech folder
  • Either I should make sure to remove the first /weekly-tech/ from href using RelPermalink
    But none of the solution looks clean.

Do you know how I could correct this?

Kind regards,
Tristan

2

I had a quick look at your project. I have not read your entire post, but the site looks normal. I’m not sure I understand the above statement, though:

  • When running locally It correctly points to /weekly-tech/ananke/css/main.min.css

If that is not the case for your production site, I would start looking at your configuration/Hugo version/not sure, but the above should just work.

1 Like
3

What does this mean?
How?

4

Sorry for the misunderstanding, I changed things since I posted. It appears that the problem I encountered was due to the custom domain that I tried to bound with the website.

Here, everything works perfectly at https://tdard.github.io/weekly-tech/.

EDIT: not everything works perfectly, I notice that some images are not found. Gonna try to figure this out

5

Hi there,

I hope that you are doing well.

The problem was due to an invalid GitHub Actions template in the Hugo documentation; after removing it and using the Hugo workflow proposed by GitHub the problem was solved.

Capture d’écran 2023-01-19 à 16.15.28
Capture d’écran 2023-01-19 à 16.15.282026×766 65 KB

Thank you for your help!

6

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