--- title: "Custom status page: your domain or your build | Logdash" description: "Put a hosted status page on status.yourdomain.com with one CNAME, or build your own on the public API. The DNS record, the Cloudflare catch, and the trade-offs." url: https://logdash.io/status-page/custom --- # Custom status page Logdash gives you two kinds of custom status page: the hosted page on your own subdomain through one CNAME to statuspage.logdash.io on Pro, or a page you build yourself on the public API, on any domain and any plan. "Custom" means one of two things. Either the page lives on your domain, so customers see status.yourapp.com instead of a vendor URL. Or the page looks like your product, in your fonts and colours. Logdash does both, by two different routes: the domain on Pro, the design on every plan. ## Status page custom domain: the hosted route On Pro, open the status page in Logdash, enter a subdomain such as `status.example.com` and add one DNS record. Logdash looks for it every 5 seconds. Once the CNAME points at `statuspage.logdash.io`, the domain is verified, the page is served there over HTTPS, and the status page API accepts the domain in place of the id. ```bash # The record, in any DNS provider # Type Name Target # CNAME status statuspage.logdash.io # Check it from your machine before Logdash does dig +short CNAME status.example.com # statuspage.logdash.io. ``` Verification gives up after 60 attempts, about 5 minutes. If the record was not there in time, the domain is marked failed: fix the DNS, delete the domain and add it again. On the hosted page you choose its name and which monitors it shows. Fonts, colours and layout are fixed. ## Cloudflare custom status page If your DNS is on Cloudflare, create the record as DNS only, the grey cloud. A proxied record answers with Cloudflare IP addresses, so the CNAME lookup never sees `statuspage.logdash.io` and verification fails. Paid zones can also flatten every CNAME, so check that setting is off. If you would rather build the page on Cloudflare itself, cf-workers-status-page is the known open source option, though it has not had a commit in about three years. ## Custom design: the build-your-own route Every published page is also JSON at the public status page API, with no key, on every plan. The quickest way to render it is the shadcn component, which takes your Tailwind theme through the shadcn CSS variables: ```bash npx shadcn add https://logdash.io/r/react/status-page.json ``` Deploy the result anywhere, on any domain. Logdash never needs to know which one, so this is also the way to a custom domain without Pro. For a complete site, the Next.js starter deploys to Vercel in one click. Either way, host it apart from your app: a page that shares servers or DNS with the app goes down with it. ## Which route to pick Pick the hosted route when the page just needs to exist and you are already on Pro: one record, nothing to deploy, nothing to update. Pick your own build when the page is part of your brand, when you want status inside your app, or when you are on the free or Builder plan. Both read the same checks, so you can start hosted and move to your own build later without losing a day of history. ### Logdash vs Uptime Kuma | Feature | Logdash | Uptime Kuma | | ------------------------- | ------------------------------------------------ | ---------------------------------- | | Your own domain | Pro plan, one CNAME | Free, through your reverse proxy | | HTTPS on that domain | Handled by Logdash | Your reverse proxy and certificate | | Custom design | Any design through the API, component or starter | Custom CSS on the Kuma layout | | Incidents and maintenance | None | Both built in | ### When Uptime Kuma is the better pick - You want the hosted page on your own domain for free and already run a reverse proxy. - You post incidents and maintenance notices. Logdash pages show checks only. - Monitoring has to stay inside your own network. ## Set it up 1. **Pick a route** Hosted page on Pro with one CNAME, or your own build on any plan, including the free one. 2. **Point DNS** CNAME the subdomain to statuspage.logdash.io, DNS only on Cloudflare, or to wherever you deployed your own build. 3. **Test the alert** Connect Telegram, then stop one monitored service. Your status subdomain shows it within a few minutes, but the Telegram alert reaches you first, with the monitor name and status code. ### What is a custom status page? A status page on your own domain, in your own design, or both. Logdash covers the domain with a CNAME on Pro, and the design with a public API, an MIT component and a Next.js starter on any plan. ### How do I set up a status page custom domain? On Pro, enter the subdomain on the status page in Logdash, then add a CNAME from it to statuspage.logdash.io. Logdash checks every 5 seconds for about 5 minutes and serves the page over HTTPS once the record resolves. If it fails, fix the record, delete the domain and add it again. ### How do I make a Cloudflare custom status page work? Set the CNAME to DNS only, the grey cloud, and make sure CNAME flattening is off for it. With the orange cloud on, Cloudflare answers with its own IP addresses and the CNAME check fails. ## Keep reading [All status page guides](https://logdash.io/status-page): One page per question, from the status page API to a free page on your own domain. [Status page template](https://logdash.io/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. [React status page](https://logdash.io/status-page/react): Install the Logdash status page component with one shadcn command, pass it your status page id, and your React or Next.js app renders live status, uptime per monitor and 90 days of history in your own Tailwind theme. [Status page embed](https://logdash.io/status-page/embed): Embed a Logdash status page by dropping a copy-paste component into your site, which renders live status and 90 days of history from a public JSON API, or by adding SVG uptime badges anywhere an image tag works. [Uptime monitoring](https://logdash.io/features/monitoring): HTTP checks as often as every 15 seconds. When one fails, Telegram tells you before your users do.