How to Build a Free System Status Page in Ten Minutes
With the recent launch of AOGCommunity.org, an open source project I lead the development of, I wanted a system status page to monitor the app's uptime and provide a landing page to show users if there was ever downtime or a problem I needed to provide updates on.
Why uptime monitoring is important
If your app isn't working, your users will not be happy. By using a monitoring service, you and/or your development team get notified the instant something goes down and can start to implement a fix. It's better to get ahead of the game before one of your users going on Twitter to complain about how much your website sucks.
In 2021, software options are plentiful
Before I talk about what we ended up using, I want to mention that there are many really great services out there for uptime monitoring. If you're looking for an enterprise-grade product you can rely on effortlessly, I absolutely recommend using a paid SaaS app like StatusPage or BetterUptime to get the job done and let someone else handle the maintenance of it. There are a ton of options out there to be found at a reasonable cost which will be worth it to you and, more importantly, your users.
For AOGCommunity.org, I wanted to use an open source product for a few reasons:
- Because open source software is awesome and is worth supporting.
- I didn't have much complexity in what and how often I was looking to monitor, just our main web-app and API.
- We're bootstrapped and still in beta, so saving some money has its benefits.
After spending a few minutes Googling open source status pages, I came across Upptime and was quickly impressed. What I find so cool about Upptime is their creative use of GitHub Actions and Issues to schedule the monitoring of whatever services you configure. It's simply a repository template you copy and spend a few minutes to set up, then host for free using GitHub Pages. It really doesn't get any easier.
Three steps to build your status page using Upptime:
- Visit the Upptime repo and click Use this template.
- Edit your new `.upptimerc.yml` file to add the URLs or APIs you want to monitor and edit whatever else you desire to alter from the default configuration. The documentation is very informative; read it!
- Set up a custom domain and deploy your new status page for free using GitHub Pages.
Let the repo do the work for you
Once your status page is fully configured, it will ping the services every 5 minutes. If your site can't be reached, a GitHub Issue will automatically be generated, so GitHub will notify you if you're watching the repo. If you want to create an Issue yourself, you can, and it will be displayed on your status page for all to see. This is helpful if you want to tell your users of some planned maintenance or downtime for any other reason. As you write comments and update the Issues, they get displayed on your status page. This is the kind of design simplicity I love!
That's pretty much it. Go check out status.aogcommunity.org and see if our app is operational. If it's not, then complain on Twitter, I guess.