Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
[email protected]
+88 (0) 101 0000 000
Follow Us

Client Portal (866) 963-0424

How to Make a Maintenance Page for Your Site

When you need to work on your website, but do not want clients who visit the site to have problems while the site is being worked on. A maintenance page is the perfect way to take down the site, while still providing your clients with information. You can put a phone number to call, email address to contact, or even information on how long the maintenance is expected to be. The method outlined here should work on most content management systems, as it uses the web server configurations.

If you are wanting to test modifications, we recommend having a separate staging subdomain to test changes. Having a staging subdomain allows you to verify that modifications will work before you attempt to apply them to the live web site. If a test goes horribly wrong, you would have to restore the site from a backup.

Creating the Page

You first need to create the page, you can use website designing software to create a HTML page or you can find templates online. For this example, we are going to use this sample from github.

(embed <script src=”https://gist.github.com/pitch-gist/2999707.js“></script> if possible)

Simply replace a few details and you have a maintenance page. Replace “mailto:#” with “mailto:[email protected]” and replace “The Team” with your company name.

If you wish to add a logo, you can add the following after the “<article>” tag.

<img src=’logo.png’ style=’width: 300px; margin: 0 auto; display: block;’ />

After you make modifications, the page will look something like the following.

Applying the Maintenance Page

Applying the maintenance page depends on your environment. If you are using a cPanel or Apache based server, you will use a .htaccess modification to enable and disable the maintenance page. If you are using a Nginx based server, you will have to modify the vhost configuration for your site. I will outline both environments in detail below.

The first step is to place the maintenance page and any additional resources (such as a logo) into the site document root. For this example, we will have the maintenance page as HTML named “maintenance.html” and one resource file named “logo.png” for the logo image. You will need to know all required resources and where they exist to whitelist access to them.

Apache

Apache has support for “.htaccess” files to apply configurations to a directory and its subdirectories. This feature is powerful for times when you do not have access to modifying a vhost configuration, as you will be able to modify at least some settings for your site. In this case, you will be using it to force redirection of all pages on the site to the maintenance page. You can add rules to allow your IP address to bypass the maintenance page as we will explain further down.

Edit the existing “.htaccess” file (if one does not exist, make it), and add to the top of the file the following configuration.

<IfModule mod_rewrite.c>

  RewriteEngine on

  #RewriteCond %{REMOTE_ADDR} !^203\.0\.113\.94$

  RewriteCond %{REQUEST_URI} !/maintenance.html$ [NC]

  RewriteCond %{REQUEST_URI} !/logo.png$ [NC]

  RewriteRule ^ /maintenance.html [PT,END]

</IfModule>

Add additional rewrite conditions (the RewriteCond lines) for other resources which are needed to be accessed by the maintenance page. The “PT” flag has mod_rewrite just pass through the page allowing clients to just refresh the page when maintenance is done to get the page they were trying to access. If you wish to redirect them instead, you can replace the “PT” flag with “R=302” to have mod_rewrite use a 302 temporary redirect.

To whitelist specific IP addresses to access the site, you can add a condition line like the following and replace the example IP (203.0.113.94) with your own IP address as can be retrieved at http://ip.alphahosting.com if you do not know what it is.

RewriteCond %{REMOTE_ADDR} !^203\.0\.113\.94$

As the write rule is regular expression (regex), we escape the “.” character as otherwise regex will treat “.” as an any character expression and potentially allow IP addresses you did not intend to allow.

Nginx

There are no document root based include file support for Nginx, so you will need to have access to the Nginx configurations in-order to do a maintenance page like how the example above for Apache. If you do not have access to configurations, you can follow the PHP based option to put the site into maintenance.

Nginx vHost Configuration

The vHost configuration for this is only recommended to use when you need to have the site in maintenance mode. If statements in Nginx are considered to be evil, and should not normally be used. But to complete the task at hand, it works well.

Near the top of your vHost, paste the following code and modify it to your needs.

set $maintenance YES;

if ($request_uri = /maintenance.html) {

set $maintenance NO;

}

if ($request_uri = /logo.png) {

set $maintenance NO;

}

if ($remote_addr = 203.0.113.94) {

set $maintenance NO;

}

if ($maintenance = YES) {

return 302 /maintenance.html;

}

You can add additional if statements for other resources or IP addresses. Replace the IP address (203.0.113.94) with that of your own which you can get from http://ip.alphahosting.com if you do not already know it.

When the configuration is complete, we need to verify that the configuration is following syntax and then reload the configuration. You can check syntax with “nginx -t” and fix any problems specified. If there is no problem, you can then use “nginx -s reload” to tell Nginx to load the new configuration, which should put the site in Maintenance mode.

PHP Based Option

If you do not want to implement a rewrite like the above options mentioned, use this method to use PHP for whitelisting access. This method may not be the fastest method, but it will work no matter what web server you are on. The only downside is that it adds more overhead than the options outlined above.

  1. Copy the “index.php” files to “index.original.php” to keep an original copy for includes and to allow us to undo these steps.
  2. Add the following code to the top of the maintenance HTML file you have created.

<?php

if ($_SERVER[‘REMOTE_ADDR’] == ‘203.0.113.94’) {

require(“index.original.php”);

exit();

}

?>

  1. Replace “203.0.113.94” with your IP address as can be retrieved from http://ip.alphahosting.com if you do not know the IP address.
  2. If you need additional IP addresses, you can add “&& $_SERVER[‘REMOTE_ADDR’] == ‘203.0.113.95’” to the if statement and replace “203.0.113.95” with another IP address.
  3. Upload the maintenance page, replacing “index.php”, to put the site into maintenance.

If you need to take the site out of maintenance, it is as simple as replacing “index.php” with the copy “index.original.php” to restore the original code.