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.

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

Follow these simple steps:

  1. Using Winscp, ssh, or other similar utility login to your website server, and open .htaccess file located in your web root.
  2. 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>"
     
    
  3. Ask Google “What is my ip address ?“. This is your workstation ip address, select and copy it.
  4. Replace XXX.XXX.XX.XXX with the IP address you copied in the prior step.
  5. 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).
  6. Save the .htaccess file.
  7. 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.
  8. Note that if you get an “Internal Server” error you have a syntax error in your .htaccess file. Fix and try again.

Charlie

Share
Published by
Charlie

Recent Posts

Pi-Hole Easy: Using Docker with Macvlan To Block Ads Without Taking Over Your Server

Pi-Hole is a fantastic ad-blocking software that can run on a Raspberry Pi or pretty…

3 hours ago

DIY Covid 19 Masks from A&M University Biomedical Engineering

A team consisting of Texas A&M University faculty and graduate students in the Biomedical Engineering…

3 days ago

Generating a Random Post in WordPress Using Shortcodes Ultimate

Shortcodes Ultimate by Vladimir Anokhin is a popular plugin for Wordpress supplying numerous helpful shortcodes…

1 month ago

How to Get A Year’s Access to Thousands of Top Line Computer Books, Courses, and Live Seminars for $75

O'Reilly Media is that iconic media publisher most well known for its books having covers…

2 months ago

Fixing BCD Boot Problems After a Blue Screen of Death in Windows 10

Occasionally in Windows 10 when a Blue Screen of Death (or "BSOD") occurs similar to…

2 months ago

How to Tell Whether DNS Is Using Local Configuration Files or Router

I've setup Pihole recently which is an in-network DNS server which is designed to block…

2 months ago