Depricated
This blog post is depricated.
Introduction
Once your site is deployed, uptime monitoring becomes essential. Upptime is an open-source alternative that uses GitHub Actions, Issues, and Pages.
Repository: dionpinto-upptime
Status page: Live status
Initialization
Follow the official setup guide to bootstrap your monitor: Getting started.
Configure status page
Core behavior is configured through .upptimerc.yml. While defaults are useful, I used custom CSS for a darker status theme.
css: "
:root { --body-background-color: #1b1a1a; --body-text-color: #dce2ec;
--card-background-color: #2a2c2d;
--nav-background-color: #1f1f1f;
--nav-border-bottom-color: #2d2c2c;
--nav-current-border-bottom-color: #d61212;
--card-border-color: #2a2c2d;
--down-border-left-color: #ff7676;
--down-background-color: #6b1020;
--degraded-border-left-color: #ffc36d;
--up-border-left-color: #53e69d;
--tag-color: #002b29;
--tag-up-background-color: #53e69d;
--tag-down-background-color: #ff7676;
--tag-degraded-background-color: #ffc36d;
--change-background-color: #ffc36d;
--error-button-border-color: #1a46ad;
--error-button-background-color: #3867d6;
--error-button-color: #dce2ec;
--submit-button-border-color: #1a46ad;
--submit-button-background-color: #3867d6;
--submit-button-color: #dce2ec;
--graph-opacity: 1;
--graph-filter: hue-rotate(34deg) saturate(164%) brightness(89%);
}
article.down {
border-left: 0.4rem solid;
}
article.degraded {
border-left: 0.4rem solid;
}
article.up {
border-left: 0.4rem solid;
}
.chartjs-render-monitor {
filter: hue-rotate(34deg) saturate(164%) brightness(89%);
}
"
