Custom 404 not displaying correctly

I am trying to get my website to display a custom 404 webpage. Currently, I added a netlify.toml file like this to the root of the project:

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

and with project path like this:

On the deploy page on Netlify, the summary portion seem to indicate that the redirect rule was processed without any errors. However, when I try to test it out, the webpage defaults to Netlify’s default error page, instead of the custom 404 HTML page. Can anybody help as to why it isn’t working as intended?

Amusingly it’ll almost certainly be because the 404.html page doesn’t exist in your Publish directory.

Run your Vite build locally and check what it outputs, you’ll find your 404.html isn’t being output.

See: