Waarom zou je een onderhoudspagina instellen? Soms is het handig om een website tijdelijk af te schermen voor bezoekers. Bijvoorbeeld wanneer je achter de schermen bezig bent met het bijwerken van je site. In dit voorbeeld laten we zien hoe je dat doet.
In dit voorbeeld laten we zien hoe je je website in een onderhoudsmode kunt zetten, op Windows Server en op Linux. In Windows Server maak je gebruik van een web.config
-bestand, in Linux van een .htaccess
.
Daarnaast bevat dit voorbeeld een onderhoud.php
-bestand met de melding die getoond wordt aan bezoekers. Pas de tekst en vormgeving gerust naar jouw smaak aan, want naast het bestand onderhoud.php
worden bestanden met de extensies .css
, .gif
, .jpg
, .jpeg
en .png
uitgesloten van herschrijven. Dit betekent dat je deze bestanden daarom ook kunt gebruiken, zolang ze maar in de map www staan.
Let op: in dit voorbeeld gaan we ervan uit dat 203.0.113.15 jouw IP-adres is. Vervang dit door jouw echte IP.
De beide bestanden (onderhoud.php en web.config of .htaccess) plaats je in de map /www
van jouw site. Ondertussen kun jij wél alle pagina’s bekijken vanaf jouw eigen IP-adres.
onderhoud.php:
<?php header($_SERVER["SERVER_PROTOCOL"]." 503 Service Unavailable", true, 503); ?> <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <meta name="robots" content="NOINDEX,NOFOLLOW"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website tijdelijk in onderhoud</title> <style> html { font-size: 100%; } .maintenance__body { margin: 0; font: 1em/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #f4f4f4; color: #555; } .maintenance__container { padding: 2.8em 1em; margin: auto; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; } .maintenance__header { margin: 0 0 .7em; font-size: 2em; font-weight: 400; line-height: 1.2; } .maintenance__paragraph { margin: 0 0 1.4em; } @media (min-width: 48em) { .maintenance__container { max-width: 28em; padding-left: 2em; padding-right: 2em; margin-top: 7em; } } </style> </head> <body class="maintenance__body"> <div class="maintenance__container"> <h1 class="maintenance__header">Website tijdelijk in onderhoud</h1> <p class="maintenance__paragraph">Sorry, we werken op dit moment hard aan de website. Binnenkort is die gewoon weer beschikbaar. We zien u graag snel weer terug!</p> </div> </body> </html> <?php exit; ?>
Linux Apache .htaccess
Een eigen onderhoudspagina kun je instellen door de onderstaande code te plakken in een .htaccess
-configuratiebestand:
RewriteEngine on RewriteCond %{REMOTE_ADDR} !^203.0.113.15$ RewriteCond %{REQUEST_URI} !^/onderhoud\.php$ RewriteCond %{REQUEST_URI} !\.(css|gif|jpe?g|js|png)$ RewriteRule .? /onderhoud.php [L]
Windows Server IIS web.config
Plaats de volgende XML-code in een web.config
-bestand binnen de node system.webServer, om een eigen onderhoudspagina in te stellen.
<rewrite> <rules> <rule name="Onderhoudspagina" stopProcessing="true"> <match url=".?" ignoreCase="false" /> <conditions> <add input="{REMOTE_ADDR}" pattern="^203.0.113.15$" ignoreCase="false" negate="true" /> <add input="{URL}" pattern="^/onderhoud\.php$" ignoreCase="false" negate="true" /> <add input="{URL}" pattern="\.(css|gif|jpe?g|js|png)$" ignoreCase="false" negate="true" /> </conditions> <action type="Rewrite" url="/onderhoud.php" /> </rule> </rules> </rewrite>