Redirect to maintenance page with htaccess

Apache-htaccessWhen 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:

<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>

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:

<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>

A sample maintenance.html page

<!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>

Leave a Reply