Skip to content

Instantly share code, notes, and snippets.

@thevickypedia
Last active March 23, 2024 01:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thevickypedia/d2e66cb5f3912ad50e34965b48a0de7c to your computer and use it in GitHub Desktop.
Save thevickypedia/d2e66cb5f3912ad50e34965b48a0de7c to your computer and use it in GitHub Desktop.
Error page for Nginx

Preferred File Location

/var/www/html

Assign www-data as owner

sudo chown www-data:www-data /var/www/html/error.html

Set permissions to read and write

sudo chmod 644 /var/www/html/error.html
HTML Content
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>NGINX: Advanced Load Balancer, Web Server, & Reverse Proxy</title>
    <meta property="og:type" content="VideoStreaming">
    <meta name="keywords" content="Nginx, Load Balancer, Web Server, Reverse Proxy">
    <meta name="author" content="Vignesh Rao">
    <link property="og:image" rel="icon" href="https://thevickypedia.github.io/open-source/images/logo/nginx.ico">
    <link property="og:image" rel="apple-touch-icon" href="https://thevickypedia.github.io/open-source/images/logo/nginx.png">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
        * {
            font-family: 'Ubuntu', 'PT Serif', sans-serif;
        }
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        :is(h1, h2, h3, h4, h5, h6) {
            text-align: center;
            color: #F0F0F0;
        }

        button {
            width: 100px;
            margin: 0 auto;
            display: block;
        }

        body {
            background-color: #151515;
        }

        .corner {
            position: absolute;
            top: 3%;
            right: 2%;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
<div class="corner">
    <i><span id="span"></span></i>
</div>
<h2 style="margin-top:5%">Server Error</h2>
<h3>Unable to connect to the server ¯\_(ツ)_/¯ </h3>
<p>
    <img src="https://thevickypedia.github.io/open-source/images/gif/shattered_fusion.gif"
        onerror="this.src='https://vigneshrao.com/open-source/images/gif/shattered_fusion.gif'"
        width="200" height="200" alt="Image" class="center">
</p>
<button style="text-align:center" onClick="window.location.reload()">RETRY</button>
<br>
<button style="text-align:center" onClick="alert('Nothing to do here!!\n\nSit back and relax while the server is napping.');">HELP
</button>
<h4>Click <a href="https://vigneshrao.com/contact">HERE</a> to reach out.</h4>
<script>
    function displayTimer() {
        let seconds = 60;
        let display = document.getElementById('span');
        display.innerHTML = "Auto-refresh in: " + seconds + "s";

        let countdown = setInterval(function () {
            seconds--;
            display.innerHTML = "Auto-refresh in: " + seconds + "s";
            if (seconds <= 0) {
                clearInterval(countdown);
            }
        }, 1000);
    }

    displayTimer(); // Start the countdown initially

    setInterval(function () {
        window.location.reload();
    }, 60000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment