Page not found screen

Hi, so I have a quick question. I change my website many times so now I have many broken links. And when I google my website the first thing that comes up is a broken link to my website. How can I change that broken link page using HTML? I wanna create like a custom broken link or page not found page instead of having the standard netlify page not found page. Anyone who has any ideas would be a big help!

@shahriarsadi Welcome to the Netlify community.

Does this help?

not really. So I found one solution which was creating a 404.html file. When I go on a random page like www.example.com/fbfedhbhdsbf it redirects to the 404 page perfectly. But when I go to a broken link like a old page like example.com/about a url I no longer use it directs to the 404 page but without the css attributes I cant make sense of it.

@shahriarsadi We’re going to need actual URLs to help troubleshoot this issue, but creating your own 404.html page should do the trick.

Thanks for your help greg sure the links are here.
https://byshah.com/404
thats for the 404 page it works great.
you can put byshah.com/ anything and the 404 page works great
http://byshah.com/nsahfjvdsfufh
but it doesn’t work on broken links such as a previous page I used to have but no longer use. Im not sure if it is redirecting to the 404 page, but it does show the 404 page content but looses all css attributes and none of the links in the page work. Im not sure why that is. below is the link to one of those broken links I used to previously use.
https://byshah.com/byshah/contact

Update

Now I am realizing that the issue might be with any link with double // dashes such as https://byshah.com/tomdddd/snjsjddsd
Maybe this is the issue? How could I fix this any ideas ?
As you can see the default netlify not found page works with broken links even with double dashes such as the ones below. Im using another one of my websites as an example.
https://alhamracollection.com/naihdbhsbd/njahbshasb

@shahriarsadi These two pages not only look different from each other, the underlying code is different, too.

Do you have some redirect commands that may account for this?

This recently broke for me as well. My page is using mkdocs and is working fine locally, on Netlify the following happens:

@Stanzilla Welcome to the Netlify community. Can you provide some URLs so others can observe this behavior?

Thanks! And yeah, I updated my post with real URLs.

@Stanzilla Excellent.

Your code is different from page to page, too.

The page that displays properly uses relative links, while the page with the broken display uses full paths.

Also, all declarations are supposed to be inside the section, not scattered throughout the document. Don’t know if that’s contributing to the issue, though, because I’ve never tried it.

Yes, no idea why Netlify does that. It works just fine locally.

@Stanzilla I guess it’s possible that something is fouled up with Netlify’s handling of 404 pages, but the different code suggests that there is more than one version of the 404 page, or perhaps some redirects that are interfering with the process.

What happens when you delete you custom 404 page? Does the Netlify 404 page display as expected?

1 Like

Just wanted to post on here that I’m having the same issue - the major difference I’m seeing is that the resource urls for static content are being re-written from absolute to relative, so the 404 page can’t access any bundled resources if it’s not loaded directly from the root domain. The source from my latest deploy, at a page which should render a valid 404: view-source:https://python-typical.org/usage/foo

Note that the resources are all relative: <link rel="stylesheet" href="assets/stylesheets/application.adb8469c.css">,

Whereas when I build locally, the resources are absolute: <link rel="stylesheet" href="/assets/stylesheets/application.adb8469c.css">

I notice from the deploy log that even though I’ve turned off all post-processing, Netlify is still post-processing the HTML and I’m guessing at that point the hrefs are being re-written by whatever scanning the file.

Yeah it does! The Netlify 404 page displays as expected. (20 chars)

@Stanzilla What is your build process? I ask because I build my sites by hand (so there’s virtually no processing at deploy time), and a quick check of one of my 404 pages shows it works as expected:

https://www.gregraven.org/form_letters/thank-you_letter/ntaohu.htm

The only thing turned on is image lossless compression and pretty urls formatting. I had tried without pretty url formatting before but as seandstewart said, it made no difference. Build itself is a simple command = "mkdocs build"

If I had to guess what’s happening, part of Netlify’s post-build process is to validate the HTML for a custom 404 page and you’re saving the parsed result of the validation instead of the original HTML. I’d also venture to guess that whatever process is responsible for validation is not respecting leading forward slashes on resource URIs.

1 Like

That sounds interesting. How do we proceed from here? Does Netlify have a way to submit bugs?

this is a really great discussion - i’m going to get some :eyes: on this to see if this is a bug we should file or maybe something else is happening. More soon!

1 Like

Hey folks!

I don’t see optimization turned off on your site, @seandstewart ? I see it all turned on here:

https://app.netlify.com/sites/typical-python/settings/deploys#asset-optimization

Please note that if you try to turn it off, there are two caveats that may be relevant here:

  1. a redeploy of your site will be required once you change any settings there, to activate it.
  2. unchecking all the boxes when editing those settings will NOT disable asset optimization. It is not obvious, but only checking the top box will do that!

image