Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
5.0 kB · 102 lines
MDX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103---category: Tutorialstitle: Create a Status Pagedescription: "A step-by-step tutorial to create and publish your first status page"---
| | ||---|---|| **Time** | ~5 minutes || **Level** | Beginner || **Prerequisites** | openstatus account, at least one monitor (see [Create your first monitor](/docs/tutorial/create-your-first-monitor)) |
In this tutorial, you'll create a public status page to communicate your service's health to users. A status page is a transparent way to show real-time uptime information and keep your users informed during incidents.
By the end you'll have a public status page with a component for each service you want to show, and a working understanding of where custom domains and access control are configured.
<Aside type="tip">Coming from another provider? openstatus can import components, incidents, maintenances, and subscribers from your existing setup. See the migration guides for [Atlassian Statuspage](/guides/migrate-from-atlassian-statuspage), [Better Stack](/guides/migrate-from-betterstack), [Instatus](/guides/migrate-from-instatus), or [Checkly](/guides/migrate-from-checkly) instead of building from scratch.</Aside>
## Get started
### 1. Create the status page
Navigate to the **Status Pages** page from the sidebar and click the **Create Status Page** button. This will open a new configuration screen.
<Image src="/docs/tutorial/create-status-page/create-status-page-1.png" alt="Status Pages sidebar with the Create Status Page button highlighted"/>
### 2. Name the page
The create form asks for four things, and only the first two are required:
- **Title** — a name for your status page (e.g. "Acme Status" or "API Health").- **Slug** — the subdomain your page is served from (e.g. `acme` creates `acme.openstatus.dev`).- **Icon** — an optional favicon shown in the browser tab.- **Description** — an optional line shown under the title on the public page.
Submit, and you land on the page's **Settings** tab. Everything else — components, customdomain, access control, theme, locales — is configured from here on the page's own tabs.
### 3. Add components
Open the **Components** tab and add a component for each service you want to show. A componentis what your visitors see, and it comes in two kinds:
- **Monitor components** are linked to one of your monitors and track its status automatically.- **Static components** have no monitor behind them; you drive their status with status reports and maintenance windows. Use these for third-party dependencies.
Give the component a name your users will recognise — it does not have to match the monitor'sinternal name. See the [page components reference](/docs/reference/page-components) for groups,ordering, and how each event type affects a component's status.
**Checkpoint:** open your status page (the link is at the top of the page's settings). Youshould see each component listed with its uptime bar.
### 4. Optional: custom domain
On the **Settings** tab, the **Custom Domain** card lets you serve the page from your owndomain (e.g. `status.yourdomain.com`) instead of the `*.openstatus.dev` subdomain:
1. Enter your domain and submit.2. Configure DNS based on your domain type: - **Subdomain** (e.g. `status.yourdomain.com`): add a CNAME record pointing to `cname.vercel-dns.com`. - **Apex domain** (e.g. `yourdomain.com`): add an A record pointing to `76.76.21.21`.3. Wait for DNS propagation (usually a few minutes, up to 48 hours).4. If the domain is already registered on another Vercel project, you also need a **TXT record** to prove ownership. The dashboard shows the exact values when this step applies.
The dashboard displays the exact records to configure after you save the domain. See the[status page reference](/docs/reference/status-page) for the full DNS table.
### 5. Optional: restrict access
Also on the **Settings** tab, the **Page Access** card controls who can see the page. Passwordprotection is the simplest option — set a password and visitors are prompted before the pageloads, which is what you want for an internal page. Magic-link and IP-range restriction areavailable as paid add-ons; the [status page reference](/docs/reference/status-page) covers allfour access types.
## What you've accomplished
- Created your first status page- Added components so visitors can see service health- Learned where custom domains and access control live
## What's next
- **[Configure your status page](/docs/guides/how-to-configure-status-page)** — customise the appearance and add more features.- **[Building trust with status pages](/docs/concept/best-practices-status-page)** — learn how to communicate effectively.
### Learn more
- **[Status page reference](/docs/reference/status-page)** — complete configuration options.- **[Understanding uptime values](/docs/concept/uptime-calculation-and-values)** — how uptime is calculated.