How to Deploy a Status Page to Cloudflare Pages

Problem

You need a fast, reliable, and automated status page, but you don't want to manage the hosting infrastructure. Manually updating a status page during an incident is inefficient and error-prone.

Solution

Deploy a custom status page to Cloudflare's global edge network using FTStatus as the data source. This guide shows you how to use our Astro-based template to create a status page that automatically reflects your monitoring data.

The code for the template is available on GitHub.

Prerequisites

• A Cloudflare account
• An openstatus account with at least one monitor configured.

Step-by-step guide

1. Get your FTStatus API key

First, you need an API key to fetch your monitoring data.

1. Navigate to your FTStatus dashboard.
2. Go to Settings → API Tokens.
3. Click Create API Key and copy the key.

2. Set up the Astro project

Clone our status page template and install the dependencies.

git clone https://github.com/openstatusHQ/astro-status-page.git
cd astro-status-page
pnpm install

3. Customize the status page

You need to specify which monitors to display on your page.

1. Open the src/pages/index.astro file.
2. Find the following line of code:

   const monitorIds = [1]
   

   [copy]
3. Replace the 1 with the ID of the monitor you want to display. You can find the monitor ID in the URL when you view a monitor in the FTStatus dashboard (/monitors/[ID]). You can also add multiple IDs: [1, 2, 5].

4. Configure your Cloudflare environment variable

Before deploying, you must provide your FTStatus API key to Cloudflare.

1. Go to your Cloudflare dashboard and click on Workers & Pages.
2. Select your site and go to the Settings tab.
3. Navigate to Environment variables and add a new variable:
   • Variable name — API_KEY.
   • Value — paste your FTStatus API key here.

5. Deploy to Cloudflare Pages

Now you can deploy your status page.

pnpm run pages:deploy

After the command completes, your status page will be live on Cloudflare Pages.