Skip to content

Instantly share code, notes, and snippets.

@CurtisL

CurtisL/.htaccess

Last active June 12, 2024 09:21
Show Gist options
  • Save CurtisL/ecacbd5392099389de484f0778312a6e to your computer and use it in GitHub Desktop.
Save CurtisL/ecacbd5392099389de484f0778312a6e to your computer and use it in GitHub Desktop.
Download ZIP
Better Maintenance Mode .htaccess rules
Raw
.htaccess
# BEGIN MAINTENANCE MODE
# ADD your IP address to gain access. Local IPS for local testing
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REMOTE_ADDR} !^192\.168\.0\.0
RewriteCond %{REMOTE_ADDR} !^127\.0\.0\.1
RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f
RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f
RewriteCond %{SCRIPT_FILENAME} !maintenance.html
RewriteRule ^.*$ /maintenance.html [R=503,L]
ErrorDocument 503 /maintenance.html
Header Set Cache-Control "max-age=0, no-store"
</IfModule>
# END MAINTENANCE MODE
Raw
README.md

Maintenance Mode

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REMOTE_ADDR} !^192\.168\.0\.0
RewriteCond %{REMOTE_ADDR} !^127\.0\.0\.1
RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f
RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f
RewriteCond %{SCRIPT_FILENAME} !maintenance.html
RewriteRule ^.*$ /maintenance.html [R=503,L]
ErrorDocument 503 /maintenance.html
Header Set Cache-Control "max-age=0, no-store"
</IfModule>

Create the maintenance.html to appear how you desire. Avoid using resources from the server that is undergoing maintenance. Process images to base64 datauri or an inline SVG if possible. Styles and scripts should be inline.

To enable maintenance mode, create a file called maintenance.enable, it just needs to exist and can be empty. Thats it!

To disable maintenance mode, either remove or rename maintenance.enable.

.htaccess Breakdown

1. Turn on rewrite engine

RewriteEngine On

2. Don't enable for specific IP addresses

Add any IP addresses that need to gain access behind maintenance mode.

RewriteCond %{REMOTE_ADDR} !^192\.168\.0\.0
RewriteCond %{REMOTE_ADDR} !^127\.0\.0\.1

3. Make sure the maintenance files exist

Both the maintenance.html and maintenance.enable need to exist.

Adding, removing or renaming maintenance.enable will be how you turn maintenance mode on/off.

RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f
RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f

4. Don't apply rules to the maintenance page

Doing our best to avoid a redirect loop

RewriteCond %{SCRIPT_FILENAME} !maintenance.html

5. Redirect and 503 the maintenance page itself

503: The server is currently unable to handle the request due to a temporary overload or scheduled maintenance, which will likely be alleviated after some delay.

This is the most appropriate status code to use for maintenance according to:

RewriteRule ^.*$ /maintenance.html [R=503,L]
ErrorDocument 503 /maintenance.html

6. Avoid caching the maintenance page

Header Set Cache-Control "max-age=0, no-store"
Raw
maintenance.enable
If this file exists as "maintenance.enable" maintenance mode will be enabled. Go figure :)
Raw
maintenance.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Down for maintenance</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #999;
background: -webkit-radial-gradient(center, ellipse cover, #fff 0%, #999 100%);
background: -webkit-radial-gradient(center, ellipse, #fff 0%, #999 100%);
background: -o-radial-gradient(center, ellipse, #fff 0%, #999 100%);
background: radial-gradient(ellipse at center, #fff 0%, #999 100%);
color: #000;
font-family: Helvetica, Arial, sans-serif;
}
main {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
h1 {
text-transform: uppercase;
color: #000;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<main>
<div>
<!-- Use a datauri base64 encoded image as the logo -->
<h1>Down for maintenance</h1>
<p>We’ll be back shortly</p>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment