Custom 404 page with Hugo Multihosting (different languages and subdomains)

Support
1

Hello! I have been working with Hugo and Netlify for 1 year and I am familiar with the operation of both.

I have a project in Netlify with Hugo in multilenguage and multihosting (different subdomains).

I have the problem that I can’t show a personalized page 404 for each subdomain.

This is the structure of files and directories built by Netlify:

﹂ en
| ﹂ index.html
| ﹂ 404.html
| ﹂ ...
﹂ es
| ﹂ index.html
| ﹂ 404.html
| ﹂ ...
﹂ _redirects

And this is the content of the _redirects file:

https://en.seacomoseo.com/* /en/:splat 200
https://en.seacomoseo.com/* /en/404.html 404

https://seacomoseo.com/* /es/:splat 200
https://seacomoseo.com/* /es/404.html 404

Everything works well, but when accessing an URL with 404 error in one of those subdomains, the Netlify default “Page Not Found” is shown.

I have tried many combinations (for example indicating rule 404 in front of 200 or modifying the shadowing with “!”), but none allows me to correctly show each subdomain and its corresponding personalized page 404.

I’ve been looking in forums on this matter for days and I’m not find a definitive light on the road.

Any idea?

2

This redirect rule never triggers.

The purpose of this redirect rule is to redirect to the destination if no file is matched at the requested URL. In other words, that is already handling your 404 page too.

I’m however confused with your setup. Since you’re trying to redirect from en subdomain, I’m assuming (and even confirmed) that you’ve added seacomoseo.com and en. seacomoseo.com on the same site. Is there any specific reason why you did not add the subdomain to a different site and thus, reduce complications?

3

Aham, I understand that it is for the previous rule.

It seems to me ideal, but in reality this is not happening :person_shrugging:

However, if Netlify comes to show page 404 personalized, I fear that it would return a 200 state code (something not desirable).

If you mean having 2 different sites with their different associate repositories, that would precisely complicate things using Hugo Multilanguage and Multihost (there are many crossed links/things between language versions). I prefer not to have a personalized page 404 to have to manage 2 different sites (such as now) if there is no solution.

But maybe my English level is not good enough and I did not understand you :sweat_smile: Sorry if it is the case!

If you think of any solution, I would appreciate it very much! :grin:

4

I think you misunderstood. Let me rephrase.

https://en.seacomoseo.com/* /en/:splat 200

This redirect will trigger for https://en.seacomoseo.com/file.ext only if it doesn’t already exist. This means, without this rule, the URL should have served a 404. However, because of this redirect rule, it now goes to https://en.seacomoseo.com/en/file.ext. Now, if https://en.seacomoseo.com/en/file.ext doesn’t exist either, there’s no redirect rule to handle this, thus Netlify falls back to its default 404 page.

I meant, you can have the same repo, just a different site. Each site can then build and publish only a single language of the site. As far as I can see, you can easily disable a language by passing it as an environment variable in your build command:

Theoretically, this setup sounds more maintainable to me.

5

Ok, now I understand everything.

Good idea! But with that I would lose the links that cross between language versions, for how Hugo works.

Hmmm… At the moment, I can think of one thing: copy one of the 404.html files to the root directory through a script after the construction of the entire content. It is quite simple (cp ./public/es/404.html ./public/). I just checked and works! The bad thing about this is that there can only be a 404.html for all languages, with all its content in that language (menu and footer included) :person_shrugging:

Thank you very much! :smiley: