How to deploy your own status page to Cloudflare Pages

​

Introduction

At OpenStatus, we believe that monitoring your endpoints should be easy and accessible to everyone. We also believe that having a status page is essential for your users to know the status of your services. We also think that manually updating your status page is a waste of time. The best way to update your status page is to automate it. That’s why we built OpenStatus.

In this guide, we will show you how to deploy your own status page to Cloudflare Pages using OpenStatus monitoring data.

For the Status Page, we will use Astro a new JavaScript web framework, that allows you to build faster websites with less JavaScript.

The code showcased in this guide is available on GitHub

Astro Status Pages

​

Prerequisites

To follow this guide, you need:

• A Cloudflare Account.
• An OpenStatus Account.

​

Start monitoring your services

To get your monitoring data, you need to create a monitor on OpenStatus. We will monitor the status of your endpoint and get the data to display on your status page.

​

How to create a monitor

To create a monitor, follow these steps:

1. Go to the OpenStatus dashboard.
2. Click on the Monitors tab.
3. Click on the Create Monitor button.
4. Fill in the form with your endpoint details.
5. Click on the Create Monitor button.

​

Get your OpenStatus API key

To get your API key, follow these steps:

1. Go to the OpenStatus dashboard.
2. Click on the Settings tab.
3. Click on the API Token tab.
4. Click on the Create API Key button.
5. Copy your API key.

​

Deploy your own status page

With OpenStatus monitoring data, you can bring your status page to life. You can really make it your own. We are going to deploy a simple status page that shows the status of your endpoint.

For this guide we are going to use our Astro Status Page template.

​

Customize the Astro Status Page

In the index.astro we are fetching the monitor data from OpenStatus and displaying it on the page.

const response = await fetch("https://api.openstatus.dev/v1/monitor", {
  headers: {
    "x-openstatus-key": env.API_KEY,
  },
});

const data = await response.json();


const r = monitorsSchema.parse(data);

// our monitors id
const monitorIds = [1]
const result = r.filter((m) => monitorIds.find(id => m.id === id) );

In the line const monitorIds = [1] you need to replace 1 with the list of monitors id you want to display.

​

Deploy the Astro Status Page to Cloudflare Pages

First in your Cloudflare dashboard you need to set the environment variable.

Go to your Cloudflare dashboard and click on the Workers & Pages.

Select your site and click on the Settings tab.

You can add your OpenStatus API key as an environment variable.

API_KEY=your-api-key

Now you can deploy your Astro Status Page to Cloudflare Pages with the following command:

npm run pages:deploy

Your Status Page is now live on Cloudflare Pages. 🎉