bengkelweb baru
Maintenance Mode di Apache

Cara Membuat Maintenance Mode di Apache (SEO-Friendly 503) Menggunakan .htaccess

Blog

Cara Membuat Maintenance Mode di Apache Menggunakan .htaccess (Status 503)

Saat website perlu perbaikan (update, migrasi, perbaikan error 500, atau hardening keamanan), cara paling rapi di server Apache adalah menampilkan halaman maintenance untuk semua pengunjung, sekaligus mengirim HTTP 503 Service Unavailable.
Status 503 penting karena memberi sinyal ke mesin pencari bahwa downtime ini sementara (lebih SEO-friendly dibanding 301/302 atau halaman error biasa).

Di artikel ini, kita akan membuat:

  • file maintenance.html sebagai tampilan “Situs sedang perbaikan”

  • rule .htaccess untuk:

    • mengarahkan semua halaman ke maintenance

    • mengirim status 503

    • menambahkan header no-cache + Retry-After

    • opsi whitelist IP agar admin tetap bisa akses

    • pengecualian asset statis (CSS/JS/logo) dan WordPress admin/login (opsional)

Persiapan

Pastikan kamu punya akses:

  • File Manager cPanel atau FTP/SFTP

  • File .htaccess di root website (biasanya public_html/.htaccess)

Struktur sederhana yang kita pakai:

public_html/
maintenance.html
.htaccess

Langkah 1 — Buat Halaman Maintenance (maintenance.html)

Buat file maintenance.html di root website (misalnya public_html/maintenance.html).

Berikut 1 file HTML maintenance page (tinggal simpan sebagai maintenance.html lalu upload ke hosting). Sudah responsive, ada tombol kontak, auto-refresh opsional, dan countdown opsional.

<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<title>Maintenance - Situs Sedang Dalam Perbaikan</title><!– ====== STYLE ====== –>
<style>
:root{
–bg1:#0b1220;
–bg2:#101b33;
–card:rgba(255,255,255,.06);
–border:rgba(255,255,255,.12);
–text:rgba(255,255,255,.92);
–muted:rgba(255,255,255,.68);
–accent:#7c5cff;
–accent2:#22c55e;
–warn:#f59e0b;
–shadow: 0 20px 60px rgba(0,0,0,.45);
–radius: 18px;
–mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”,“Courier New”, monospace;
–sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, “Apple Color Emoji”,“Segoe UI Emoji”;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family:var(–sans);
color:var(–text);
background:
radial-gradient(900px 500px at 20% 10%, rgba(124,92,255,.30), transparent 60%),
radial-gradient(800px 450px at 80% 20%, rgba(34,197,94,.20), transparent 60%),
linear-gradient(160deg, var(–bg1), var(–bg2));
overflow-x:hidden;
}

Baca Juga :
Tingkatkan Omset Bisnis Anda Sekarang dengan Jasa SEO Profesional

.wrap{
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:28px 16px;
}

.card{
width:min(880px, 100%);
background:var(–card);
border:1px solid var(–border);
box-shadow:var(–shadow);
border-radius:var(–radius);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position:relative;
overflow:hidden;
}

.card::before{
content:“”;
position:absolute;
inset:-2px;
background: linear-gradient(120deg, rgba(124,92,255,.20), rgba(34,197,94,.12), rgba(245,158,11,.12));
filter: blur(24px);
opacity:.85;
pointer-events:none;
}

.inner{
position:relative;
padding:32px;
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:22px;
}

@media (max-width: 820px){
.inner{ grid-template-columns: 1fr; padding:24px; }
}

.badge{
display:inline-flex;
gap:10px;
align-items:center;
padding:8px 12px;
border:1px solid var(–border);
border-radius:999px;
background: rgba(0,0,0,.18);
font-size:13px;
letter-spacing:.2px;
color:var(–muted);
width:fit-content;
}

.dot{
width:10px;height:10px;border-radius:50%;
background: var(–warn);
box-shadow: 0 0 0 6px rgba(245,158,11,.12);
animation:pulse 1.5s ease-in-out infinite;
}

@keyframes pulse{
0%,100%{ transform:scale(1); opacity:1; }
50%{ transform:scale(1.15); opacity:.75; }
}

h1{
margin:14px 0 8px;
font-size: clamp(26px, 3.4vw, 40px);
line-height:1.1;
letter-spacing:-.4px;
}

p{
margin:0 0 14px;
color:var(–muted);
line-height:1.6;
font-size:15.5px;
}

.meta{
display:flex;
flex-wrap:wrap;
gap:10px 12px;
margin-top:10px;
color:var(–muted);
font-size:13px;
}
.meta span{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border:1px solid var(–border);
border-radius:999px;
background: rgba(255,255,255,.03);
}

