Website Status Page with Uptime Robot & Zeit
Tags: serverless, webdev
Published: 2020-02-14 10:59:00

---
title: Website Status Page with Uptime Robot & Zeit
published: true
description: Website monitoring with Uptime Robot is free and using NoCodeAPI you can build a public page for free & host on Zeit with the one-click button.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/htv4kkterr8amumcs273.png
tags: serverless, webdev
---

First setup your Uptime Robot API without any backend & code. Just go follow this simple documentation 👉 <a href="https://nocodeapi.com/docs/uptime-robot-nocodeapi-docs" taregt="_blank" rel="noopener noreferrer">Build Uptime Robot NoCodeAPI</a>.

When you will finish your Uptime Robot API then you will see this card with your secure endpoint that we need on front-end.

![Slack Hook API Card](https://dev-to-uploads.s3.amazonaws.com/i/bxqh5ptx5czxapz3occt.png)

### Get your Monitor IDs
You can list all your monitor status on one page by passing multiple Monitor IDs. So, get those IDs from your <a href="https://uptimerobot.com/dashboard" taregt="_blank" rel="noopener noreferrer">Uptime Robot</a> account.

On your dashboard when you click on your monitor list then your URL will have the monitor ID. like this `https://uptimerobot.com/dashboard#784130462`. After `#` `784130462` is your monitor ID.

### Format your Endpoint

Now set up your endpoint with the monitor's IDs like this:

If you have only one monitor then add `?monitors=784130462` with your endpoint `https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH` and it will become like this `https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH?monitors=784130462`

If you want to show status for multiple monitors then format like this:

Add `?monitors=784130462-784130463-784130464` with your endpoint `https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH` and it will become like this `https://v1.nocodeapi.com/betauser/uptime/OVprBNKOwXSfWhjH?monitors=784130462-784130463-784130464`

### Fork Template Code
We have a simple and clean template written in React. Just fork this repository on your account. Just click on the `fork` button.

After fork complete, you have the template code on your GitHub account with URL like: `https://github.com/<username>/status`

1. Go here https://github.com/nocodeapi/status
2. Click on `Fork`

![GitHub Fork](https://dev-to-uploads.s3.amazonaws.com/i/3zwhjwiqgn17nc3z5z87.png)

### Edit Metadata
Now go here `https://github.com/<username>/status` and edit the file `src/env.js` with your metadata by clicking ✎ the edit icon.

![Edit Metadata](https://dev-to-uploads.s3.amazonaws.com/i/oa4r247ipbt8e2b3tuvu.png)

### Deploy
Now it's time to deploy the code on the server. So, Here is a `One-Click` serverless hosting with Zeit and it's free. Let's make a One-Click URL for Zeit.

This is the format of Zeit One-Click URL `https://zeit.co/new/project?template=https://github.com/<username>/status/tree/master`. Just replace `<username>` with your GitHub username and open the URL into a browser to follow the process.

Just click on `Continue` -> `Continue` -> `Continue` -> `Deploy`

![One Click](https://dev-to-uploads.s3.amazonaws.com/i/8tc122jz4gpw93n4voe9.png)

Yes, that's all. Now you can also add your custom domain like `status.example.com`.

You can see our status page demo here <a href="https://status.nocodeapi.com" taregt="_blank" rel="noopener noreferrer">https://status.nocodeapi.com</a>

If you have any other use cases then let us know about that. So, we can make a blog post about that.


<em>Originally published at [nocodeapi.com](https://nocodeapi.com/free-website-status-page-with-uptime-robot-and-zeit)</em>