Custom 404 error page with Hugo

Hi,

My site uses Hugo and has 2 languages (french and english):

I am trying to set up a custom 404 URL without success.

Locally I always get the 404 error message and on netlify too.
Capture dā€™eĢcran 2021-11-13 aĢ€ 10.10.59

First try

  1. Create a 404.html template file in my layouts folder
  2. Add the following rules in the netlify.toml file at the root of my site
[[redirects]]
  from = "/fr/*"
  to = "/404/"
  status = 404

[[redirects]]
  from = "/en/*"
  to = "/404/"
  status = 404

Second try

  1. Create a 404.html template file in my layouts folder
  2. Add the following rules in the netlify.toml file at the root of my site
[[redirects]]
  from = "/*"
  to = "/404/"
  status = 404 

Third try

Resume test 1 and 2 by replacing in the file netlify.toml to = "/404/" by to = "/404.html"

Fourth try

  1. Create a new page named 404.md in the root of my content folder
  2. Add the following rules in the netlify.toml file at the root of my site
[[redirects]]
  from = "/*"
  to = "/404/"
  status = 404 

Fifth try

Resume test 1, 2 and 4 by creating a _redirects file at the root of the site with the following rules

/en/* /en/404.html 404
/fr/* /fr/404.html 404

If you have an idea, let me know.

Thanks :slight_smile:

Hereā€™s my repo that uses Hugo and a custom 404 page:

Hope this helps.

@hrishikesh Thanks for your quick answer.

I tried your solution. Now I can see the custom 404 page locally or on netlify with :

But if I try with a random word (https://beautiful-website.netlify.app/en/randomWord, I always get the 404 from netlify.

I can see that youā€™ve not added any redirects to your website. Are you sure youā€™ve done it?

@hrishikesh Ok I see the confusion. I just saw that ā€œbeautiful-websiteā€ really exists, itā€™s not my site it was just an example, sorry. :sweat_smile:

Here is what I did.

netlify.toml

[[redirects]]
  from = "/*"
  to = "/404/"
  status = 404

_redirects

/en/* /en/404.html 404
/fr/* /fr/404.html 404

layouts/404.md

{{- define "main" -}}
Lorem ipsum
{{- end -}}

I can see my 404 page locally and on netifly (https://ā€¦netlify.app/en/404.html) by calling directly the page name but not if I simulate a 404 error by writing a bad url

Hi @Oli78 , any chance you can share the Netlify site name? That will help us troubleshoot faster :slightly_smiling_face: .

You can private message (PM) that to one of our support staff. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

Hi !

It works :partying_face: :partying_face: :partying_face:

Here what i did.

netlify.toml

[[redirects]]
  from = "/*"
  to = "/en/404.html"
  status = 404

[[redirects]]
  from = "/en/*"
  to = "/en/404.html"
  status = 404

[[redirects]]
  from = "/fr/*"
  to = "/fr/404.html"
  status = 404

layouts/page/404.html

{{ define "main" }}
  <p>404: Beautiful content</p>
{{ end }}

content/en/404.md

---
title: "Error 404"
layout: "404"
translationKey: notFound
---

content/fr/404.md

---
title: "Error 404"
layout: "404"
translationKey: notFound
---