DEV Community

Cover image for Website Status Page with Uptime Robot & Zeit
Mohd Danish
Mohd Danish

Posted on

Website Status Page with Uptime Robot & Zeit

First setup your Uptime Robot API without any backend & code. Just go follow this simple documentation 👉 Build Uptime Robot NoCodeAPI.

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

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 Uptime Robot account.

On your dashboard when you click on your monitor list then your URL will have the monitor ID. like this 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 and it will become like this

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

Add ?monitors=784130462-784130463-784130464 with your endpoint and it will become like this

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:<username>/status

  1. Go here
  2. Click on Fork

GitHub Fork

Edit Metadata

Now go here<username>/status and edit the file src/env.js with your metadata by clicking ✎ the edit icon.

Edit Metadata


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<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

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

You can see our status page demo here

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

Originally published at

Top comments (0)