Comment créer une page de maintenance (index.html) pour son site web
“La citation du jour : Rien ne sert de courir si tu es déjà en retard.”
Quand on gère un site web, il arrive un moment où il faut faire des travaux : mise à jour, changement de design, nettoyage des contenus ou corrections techniques. Et dans ces moments-là, il est important de ne pas laisser les visiteurs face à un site cassé ou incomplet. La solution est simple : créer une page de maintenance.
Une page de maintenance est une page temporaire qui remplace ton site pendant les travaux. Elle permet d’informer les visiteurs que le site reviendra bientôt, tout en gardant une image propre et professionnelle.
Créer un fichier index.html
La méthode la plus simple consiste à créer un fichier nommé index.html. C’est ce fichier que les navigateurs affichent en priorité lorsqu’on arrive sur un site web.
Tu peux le créer avec un simple éditeur de texte comme Notepad, VS Code, le bloc notes ou tout autre éditeur.
Ensuite, tu ajoutes une structure de base en HTML. Voici un exemple simple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Radiblog en maintenance</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
height: 100vh;
color: #fff;
text-align: center;
background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80') no-repeat center center fixed;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: brightness(0.7);
}
h1 {
font-size: 3em;
color: #FFEB3B;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
p {
font-size: 1.3em;
margin: 15px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
#countdown {
font-size: 2.2em;
margin: 20px 0;
color: #FFFFFF;
text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}
.btn {
display: inline-block;
padding: 14px 28px;
background-color: #FF5722;
color: #fff;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s;
margin-top: 20px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}
.btn:hover {
background-color: #E64A19;
}
.social-icons {
display: flex;
gap: 20px;
margin-top: 25px;
justify-content: center;
}
.social-icons a svg {
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<h1>Radiblog fait peau neuve !</h1>
<p>Quelques réglages, un brin de ménage et des améliorations sont en cours.</p>
<p>Je reviens très vite avec du contenu tout frais et de belles surprises !</p>
<div id="countdown">Chargement du compte à rebours...</div>
<a href="mailto:contact@radiblog.fr" class="btn">M’écrire un message</a>
<div class="social-icons">
<!-- Facebook -->
<a href="https://www.facebook.com/LeblogdeRadiblog/" target="_blank" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="#ffffff" d="M279.14 288l14.22-92.66h-88.91V127.56c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S293.64 0 262.43 0c-73.1 0-121 44.38-121 124.72V195.3H89.09V288h52.36v224h100.2V288z"/>
</svg>
</a>
<!-- X (Twitter) -->
<a href="https://x.com/Radiblog" target="_blank" aria-label="X (Twitter)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227">
<rect width="1200" height="1227" rx="200" fill="#fff"/>
<path d="M337 300h180l165 224 168-224h175L727 634l284 393H837L660 790 480 1027H310l281-390L337 300Z" fill="#000"/>
</svg>
</a>
</div>
<script>
const deadline = new Date("2025-07-10T00:00:00").getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance = deadline - now;
if (distance < 0) {
document.getElementById("countdown").innerHTML = "C'est reparti !";
clearInterval(countdownInterval);
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML =
`Dans moins de ${days} jour${days !== 1 ? "s" : ""} ${hours} heure${hours !== 1 ? "s" : ""} ${minutes} minute${minutes !== 1 ? "s" : ""} ${seconds} seconde${seconds !== 1 ? "s" : ""}`;
}
const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</body>
</html>
Ce code affiche une page très simple avec un message d’information.
Ajouter un peu de style
A vous de modifier tout ce qui concerne Radiblog par vos propres infos.
Tu peux centrer le texte, ajouter une image de fond et améliorer la présentation pour rendre la page plus professionnelle.
Mettre la page sur ton site
Une fois ton fichier prêt, il faut le mettre en ligne. Si ton site est hébergé chez un fournisseur comme OVH ou o2switch, tu dois déposer ton fichier dans le dossier principal du site (souvent appelé public_html ou www).
Si tu utilises un logiciel FTP comme FileZilla, il suffit de glisser-déposer ton fichier index.html dans ce dossier.
Important : si un ancien site existe déjà, pense à sauvegarder l’ancien fichier avant de le remplacer.
Astuce pratique
Pour éviter de perdre ton ancien site, tu peux simplement renommer ton fichier actuel en index_old.html. Ensuite, tu mets ta page de maintenance en index.html. Comme ça, tu peux revenir en arrière facilement.
Conclusion
Créer une page de maintenance est une étape simple mais essentielle pour garder un site propre et professionnel pendant les travaux. En quelques minutes, tu peux informer tes visiteurs et améliorer ton image en ligne.
Et surtout… pendant que la page de maintenance est affichée, tu travailles tranquillement sur les nouveautés 😉
Une fois votre fichier index.html en ligne, la page de maintenance de Radiblog s’affichera automatiquement comme dans l’exemple ci-dessous.
