Simple HTTP Error Page Generator. Create a bunch of custom error pages - suitable to use with Lighttpd, Nginx, Apache-Httpd or any other Webserver.

• HTTP400
• HTTP401
• HTTP403
• HTTP404
• HTTP500
• HTTP501
• HTTP502
• HTTP503
• HTTP520
• HTTP521

Just clone/download the git repository or use the prebuild packages (only the generated html files are included)

Direct Download

• Download TAR Archive
• Download ZIP Archive

Shell/Bash

# TAR Archive
wget https://raw.githubusercontent.com/AndiDittrich/HttpErrorPages/master/dist/pages.tar

# ZIP Archive
wget https://raw.githubusercontent.com/AndiDittrich/HttpErrorPages/master/dist/pages.zip

NGINX supports custom error-pages using multiple error_page directives.

File: default.conf

Example - assumes HttpErrorPages are located into /var/ErrorPages/.

server {
    listen      80;
    server_name localhost;
    root        /var/www;
    index       index.html;
    
    location / {
        try_files $uri $uri/ =404;
        
        # add one directive for each http status code
        error_page 400 /ErrorPages/HTTP400.html;
        error_page 401 /ErrorPages/HTTP401.html;
        error_page 402 /ErrorPages/HTTP402.html;
        error_page 403 /ErrorPages/HTTP403.html;
        error_page 404 /ErrorPages/HTTP404.html;
        error_page 500 /ErrorPages/HTTP500.html;
        error_page 501 /ErrorPages/HTTP501.html;
        error_page 502 /ErrorPages/HTTP502.html;
        error_page 503 /ErrorPages/HTTP503.html;
    }

    # redirect the virtual ErrorPages path the real path
    location /ErrorPages/ {
        alias /var/ErrorPages/;
        internal;
    }

HttpErrorPages are available as NPM-Package - just install http-error-pages via npm/yarn

npm install http-error-pages --save

Example

var _express = require('express');
var _webapp = _express();
var _httpErrorPages = require('http-error-pages');

// demo handler
_webapp.get('/', function(req, res){
    res.type('.txt').send('HttpErrorPages Demo');
});

// throw an 403 error
_webapp.get('/my403error', function(req, res, next){
    var myError = new Error();
    myError.status = 403;
    next(myError);
});

// use http error pages handler (final statement!)
_httpErrorPages(_webapp);

// start service
_webapp.listen(8888);

Apache Httpd 2.x supports custom error-pages using multiple ErrorDocument directives.

File: httpd.conf or .htaccess

Example - assumes HttpErrorPages are located into your document root /var/www/...docroot../ErrorPages.

ErrorDocument 400 /ErrorPages/HTTP400.html
ErrorDocument 401 /ErrorPages/HTTP401.html
ErrorDocument 403 /ErrorPages/HTTP403.html
ErrorDocument 404 /ErrorPages/HTTP404.html
ErrorDocument 500 /ErrorPages/HTTP500.html
ErrorDocument 501 /ErrorPages/HTTP501.html
ErrorDocument 502 /ErrorPages/HTTP502.html
ErrorDocument 503 /ErrorPages/HTTP503.html

Lighttpd supports custom error-pages using the server.errorfile-prefix directive.

File: lighttpd.conf

Example - assumes HttpErrorPages are located into /var/www/ErrorPages/.

server.errorfile-prefix = "/var/www/ErrorPages/HTTP"

To customize the pages, you can edit the template.phtml file and add your own styles. Finally run the generator-script. If you wan't to add custom pages/additional error-codes, just put a new entry into the pages.php file. The generator-script will process each entry and generates an own page.

Custom Error-Codes used by e.g. CloudFlare

// webserver origin error
'520' => array(
    'title' => 'Origin Error - Unknown Host',
    'message' => 'The requested hostname is not routed. Use only hostnames to access resources.'
),

// webserver down error
'521' => array (
    'title' => 'Webservice currently unavailable',
    'message' => "We've got some trouble with our backend upstream cluster.\nOur service team has been dispatched to bring it back online."
)

• Install packages using npm or yarn and have php in your executable path* Used Naming-Scheme: HTTP#CODE#.html (customizable by editing the config.ini) To generate the static html pages, run the generator.php script:

npm run generate-php

All generated html files are located into the dist/ directory by default.

To rebuild the LESS files run the :

npm run generate-css

npm run generate

Modify the assets/Layout.less to make your own design styles (Make sure to run build scripts after editing the files)

It's possible to change the basic configuration without modifying the generator script. Just change the following variables within the config.ini.

You can also specify a custom configuration file by passing it as first argument to the generator script php generator.php path/myconfig.ini

config.ini

[global]

; Output Filename Scheme - eg. HTTP500.html
scheme='HTTP%d.html'

; Output dir path
output_dir="docs/"

; Footer content (HTML Allowed)
footer = "Technical Contact: <a href="mailto:[email protected]">[email protected]</a>"

HttpErrorsPages is OpenSource and licensed under the Terms of The MIT License (X11) - your're welcome to contribute