OneTaskBy Tim King · Updated
Maintenance Page Generator
Branded Down for Maintenance Page With Your Message, Return Time and Contact Link
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Maintenance Page Generator works
When a site goes offline for an upgrade, visitors should see a clear message instead of an error. This maintenance page generator builds that screen as one HTML file with the CSS inlined. Set the heading, message, return time and contact email, pick a layout and colours, and copy the file.
The output is a complete HTML document with no external files, images or fonts. It still works when your application, database or CDN is down, as long as the web server can send one static file.
What a good maintenance page says
Keep it short. Say that the site is down on purpose, say when it will be back, and give one way to get help. A return time such as "Back by 14:00 UTC" is more reassuring than "soon", and naming the time zone avoids confusion for international visitors. Leave the return time or email blank to remove that line from the page.
Send a 503, not a 200
Search engines need to know the outage is temporary. Serve the page with HTTP status
503 Service Unavailable and, ideally, a Retry-After header giving the seconds or date until you
expect to be back. A 503 tells crawlers to come back later and keep your existing rankings. A page
served with 200 can be indexed in place of your real content. The page also carries
<meta name="robots" content="noindex"> as a second safeguard.
Wiring the maintenance page into your server
On Nginx, save the file as /var/www/maintenance.html and add error_page 503 /maintenance.html;
with a rule that returns 503 while a flag file exists. On Apache, use a RewriteCond on a flag
file, a RewriteRule to /maintenance.html with [R=503,L], and ErrorDocument 503 /maintenance.html. Most hosting dashboards and CMS maintenance plugins also accept a custom HTML
file. Remember to let your own IP address through so you can check the site before reopening it.
Styling
The Card layout puts the text on a raised panel over the page background. The Plain layout puts
it straight onto the background. The fonts are system font stacks, so nothing has to download,
and the heading is sized with clamp() to stay readable on small phones.
FAQ
What HTTP status code should a maintenance page return?
Return 503 Service Unavailable with a Retry-After header. Search engines treat 503 as a temporary outage and retry later without dropping your pages. Avoid 200, which says the maintenance message is the real page, and avoid redirecting to it with 301 or 302.
How long can a site stay on a maintenance page?
A few hours to a day is fine. Google has said that a 503 served for several days in a row may start to be treated as a permanent problem, and pages can begin dropping out of the index. If the work will take longer, keep the important pages up and take down only what you must.
Can I add my logo to the maintenance page?
Yes. Add an <img> above the heading. To keep the file self-contained, convert the logo to a
data URI or paste an inline SVG, so the page still shows the logo when the rest of your site's
files are offline.
Why is the maintenance page one file with inline CSS?
During maintenance your stylesheets, fonts or CDN may be unavailable or halfway through a deploy. With everything inside one HTML file, the page shows correctly whenever the web server can answer at all.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Age Gate Builder
Age verification overlay with yes/no or date-of-birth check.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Card Builder
Design a card component and copy its HTML and CSS.
.htaccess Generator
Build an Apache .htaccess from toggles for HTTPS, caching, headers and more.
HTTP Status Codes
Look up what any HTTP status code actually means.