{{ code }}
1095 |{{ message }}
1096 |Unknown
1109 |Working
1139 |Unknown
1160 |What happened?
1165 |{{ description }}
1166 |What can I do?
1169 |Please try again in a few minutes
1170 |├── .github └── workflows │ └── build.yml ├── .gitmodules ├── LICENSE ├── README.md ├── dark.gif ├── light.gif └── main.html /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build Error Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - name: Checkout repository 17 | uses: actions/checkout@v3 18 | with: 19 | submodules: true 20 | 21 | - name: Set up Go environment 22 | uses: actions/setup-go@v3 23 | with: 24 | go-version: "1.23" # You can change this to the version you need 25 | 26 | - name: Copy main.html to templates directory 27 | run: | 28 | rm -rf ./error-pages/templates/*.html 29 | cp main.html ./error-pages/templates/main.html 30 | 31 | - name: Run go command to build error pages 32 | run: | 33 | cd error-pages 34 | go run ./cmd/error-pages build --add-template=templates/main.html --index 35 | 36 | - name: Archive 37 | run: | 38 | mkdir ./out 39 | zip -r ./out/error-page.zip ./error-pages/main 40 | 41 | - name: upload artifact 42 | uses: actions/upload-artifact@v4 43 | with: 44 | name: error-pages-static 45 | path: ./out 46 | if-no-files-found: error 47 | retention-days: 7 48 | 49 | - name: Ready to deploy 50 | run: | 51 | mkdir ./gh-pages 52 | mkdir ./gh-pages/main 53 | cp -r ./error-pages/main/* ./gh-pages/main/ 54 | cp ./error-pages/index.html ./gh-pages/index.html 55 | - uses: peaceiris/actions-gh-pages@v4 56 | with: 57 | github_token: ${{ secrets.GITHUB_TOKEN }} 58 | publish_dir: ./gh-pages 59 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "error-pages"] 2 | path = error-pages 3 | url = https://github.com/tarampampam/error-pages 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 ✨Shevon・Kuan✨ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nginx-error-page 2 | 3 | Yet another error-page for nginx. Clone this repo and use https://github.com/tarampampam/error-pages to generate your own error pages. 4 | 5 | This theme is modified from tarampampam/error-pages/templates/connections. Thanks to the author for the inspiration. 6 | 7 | ## Final result 8 | 9 | Demo [here](https://shevonkuan.github.io/nginx-error-page/) 10 | 11 |  12 |  13 | 14 | ## Known issues 15 | 16 | - Due to significant differences in the implementation of the `mix-blend-mode: hardlight` CSS property between Safari and Chrome, large color blocks appear instead of gradients in Safari. 17 | - It consumes a lot of GPU computing resources, and I don't know what to do. Seeking guidance from experts. 18 | - For ease of integration with nginx to record actual request information, nginx is used to string replacement (see the instructions in the usage section). 19 | 20 | ## Features 21 | 22 | - [x] Support multiple languages 23 | - [x] Support multiple platforms 24 | - [x] Support dark mode 25 | - [x] Support showing nginx request information 26 | - [x] Rich interactive effects 27 | - [x] Highly customizable 28 | - [x] No additional assets required 29 | - [x] Lightweight and fast 30 | 31 | ## Usage 32 | 33 | ### Use as an template for [tarampampam/error-pages](https://github.com/tarampampam/error-pages) 34 | 35 | 1. Download `main.html` 36 | 2. Clone [tarampampam/error-pages](https://github.com/tarampampam/error-pages) 37 | 3. Add `main.html` to `./error-pages/templates/` directory. 38 | 4. Follow the instructions in the [tarampampam/error-pages](https://github.com/tarampampam/error-pages) 39 | 40 | ### Use static files for nginx 41 | 42 | 1. Fork this repo. 43 | 2. Inintialize the submodules. 44 | ```bash 45 | git submodule update --init --recursive 46 | ``` 47 | 3. Edit the `index.html` file in the `src` directory to customize your error page.(optional) 48 | 4. Use github Actions to generate static files. 49 | 5. Download the generated static files from the `gh-pages` branch or the artifact of the Actions. 50 | 6. Copy the static files to the directory eg. `/var/www/error-pages/`. 51 | 7. Locate to the NGINX config directory, usually `/etc/nginx/` or `/usr/local/nginx/conf/`. 52 | 8. Add a config file `error_pages.conf` in any directory, eg. `/etc/nginx/func.d/error_pages.conf`.(Ensure your nginx was built with `ngx_http_sub_module` in order to replace the strings listed below. If you use RHEL (including fedora, centos, etc.), you can enable the copr repository `dnf copr enable @shevon/nginx` to get the latest nginx version with the `ngx_http_sub_module` module.) 53 | 54 | ```nginx 55 | # error_pages.conf 56 | error_page 400 401 403 404 405 407 408 409 410 411 412 413 416 418 429 500 502 503 504 505 @error_page; 57 | 58 | location @error_page { 59 | root /var/www/error-pages/; 60 | set $error_file /$status.html; 61 | rewrite ^ $error_file break; 62 | sub_filter '%time_local%' '$time_local'; 63 | sub_filter '%request%' '$request'; 64 | sub_filter '%request_id%' '$request_id'; 65 | sub_filter '%remote_addr%' '$remote_addr'; 66 | sub_filter '%host%' '$host'; 67 | sub_filter '%http_referer%' '$http_referer'; 68 | sub_filter '%request_time%' '$request_time'; 69 | sub_filter '%upstream_response_time%' '$upstream_response_time'; 70 | sub_filter '%http_user_agent%' '$http_user_agent'; 71 | sub_filter '%server%' 'nginx/$nginx_version'; 72 | } 73 | ``` 74 | 75 | 9. Include the config file in the `server block to replace its error pages` 76 | 77 | ```nginx 78 | # nginx.conf 79 | # For more information on configuration, see: 80 | # * Official English Documentation: http://nginx.org/en/docs/ 81 | # * Official Russian Documentation: http://nginx.org/ru/docs/ 82 | 83 | user root; 84 | worker_processes auto; 85 | error_log /var/log/nginx/error.log; 86 | pid /run/nginx.pid; 87 | 88 | # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. 89 | include /usr/share/nginx/modules/*.conf; 90 | 91 | events { 92 | worker_connections 1024; 93 | } 94 | 95 | http { 96 | sendfile on; 97 | tcp_nopush on; 98 | tcp_nodelay on; 99 | keepalive_timeout 65; 100 | types_hash_max_size 4096; 101 | 102 | include /etc/nginx/mime.types; 103 | include brotli_params; 104 | default_type application/octet-stream; 105 | 106 | include /etc/nginx/conf.d/*.conf; 107 | server { 108 | listen 443 ssl; 109 | http2 on; 110 | server_name shevon.is-a.dev; 111 | root /var/www/shevon/public; 112 | include ssl/shevon.is-a.dev; 113 | include /etc/nginx/func.d/error_pages.conf; # add this line 114 | location / { 115 | root /var/www/shevon/public; 116 | } 117 | } 118 | } 119 | ``` 120 | -------------------------------------------------------------------------------- /dark.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShevonKuan/nginx-error-page/6d0e46622de823299f087cae36c884d9d67c543f/dark.gif -------------------------------------------------------------------------------- /light.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShevonKuan/nginx-error-page/6d0e46622de823299f087cae36c884d9d67c543f/light.gif -------------------------------------------------------------------------------- /main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |{{ message }}
1096 |Unknown
1109 |Working
1139 |Unknown
1160 |{{ description }}
1166 |Please try again in a few minutes
1170 |