Categories: Web Development

A Quick and Dirty Web Maintenance Page Using .htaccess

Sometimes when working on a web site you need a quick and dirty “This Site is Down” Maintenance page. WordPress or other similar software may have this feature built-in or through a plugin, but sometimes you may need to put up a page while moving files around using ssh or scp/sftp/ftps.

If you use Apache or an Apache compatible web server that uses .htaccess, the easiest way to generate a maintenance page is to combine the deny/allow directives with a custom 403 page which can be written directly in .htaccess. The directives will allow only your IP address to work on and view the web site while everyone else will see the maintenance page.

Single File Web Maintenance Mode

This method requires no php or other separate scripts, and no redirects. Enabling the mode is simple – just remove (maintenance mode) or add (go live) the hash comment from two lines ( 21 and 23 in the example below).

Editing Htaccess File

Follow these simple steps:

Using Winscp, ssh, or other similar utility login to your website server, and open .htaccess file located in your web root.

Add the following lines to the top of the .htaccess file:

order deny,allow 
################################### 
# Begin Maintenance Mode Directives 
##################################### 
# Make sure to put the background image in your document root 
<Files background.jpg> 
order allow,deny 
allow from all 
</Files> 

# Insert Your workstation ip here. Replace XXX.XXX.X.XXX with your ip address 
allow from  XXX.XXX.X.XXX  

# To enter maintenance mode, uncomment the following 2 lines. The second long "ErrorDocument" line contains a full html page compressed together in one line with no carriage returns (it's just being word-wrapped in the below example). 

# deny from all 

# ErrorDocument 403 "<html><header><style> body { font: normal normal 24px/60px Georgia, serif; color: white; background-size: 100%; background-repeat: no-repeat; background-image: url('background.jpg'); background-color: black;}</style></header><body><div style= ' box-shadow: 10px 10px #000000; border: 2px solid black; border-radius: 25px; margin: auto; background: #ff5733; padding: 20px; width: 70%;' > <h2 ><center>Joe's Computer Shop</center></h2> <h3><center>Your Local Computer Fix-It Place</center></h3>This Website is Down for Maintenance. Please come back later.  We are sorry for any inconvenience.</div> <div style= ' box-shadow: 10px 10px #000000; border: 2px solid black; border-radius: 15px; margin-left: 10px; margin-top: 100px; background: #000000; padding: 20px; width: 14%; font: normal 14px Georgia, serif;' > Joe's Computer Shop <br/>123 Main Street</br> New York, NY 11111<br/> 800-888-8888<br/> </div><a style='background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px; margin-top: 20px;' href='https://unsplash.com/@herlifeinpixels?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' >Hannah Wei</a></body></html>"

Ask Google “What is my ip address ?“. This is your workstation ip address, select and copy it.
Replace XXX.XXX.XX.XXX with the IP address you copied in the prior step.
Edit the example to put in your own html code and save whatever picture you’d like to use as your background as “background.jpg” in your web root. Make sure any quotes on the ErrorDocument line (line 23 in the example) are single quotes except the outer ones. Also the entire ErrorDocument line should all be on one line with no carriage returns (it will be displayed in the example as multiple lines but that’s just the presentation for this post, the code itself is all one line).
Save the .htaccess file.
That’s it. To enable maintenance mode, uncomment line 21 “deny from all” and line 23 “ErrorDocument 403”. To disable maintenance mode and go “live” comment those same two lines out.
Note that if you get an “Internal Server” error you have a syntax error in your .htaccess file. Fix and try again.