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:

  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

Need to Move Your Router’s Existing DHCP IP Reservations to A New Router ? Try Uproot – a Static Lease Conversion Utility

I just released a new open source project on github called Uproot. What is Uproot…

2 weeks ago

Keyboard Browser Navigation Nirvana – Must Have Tools for Keyboard Ninjas

Keyboard Shortcuts Recently I've been coding quite a bit (working on a dart command line…

4 weeks ago

Using pfSense on VirtualBox for Windows using only One Virtual Machine

pfSense on VirtualBox I've been experimenting with pfSense (firewall software you can use for DIY…

2 months ago

Firefox – Where did my pinned tabs go ?

Firefox Pinned Tabs Firefox provides the ability to "pin" a tab, so it stays in…

2 months ago

Creating a Shortcut to Windows Terminal (Or Any Other App That Doesn’t Show Shortcut Option)

Weirdly, Windows Terminal does not allow you to create a shortcut - there's no obvious…

6 months ago

Simplest Wireguard Setup Ever

Wireguard Wireguard is the newest way to setup a VPN for your home servers. What…

7 months ago