.progress{
margin-top:16px;
border:1px solid var(–border);
border-radius:999px;
padding:6px;
background: rgba(0,0,0,.18);
}
.bar{
height:10px;
border-radius:999px;
width:38%;
background: linear-gradient(90deg, var(–accent), var(–accent2));
position:relative;
overflow:hidden;
animation: grow 3.6s ease-in-out infinite alternate;
}
.bar::after{
content:“”;
position:absolute;
inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
transform: translateX(-60%);
animation: sheen 1.8s linear infinite;
}
@keyframes sheen{ to{ transform: translateX(160%); } }
@keyframes grow{ from{ width:28%; } to{ width:72%; } }

Baca Juga :
Harga Jasa Pembuatan Website Surabaya: Kenapa “Murah” Bisa Jadi Paling Mahal di Akhir (Panduan Praktisi)

.side{
border:1px solid var(–border);
border-radius: var(–radius);
background: rgba(255,255,255,.03);
padding:18px;
}

.side h2{
margin:0 0 10px;
font-size:16px;
letter-spacing:.2px;
}

.kv{
display:grid;
gap:10px;
margin-top:8px;
font-size:13.5px;
color:var(–muted);
}
.kv .row{
display:flex;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border:1px solid var(–border);
border-radius:12px;
background: rgba(0,0,0,.14);
}
.kv .row strong{
color:var(–text);
font-weight:600;
font-family:var(–mono);
font-size:12.8px;
}

.actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
}
a.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 12px;
border-radius:12px;
border:1px solid var(–border);
text-decoration:none;
color:var(–text);
background: rgba(255,255,255,.05);
transition: transform .08s ease, background .2s ease, border-color .2s ease;
font-size:14px;
min-width: 150px;
flex: 1;
}
a.btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.22);
}
a.btn.primary{
border-color: rgba(124,92,255,.55);
background: rgba(124,92,255,.12);
}

.footer{
border-top:1px solid var(–border);
padding:14px 18px;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:space-between;
align-items:center;
color:var(–muted);
font-size:12.5px;
}

.countdown{
font-family:var(–mono);
color:var(–text);
}

.small{
color:var(–muted);
font-size:12.5px;
line-height:1.45;
margin-top:10px;
}
</style>
</head>

<body>
<div class=“wrap”>
<main class=“card” role=“main” aria-label=“Halaman Maintenance”>
<section class=“inner”>
<!– LEFT –>
<div>
<div class=“badge”><span class=“dot” aria-hidden=“true”></span> Maintenance Mode • Sedang ada peningkatan sistem</div>
<h1>Mohon maaf, situs sedang dalam perbaikan.</h1>
<p>
Kami sedang melakukan pembaruan untuk meningkatkan performa dan keamanan.
Silakan coba kembali beberapa saat lagi.
</p>

<div class=“meta” aria-label=“Informasi singkat”>
<span>⚙️ Status: <b>Maintenance</b></span>
<span>🔄 Auto refresh: <b id=“autoRefreshLabel”>Off</b></span>
<span>🕒 Waktu lokal: <b id=“localTime”>-</b></span>
</div>

<div class=“progress” aria-label=“Indikator progres (animasi)”>
<div class=“bar” aria-hidden=“true”></div>
</div>

<p class=“small” id=“customNote”>
Jika Anda membutuhkan bantuan segera, silakan hubungi kami lewat kontak di samping.
</p>
</div>

<!– RIGHT –>
<aside class=“side” aria-label=“Info tambahan dan kontak”>
<h2>Info & Kontak</h2>

<div class=“kv”>
<div class=“row”>
<span>Perkiraan selesai</span>
<strong id=“etaText”>Belum ditentukan</strong>
</div>
<div class=“row”>
<span>Update terakhir</span>
<strong id=“lastUpdate”>-</strong>
</div>
<div class=“row”>
<span>Ticket/Ref</span>
<strong id=“ticketRef”>MAINT-001</strong>
</div>
</div>

<div class=“actions”>
<!– Ganti nomor WA dan email sesuai kebutuhan –>
<a class=“btn primary” id=“waBtn” href=“https://wa.me/6281234567890” target=“_blank” rel=“noopener”>
💬 WhatsApp
</a>
<a class=“btn” id=“mailBtn” href=“mailto:admin@domainanda.com?subject=Butuh%20Bantuan%20Saat%20Maintenance” >
✉️ Email
</a>
<a class=“btn” id=“igBtn” href=“https://instagram.com/akunanda” target=“_blank” rel=“noopener”>
📷 Instagram
</a>
</div>

<p class=“small”>
Tips: bookmark halaman ini. Jika auto-refresh aktif, halaman akan memuat ulang otomatis.
</p>
</aside>
</section>

