Custom Error Page 404

Hey, I would like to know if there is a way to create a custom page for a 404, instead of the standard blank page File Not Found?

Thanks.

Yes. But you need to do it with the web server that serves the pages that Middleman has generated.

For example, if it is an Apache server: http://www.thesitewizard.com/archive/custom404.shtml

1 Like

And what about the pages served with ‘middleman server’ ?

At least when using Amicus ( https://github.com/nathos/amicus ) there is a 404.html file in the project – so just change it to your liking.

I don’t know if Amicus does something special to make it work. If you don’t already have a 404.html in your source-folder, start by creating one. With some luck, it may be all you need to do.

I already tried but there is nothing that loads that 404 page. I can make it work on Apache , but I don’t know how to configure middleman server for it. Anyway not a big issue

This is still the most relevant Google result, so I’ll leave the message for anyone needing it:

If you host your site on AWS S3, I’ve made middelman-s3_sync support setting the 404 page.

Check it’s README.md for the settings, or you can read the blogpost I’ve made (disclaimer: that’s my company’s blog, because I’ve developed these changes for my company).

BTW, that extension rocked hard even before we touched it :slight_smile:

Hi @matiasgarciaisaia, thanks for your blog.
I have tried everything you said on it, configuration is ok, but my custom 404 page is not displayed either locally or in S3, is there any update on this gem? I have checked that version 4X has added your implementation so far.

I have the following line in my config.rb
page '/404.html', directory_index: false
Also, I have a source/404.html.erb page. I’m not sure what I’m I doing wrong, I am only able to see the File not found error page generated by default.
Thanks

1 Like

Hey @Willibaur!

The extension only works when you deploy to S3 - so, during development, you’ll still see the standard Middleman error page:

File Not Found

/this-page-doesnt-exist.html

With that page line in your config.rb, if you see your custom 404 page in development by visiting http://localhost:4567/404.html, then it will work when deployed to S3.

Well - at least it should. Have you tried that? I’ve just checked my config, and it really looks the same as yours.

Thanks for your quick answer @matiasgarciaisaia, it is working but now the problem seems to be related to CSS not being loaded properly

Relative links? Relative assets? 404-page should use relative: false or hardwired absolute links. Unfortunately current stylesheet_link_tag in Middleman 4.2.1 doesn’t correctly handle relative: false in some cases (i18n). I’m trying to investigate it now.

Thanks @komor72,
I’ve tried what you mentioned but I still have the same problem. Also, I did what you mentioned in a related thread

HI all,
I managed to solve the problem, what I did was:

In my Config.rb

  • I left this at global level **page '/404.html'**, layout: 'error'
  • Removed this activate :relative_assets
  • In production and staging blocks I modified error document to s3_sync.error_document = '404/index.html', this was the cause why I was losing my assets as once the site has been deployed 404.html does not exist anymore, I was pointing to the wrong error_document

I created a separate layout called error as suggested on this thread for my 404 page.

I am using

  • ‘middleman’, ‘~> 4.1’, ‘>= 4.1.10’
  • ‘middleman-s3_sync’, ‘~> 4.0’, ‘>= 4.0.2’
  • “webpack”: “~3.5.5”

Hope this help somebody else in the same issue.