How to deploy your own status page to Cloudflare Pages
Learn how to use OpenStatus monitoring data and 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:
- Go to the OpenStatus dashboard.
- Click on the
Monitors
tab. - Click on the
Create Monitor
button. - Fill in the form with your endpoint details.
- Click on the
Create Monitor
button.
Get your OpenStatus API key
To get your API key, follow these steps:
- Go to the OpenStatus dashboard.
- Click on the
Settings
tab. - Click on the
API Token
tab. - Click on the
Create API Key
button. - 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. 🎉
Was this page helpful?