Update README.md to include usage instructions, known issues, and fea…

…tures for nginx-error-page

README.md

@@ -1,2 +1,105 @@
 # nginx-error-page
-Yet another error-page for nginx
+
+Yet another error-page for nginx. Clone this repo and use https://github.com/tarampampam/error-pages to generate your own error pages.
+
+## Final result
+<img src="light.gif" alt="alt text" style="height:300px;"/>
+<img src="dark.gif" alt="alt text" style="height:300px"/>
+
+## Known issues
+
+-   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.
+-   It consumes a lot of GPU computing resources, and I don't know what to do. Seeking guidance from experts.
+-   For ease of integration with nginx to record actual request information, nginx is used to string replacement (see the instructions in the usage section).
+
+## Features
+-  [x] Support multiple languages
+-  [x] Support multiple platforms
+-  [x] Support dark mode
+-  [x] Support showing nginx request information
+-  [x] Rich interactive effects
+-  [x] Highly customizable
+-  [x] No additional assets required
+-  [x] Lightweight and fast
+## Usage
+
+### Use as an template for [tarampampam/error-pages](https://github.com/tarampampam/error-pages)
+
+1. Download `main.html` 
+2. Clone [tarampampam/error-pages](https://github.com/tarampampam/error-pages)
+3. Add `main.html` to `./error-pages/templates/` directory.
+4. Follow the instructions in the [tarampampam/error-pages](https://github.com/tarampampam/error-pages)
+
+### Use static files for nginx
+
+1. Fork this repo.
+2. Edit the `index.html` file in the `src` directory to customize your error page.(optional)
+3. Use github Actions to generate static files.
+4. Download the generated static files from the `gh-pages` branch or the artifact of the Actions.
+5. Copy the static files to the directory eg. `/var/www/error-pages/`.
+6. Locate to the NGINX config directory, usually `/etc/nginx/` or `/usr/local/nginx/conf/`.
+7. Add a config file `error_pages.conf` in any directory, eg. `/etc/nginx/func.d/error_pages.conf`.
+    ```nginx
+    # error_pages.conf
+    error_page 400 401 403 404 405 407 408 409 410 411 412 413 416 418 429 500 502 503 504 505 @error_page;
+
+    location @error_page {
+        root /var/www/error-pages/;
+        set $error_file /$status.html;
+        rewrite ^ $error_file break;
+        sub_filter '%time_local%' '$time_local';
+        sub_filter '%request%' '$request';
+        sub_filter '%request_id%' '$request_id';
+        sub_filter '%remote_addr%' '$remote_addr';
+        sub_filter '%host%' '$host';
+        sub_filter '%http_referer%' '$http_referer';
+        sub_filter '%request_time%' '$request_time';
+        sub_filter '%upstream_response_time%' '$upstream_response_time';
+        sub_filter '%http_user_agent%' '$http_user_agent';
+        sub_filter '%server%' 'nginx/$nginx_version';
+    }
+    ```
+8. Include the config file in the `server block to replace its error pages`
+    ```nginx
+    # nginx.conf
+    # For more information on configuration, see:
+    #   * Official English Documentation: http://nginx.org/en/docs/
+    #   * Official Russian Documentation: http://nginx.org/ru/docs/
+
+    user root;
+    worker_processes auto;
+    error_log /var/log/nginx/error.log;
+    pid /run/nginx.pid;
+
+    # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
+    include /usr/share/nginx/modules/*.conf;
+
+    events {
+        worker_connections 1024;
+    }
+
+    http {
+        sendfile on;
+        tcp_nopush on;
+        tcp_nodelay on;
+        keepalive_timeout 65;
+        types_hash_max_size 4096;
+
+        include /etc/nginx/mime.types;
+        include brotli_params;
+        default_type application/octet-stream;
+
+        include /etc/nginx/conf.d/*.conf;
+        server {
+            listen 443 ssl;
+            http2 on;
+            server_name shevon.is-a.dev;
+            root /var/www/shevon/public;
+            include ssl/shevon.is-a.dev;
+            include /etc/nginx/func.d/error_pages.conf; # add this line
+            location / {
+                root /var/www/shevon/public;
+            }
+        }
+    }
+    ```