404 page - issue with urls to things like CSS style sheets

support
1

Hello. I’ve created custom 404 page. It’s working like a charm with one issue.

Let’s imagine someone provided url: domain.com/software and there is nothing under the “software” then 404 page is working perfectly.

But when the url is: domain.com/software/ all of the resources like images, CSS style sheets etc. is not loading, because the link to them instead of “domain.com/css/style.css” is “domain.com/software/css/style.css”

Is there a way to fix it?

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.

3

The problem is - it’s internal project and I can’t show it externally :frowning:

Site is using its own theme and static CSS files are in the path:
/theme/static/css/…

In the head partial I’m calling them like this: <link href="/css/solid.min.css" rel="stylesheet">

It’s working everywhere but not when there is “/” at the end of the url with typo.

4

You should check the URL that is used when it’s “not working” in your browser’s developer tools. My guess is that you reference the CSS in an awkward way. But since you’re not showing your code, there’s no way to know.

5

See above…

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.

6

I done this and:

7

I’ll try - thank you!

8

Also:

  1. Where is your live site hosted?
  2. What is the URL to the live site?
9

A couple of different things can cause this issue:

  1. The links to your css is looking in the dir that the final pages are in. To make it look at the site root for the css, you may have to precede it with a / in the href quotes of the css link. So for instance it’ll be href=“/css/style.css” instead of href=“css/style.css”.
  2. The rewrite rule of the webserver software config. This will depend on what sort of software you’re using to host. Both Apache2 and Nginx can have subdirs setup to where it changes the root if someone tries to request a page within. Removing said subdir configs may help with this behavior if you can do without them.

Although it’s hard to tell what’s going on without at least a mock git repo (doesn’t have to have the same content, just the layouts and basic css), this is the best advice I can offer blind.

10

Hi all - once again thanks for tips. During the investigation and preparing the dummy version of the site, I’ve spotted, that having relativeURLs = “true” setting enabled in config files was causing he issue.

Also specific way of hosting it in gitlab (domain.com/project_folder/site_itself) was adding some additional issues.

I’ve removed *relativeURLs = “true” and added base url - now it’s working like a charm :slight_smile: