Custom HTTP Error Pages

Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and accessible design with customization and localization support.

Features

• Static pages with simple and responsive design
• Lightweight and fast running
• Extensibility
• Customization
• Localization (i18n)
• Accessibility (a11y)
• Built-in web server config generator (Nginx)

Demo

• 400 Bad Request
• 401 Unauthorized
• 403 Forbidden
• 404 Not Found
• 410 Gone
• 500 Internal Server Error
• 502 Bad Gateway
• 503 Service Unavailable
• 504 Gateway Timeout

Precompiled Packages

If you want to get already precompiled packages, then you can download latest versions from [official website]|(https://sapachev.github.io/error-pages/#precompiled-packages).

How to use

Requirements: installed Node.js 11+

1. Checkout this repository to your local machine
2. Run npm install --production command to install dependencies
3. Run npm run build command to compile error pages and web server configs
4. Copy static html files from dist directory to your server
5. Copy and apply config snippet from dist to your web server configuration (see details below).

Nginx

Nginx config located in /dist/<locale>/nginx-error-pages.conf file and can be copied to /etc/nginx/snippets/ directory. According to this config file, all html pages and their assets must be placed in the /usr/share/nginx/html/error-pages directory. After copying all files you have to update your server configuration with include /etc/nginx/snippets/nginx-error-pages.conf; line.

How to improve default pages

• Extensibility New pages can be added by adding new json files in scr/<locale> directory. The page name must follow to format <HTTP code>.json (<HTTP code> is Number, related to specific HTTP status code). You can put any additional data to json files that you want to display on a page. In case of common variables, you can use thecommon.json file to define them.
• Customization By editing the default theme you can add anything you want. In case if you want to have your own page design, you can create a new theme and apply it by editing config.json file. All assets (images, fonts, etc) must be placed in the @assets directory (note: the @assets name is used to avoid a naming collision with default assets directory name in common cases). By default the mustache.js is used as a template engine and Tailwind as a CSS framework. Entry point of Tailwind styles must be located in themes/<name>/@assets/css/main.twnd.css file. Custom Tailwind theme settings can be added to the theme.tailwind.config.js file located in the root of the theme directory. If you don't want to use Tailwind builder, then it can be disabled by editing the tailwind option in config.js.
• Localization If you need to change default text messages, then you can simply edit existing files insrc/<locale> directory according to your needs. If you want to create your own localization, just simply add a new locale directory and create a set of source files. After new locale adding, change locale property in config.json file, located in a root.

Contributing

You are very welcome to contribute to this project with improvements, localizations, bug fixes and so on.