<footer class=“footer” aria-label=“Footer”>
<span>© <span id=“year”></span> Nama Brand Anda</span>
<span class=“countdown” id=“countdown”> </span>
</footer>
</main>
</div>

<!– ====== SCRIPT (opsional) ====== –>
<script>
/**
* ====== KONFIGURASI CEPAT ======
* Ubah nilai di bawah ini sesuai kebutuhan Anda.
*/
const CONFIG = {
brandName: “Nama Brand Anda”,
ticketRef: “MAINT-001”,
lastUpdateISO: new Date().toISOString(), // contoh: “2026-01-28T10:00:00+07:00”
etaISO: “”, // contoh: “2026-01-28T23:00:00+07:00” (kosongkan jika tidak ada)
autoRefresh: false,
autoRefreshSeconds: 300, // 5 menit
customNote: “Jika Anda membutuhkan bantuan segera, silakan hubungi kami lewat kontak di samping.”
};

Baca Juga :
Jasa maintenance WordPress yang menyediakan pembaruan keamanan rutin

// Set brand & metadata
document.getElementById(“year”).textContent = new Date().getFullYear();
document.title = `Maintenance – ${CONFIG.brandName}`;
document.getElementById(“ticketRef”).textContent = CONFIG.ticketRef;
document.getElementById(“customNote”).textContent = CONFIG.customNote;

// Local time (update setiap detik)
const localTimeEl = document.getElementById(“localTime”);
setInterval(() => {
const now = new Date();
localTimeEl.textContent = now.toLocaleString(“id-ID”, { dateStyle:“medium”, timeStyle:“medium” });
}, 1000);

// Last update
const lastUpdate = new Date(CONFIG.lastUpdateISO);
document.getElementById(“lastUpdate”).textContent =
isNaN(lastUpdate) ? “-“ : lastUpdate.toLocaleString(“id-ID”, { dateStyle:“medium”, timeStyle:“short” });

// ETA + Countdown (jika etaISO diisi)
const etaTextEl = document.getElementById(“etaText”);
const countdownEl = document.getElementById(“countdown”);

function setCountdown(){
if(!CONFIG.etaISO){
etaTextEl.textContent = “Belum ditentukan”;
countdownEl.textContent = “”;
return;
}
const eta = new Date(CONFIG.etaISO);
if(isNaN(eta)){
etaTextEl.textContent = “Format ETA tidak valid”;
countdownEl.textContent = “”;
return;
}

etaTextEl.textContent = eta.toLocaleString(“id-ID”, { dateStyle:“medium”, timeStyle:“short” });

const now = new Date();
const diff = eta – now;
if(diff <= 0){
countdownEl.textContent = “✅ Seharusnya sudah selesai — silakan refresh.”;
return;
}

const s = Math.floor(diff/1000);
const hh = String(Math.floor(s/3600)).padStart(2,“0”);
const mm = String(Math.floor((s%3600)/60)).padStart(2,“0”);
const ss = String(s%60).padStart(2,“0”);
countdownEl.textContent = `⏳ Perkiraan selesai dalam ${hh}:${mm}:${ss}`;
}
setInterval(setCountdown, 1000);
setCountdown();

// Auto refresh
const autoLabel = document.getElementById(“autoRefreshLabel”);
autoLabel.textContent = CONFIG.autoRefresh ? “On” : “Off”;
if(CONFIG.autoRefresh){
setTimeout(() => location.reload(), CONFIG.autoRefreshSeconds * 1000);
}
</script>
</body>
</html>


Kamu bisa pakai template HTML yang sudah kamu minta sebelumnya (atau versi sederhana). Yang penting: file ini bisa diakses.

Tips: pastikan maintenance.html punya <meta name="robots" content="noindex,nofollow"> supaya tidak terindeks.

Langkah 2 — Aktifkan Maintenance Mode via .htaccess (Copy–Paste)

Buka .htaccess kamu, lalu tempel blok ini di paling atas (sebelum rules WordPress jika ada):

# =========================
# MAINTENANCE MODE (Apache)
# =========================<IfModule mod_rewrite.c>
RewriteEngine On

# — (OPSIONAL) Izinkan IP tertentu tetap bisa akses website normal —
# Ganti dengan IP kamu
# RewriteCond %{REMOTE_ADDR} ^123\.123\.123\.123$ [OR] # RewriteCond %{REMOTE_ADDR} ^111\.111\.111\.111$
# RewriteRule ^ – [L]

# Jangan ganggu file maintenance itu sendiri
RewriteCond %{REQUEST_URI} !^/maintenance\.html$ [NC]

# (OPSIONAL) Jangan ganggu asset statis (biar logo/css tetap tampil)
RewriteCond %{REQUEST_URI} !\.(css|js|png|jpg|jpeg|gif|svg|ico|webp|woff|woff2|ttf|eot)$ [NC]

