Before initial go-live or during maintenance of a website, we would like the website to not be visible to outside users, but at the same time it should be accessible to internal users for verifying deployments etc.
This can be elegantly handled for users using a custom page displaying the message 'website is temporarily down'. In IIS, there is a feature which makes this task much easier. We can simply create an 'App_offline.htm' page and that will display the custom message for all routes. More information can be found at
https://activedirectoryfaq.com/2015/01/iis-maintenance-page-app_offline-htm/
https://docs.microsoft.com/en-us/aspnet/web-forms/overview/deployment/advanced-enterprise-web-deployment/taking-web-applications-offline-with-web-deploy
However for search engines and other bots, it helps if we return a '503 Service Unavailable' message. More general information about a correct (and elegant) way to handle maintenance mode can be found at https://moz.com/blog/how-to-handle-downtime-during-site-maintenance.
In my case I wanted to:
- Show '503 Service Unavailable' message to search engines / bots
- Add retry after header
- Display 'Site is temporarily available' message to outside users
- Make the site accessible to internal users
To achieve all of the above in an IIS website, web.config file can be modified like so:
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Site Unavailable" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{REMOTE_ADDR}" pattern="192\.168\.1\.[0-9]{1,3}" negate="true" />
</conditions>
<action type="CustomResponse" statusCode="503" subStatusCode="0" statusReason="Site Unavailable" statusDescription="Down for maintenance" />
</rule>
</rules>
</rewrite>
<httpErrors errorMode="Custom">
<error statusCode="503" path="503.htm" responseMode="File" />
</httpErrors>
</system.webServer>
</configuration>
and a custom 503.htm page can be added to the site:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maintenance in progress...</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">
<!--
.center {
width: 715px;
padding-top: 80px;
margin-left: auto;
margin-right: auto;
}
.offline {
font-family: "Lato", Arial, Helvetica, sans-serif;
font-size: 24px;
}
.signoff {
font-size: 14px;
}
-->
</style>
</head>
<body>
<div class="offline center">
<p>Our website is currently undergoing maintenance.</p>
<p>We are working quickly behind the scenes and the site will be available again very shortly.</p>
<p class="signoff">Thank you for your patience.</p>
</div>
</body>
</html>
