Status page template
The Logdash Next.js starter is a status page template you deploy to Vercel in one click: paste a status page id and it serves live uptime for your monitors, rendered on the server and refreshed every 60 seconds.
Most status page templates are a static mockup with three green rows and a made-up 99.99%. The design was never the hard part. The data is: something has to check your endpoints from outside your network every few minutes, keep 90 days of history and stay up through the outage the page exists to announce. A template without that is a screenshot.
The Logdash starter works the other way round. Logdash runs the checks and keeps 90 days of history. The template is a small Next.js app, one page and one component, that renders that data in your design.
Deploy the Next.js status page template
The starter README has a Deploy with Vercel button. It clones the template into your own repository and asks for one variable, LOGDASH_STATUS_PAGE_ID. To try it locally first:
npx create-next-app@latest status-page \
--example https://github.com/logdash-io/logdash.io \
--example-path templates/status-page-next
cd status-page
# Logdash's own page, so it runs as pasted. Swap in your id later.
echo "LOGDASH_STATUS_PAGE_ID=status.logdash.io" > .env.local
npm run devThe id is the last part of your status page URL in Logdash, or its verified custom domain. The page is fetched on the server and rendered again at most once a minute, so it arrives complete in the HTML and crawlers see real status rather than a spinner. next build fetches once, so a wrong id fails the build instead of shipping a broken page.
- An overall banner: all systems operational, partial outage or major outage.
- A row per monitor with its uptime over 24 hours, 7, 30 and 90 days.
- Ninety daily bars per monitor, each with a tooltip showing that UTC day, its uptime and its checks.
- The last data it had when the Logdash API cannot be reached, never a blank page.
Colours come from the shadcn CSS variables in app/globals.css. Replace them with your site theme and it stops looking like a template. Deploy it as its own Vercel project on a subdomain such as status.example.com, apart from your app, so one outage cannot take both down.
Status page HTML template
No framework, no build step. The API accepts requests from any origin, so one file is enough, even opened straight from disk.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Status</title>
</head>
<body>
<h1 id="name">Status</h1>
<p id="overall"></p>
<ul id="monitors"></ul>
<script type="module">
// Your status page id, or its verified custom domain.
const id = 'status.logdash.io';
const res = await fetch(`https://api.logdash.io/v1/status_pages/${id}`);
const page = await res.json();
document.title = page.name;
document.getElementById('name').textContent = page.name;
document.getElementById('overall').textContent = page.status;
document.getElementById('monitors').replaceChildren(
...page.monitors.map((monitor) => {
const li = document.createElement('li');
const uptime = monitor.uptime['90d']?.toFixed(2) ?? '-';
li.textContent = `${monitor.name}: ${monitor.status}, ${uptime}% over 90 days`;
return li;
}),
);
</script>
</body>
</html>It prints the page name, the overall status and one line per monitor with its 90-day uptime. It fetches once per load and draws no history bars. For bars, read history.daily, which always holds 90 UTC days, and format those dates in UTC too, or a visitor west of Greenwich sees every bar labelled a day early.
Status page template on GitHub: Logdash vs Upptime
Logdash starter vs Upptime
| Feature | Logdash | Upptime |
|---|---|---|
| What you copy | A Next.js app, MIT | A GitHub template repository, MIT |
| Check interval | 5 minutes free, 1 minute Builder, 15 seconds Pro | At most every 5 minutes, on GitHub Actions |
| Accounts needed | Logdash, plus Vercel or any Node host | GitHub only |
| Incidents | None | GitHub Issues, opened and closed for you |
| Page design | One React component you edit | Settings in a YAML config |
When Upptime is the better pick
- You want everything inside one GitHub organisation, with no other account anywhere.
- Five-minute checks are enough and you like incidents as GitHub Issues.
- Your code already lives on GitHub and you want the status page to cost nothing extra.
Uptime Kuma status page template
Kuma has no template system. Each status page has a Custom CSS field, and community themes on GitHub restyle it. Past CSS, its status page endpoints return JSON you could feed into the HTML file above, though Kuma documents them as internal and unsupported for third parties.
- Publish a status page Add your monitors to a status page in Logdash, publish it and copy its id.
- Deploy the template Click Deploy with Vercel in the starter README, paste the id into LOGDASH_STATUS_PAGE_ID and point a status subdomain at the new project.
- Watch it go red Connect Telegram and stop one service. The row on your page turns red within about three minutes, but the Telegram alert gets to you first, with the monitor name and status code.