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>