# (OPSIONAL) Kalau WordPress, biarkan halaman login/admin tetap bisa diakses
RewriteCond %{REQUEST_URI} !^/wp-login\.php$ [NC] RewriteCond %{REQUEST_URI} !^/wp-admin [NC]

# Lempar semua request jadi 503
RewriteRule ^ – [R=503,L]

# Tampilkan file maintenance untuk 503
ErrorDocument 503 /maintenance.html
</IfModule>

<IfModule mod_headers.c>
# Biar tidak ke-cache
Header always set Cache-Control “no-store, no-cache, must-revalidate, max-age=0”
Header always set Pragma “no-cache”
# Sarankan kapan coba lagi (detik)
Header always set Retry-After “3600”
</IfModule>

Penjelasan singkat (biar kamu paham “kenapa”)

  • RewriteCond %{REQUEST_URI} !^/maintenance\.html$
    supaya file maintenance tidak ikut “diputar” lagi (menghindari loop).

  • RewriteCond ... asset statis
    agar file CSS/JS/logo tetap bisa dimuat (halaman maintenance jadi rapi).

  • RewriteRule ^ - [R=503,L]
    semua request dipaksa jadi 503.

  • ErrorDocument 503 /maintenance.html
    saat 503 terjadi, Apache menampilkan maintenance.html.

  • Header Cache-Control + Pragma
    mencegah browser/CDN menyimpan halaman maintenance terlalu lama.

  • Retry-After "3600"
    menyarankan klien untuk mencoba lagi setelah 1 jam (3600 detik).

Langkah 3 — Opsi Penting: Whitelist IP (Admin Tetap Bisa Akses)

Kalau kamu ingin website tetap bisa diakses normal dari IP kamu (agar bisa fixing tanpa mematikan maintenance), aktifkan bagian whitelist IP:

RewriteCond %{REMOTE_ADDR} ^123\.123\.123\.123$ [OR] RewriteCond %{REMOTE_ADDR} ^111\.111\.111\.111$
RewriteRule ^ - [L]

Cara pakainya:

  1. Hapus tanda # di depan barisnya

  2. Ganti IP dengan IP publik kamu (format harus sama)

  3. Simpan .htaccess

Langkah 4 — Cara Mematikan Maintenance Mode

Untuk menonaktifkan maintenance:

  • hapus blok “MAINTENANCE MODE”, atau

  • comment semua rule maintenance (beri #), atau

  • pindahkan blok itu ke file catatan sementara.

Begitu blok dihapus, website kembali normal.

Alternatif Aman untuk Shared Hosting (Jika R=503 Ditolak)

Beberapa shared hosting membatasi beberapa rule tertentu. Jika kamu mengalami error saat pakai [R=503], gunakan pendekatan maintenance.php.

1) Buat file maintenance.php di root

<?php
http_response_code(503);
header('Retry-After: 3600');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
readfile(__DIR__ . '/maintenance.html');
exit;

2) Ubah ErrorDocument di .htaccess

Ganti:

ErrorDocument 503 /maintenance.html

menjadi:

ErrorDocument 503 /maintenance.php

Checklist Cepat (Supaya Tidak Salah)

  • maintenance.html ada di root (public_html/maintenance.html)

  • Blok maintenance diletakkan paling atas .htaccess

  • Tidak ada typo pada nama file (maintenance.html vs maintanance.html)

  • Kalau WordPress, rule WordPress tetap di bawah (jangan dihapus)

  • Jika halaman maintenance tampil tapi CSS tidak masuk, pastikan rule pengecualian asset aktif

  • Setelah selesai, jangan lupa matikan maintenance (hapus blok)

Troubleshooting Singkat

1) Maintenance tidak tampil sama sekali

  • Pastikan .htaccess terbaca (AllowOverride aktif di Apache; di shared hosting biasanya sudah)

  • Pastikan mod_rewrite aktif (umumnya aktif)

  • Cek apakah ada error 500 karena salah sintaks .htaccess (hapus baris terakhir yang kamu tambah untuk uji)

2) Tampil tapi styling berantakan

  • Pastikan pengecualian asset statis aktif (css|js|png|...)

  • Atau taruh CSS inline di maintenance.html (paling aman)

3) WordPress admin ikut terkunci

  • Pastikan pengecualian wp-login.php dan wp-admin aktif

  • Kalau tetap ingin admin ikut terkunci, cukup hapus dua baris pengecualian WordPress tersebut

Previous post 10 Tips Mengoptimalkan Website E Commerce Agar Cepat Diakses dari Indonesia Next post Apa Itu SSL? Bukan Cuma “Gembok”, Tapi Cara Biar Website Nggak Jadi Sasaran Empuk