+
+
+
+## Prerequisites
+
+To follow this guide, you need:
+
+- A Cloudflare Account.
+- An [OpenStatus](https://www.openstatus.dev) 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](https://github.com/openstatusHQ/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.
+
+```ts
+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.
+
+```env
+API_KEY=your-api-key
+```
+
+Now you can deploy your Astro Status Page to Cloudflare Pages with the following command:
+
+```bash
+npm run pages:deploy
+```
+
+Your Status Page is now live on Cloudflare Pages. 🎉
\ No newline at end of file
diff --git a/apps/docs/guides/introduction.mdx b/apps/docs/guides/introduction.mdx
index b5ad6da0..90bbcd36 100644
--- a/apps/docs/guides/introduction.mdx
+++ b/apps/docs/guides/introduction.mdx
@@ -6,3 +6,4 @@ Here's some content for the getting started with OpenStatus.
- [How to use OpenStatus to test latency in GitHub Actions](/guides/test-latency-cf-workers-in-github-actions)
+- [Deploy your own Status Page to Cloudflare Pages](/guides/how-deploy-status-page-cf-pages)
\ No newline at end of file
diff --git a/apps/docs/images/guides/how-deploy-status-page-cf-pages/status-page.png b/apps/docs/images/guides/how-deploy-status-page-cf-pages/status-page.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e31f399d709b4d7b792e9dd537e97e11c5590fc
GIT binary patch
literal 187871
zcmeAS@N?(olHy`uVBq!ia0y~yU_Qyfz#PHB#=yYv{oDF_1_lPk;vjb?hIQv;UNSH+
zxTHpSruq6ZXfZG_a4;~oXELyWlrS(bNHKr_^8!W&X0Qk&1H%F)m@Mvc7@R%aU~)UeH3oom|9RI4lNl5%}@(UrMRe5Q%L$nMh$p8ZyQdDUE>
z3loq2v(oflEm!(;?wSibF66G ksBHzwx!7dh2g=^_qob$jm!a
zcK=;fQ?rtF%klq@!XGj|RZz%KN!qkUoM~zJDW%EZ!apUs?oDZGs$=R>U~TWVG2>Kw
zqL(HetCeecdv$YQ6UX$Fhu0HY&X}C}aG>YrtYG#aa}N_f#r<@7jtrwNn3+n@h`vp&Ve-{Jj+^S{{Jf6mWbG?A_Q
zx%|BSAvXU%=3W#3eg5zBl4ldtZ+`fvesT5B@n-CkD}K`wSPodGIyRf6yn1|m!_{RwX8m!Gx|g`kW~-9%CS!veM;L1!
zq*gw-66_ei#pcev4@!yV(hPdR2ebk*za`5U^v?e0`|IM2odTgQAMNeeaVI^Q?7l?v
z4EM#{0HH7=ONFdiW<_)5uWhW=^pVSPJjakIy~SnAxik6Ak@*dh(+|HmvFN?gFL(bN
zg~!Y?lC?kUGq%`&xwU^*{kL;@4B7J!#{8A8W?P;+^+#r);F~tKX}8{9JUBfVP?psvw!spMoxZHa8{Ci>(D^*xmH|QVQ7?yDE>5rq|;uv}#Niod&>v!%#VDE&-
ze&^marfmM-QtQ!cvd_ixL+1AewucM)*-Y#e1l6}V$ZfrD?`7uSx6wW|rB^fSSheD&
z4OeWhs7~H1AXT)B<=Fd0mH(N=cIj~`k*ef1l8c3yb3
zTk7q;BdcaEuf1BE`R@1p=^sugxidB|cUku-GdOFt=_cJ1DZBNb+FtQr-Jz_TAW*U1
zigW*u3t@I8O&O1*OpJKfnN5h*pX9l}EMq-uRpuYB`Rtpeb@=Th5*I&FY$=^F{p->)KeNvjo*%ba
z)`aS
*@;eJcy9BIcUj=-1n?Kl6HAwQt>~od$Zs
z{k=>6FSBF$!M^|d&(quMZ
RkcMu${CX0CASLx
zZOpkY+Mn}BbWf?`iq`VO-|kB6W$CK9Cu0AXd%v5_y1!q-VncqL+;FcE^4i94`Y0e=
z=Ro9yWoOGyGryamzaa1at%XaUPjHhubL8PI&tSLw)glv@{)k=hx?SMCQuMyb-W{Pj
zN23x$?;M>l{lE%)Q&xYUKGv^xKln6OEY2wkNSbf6Qd4iIrklz|PQJH!Td#(_w=7I8
zm)!gESB>wAo!L7-%<)-tc~0`gjVVv3hJ9m~Idpeg?75G;RXbOHKj7xLC2#-lzV_t$
zj^!IZyq40{s$cL~%g#1nw`PUo4a-yOS8%_!nf&Ma>WXg_jo*ad{@L;7)9Ec6;$68H
zUyZ$YrJ!I#=kgP~rf3OIS@>q|oJ&ulo3?X){g$B@b(U{ygP!CMo8+j*w>wyl**@cF
z5%#w^7`@K(ca6g$cCmn~<