When managing a website, there is many scenario we need to show the maintenance page to the end users. The cases might be when the website is upgrading, or facing some technical problems, or in development, etc. In this short tutorial, I will show how to redirect to maintenance page with htaccess configuration. There is also a sample maintenance page so that you can simply copy and paste to your website 🙂
To redirect all traffic to the maintenance page
Your .htaccess page can be as follows:
[bash]<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/support/maintenance\.html$
RewriteRule ^(.*)$ https://www.YOURDOMAIN.com/support/maintenance.html [R=307,L]
</IfModule>
[/bash]
To redirect all traffic to the maintenance page excepts your current IP
First, you will need to know your current IP address to be able to add it to the exclusion rule. Go to http://canyouseeme.org/ to get this information. Assume that 111.222.333.444 is your current IP address. Your .htaccess page can be as follows:
[bash]<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REMOTE_ADDR} !^111\.222\.333\.444
RewriteCond %{REQUEST_URI} !^/support/maintenance\.html$
RewriteRule ^(.*)$ https://www.YOURDOMAIN.com/support/maintenance.html [R=307,L]
</IfModule>
[/bash]
A sample maintenance.html page
[html]<!doctype html>
<html>
<head>
<title>Site Maintenance</title>
<style>
body { text-align: center; padding: 150px; }
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>
</head>
<body>
<article>
<h1>We’ll be back soon!</h1>
<div>
<p>Sorry for the inconvenience but we’re performing some maintenance at the moment. If you need to you can always <a href="mailto:[email protected]" >contact us</a>, otherwise we’ll be back online shortly!</p>
<p>The COMPANY</p>
</div>
</article>
</body>
</html>[/html]
