Custom Error Page 404

#1

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.

#2

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
#3

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

#4

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.

#5

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

#6

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:

#7

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
#8

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.

#9

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

#10

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.

#11

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

#12

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.