upptime-example

1.13.3 • Public • Published

Upptime

Upptime is the open-source uptime monitor and status page, powered entirely by GitHub Actions and Issues.

Static Site CI Graphs CI Response Time CI Summary CI Uptime CI

Live status: 🟨 Partial outage

⭐ How it works

  • GitHub Actions is used as an uptime monitor
    • Every 5 minutes, a workflow visits your website to make sure it's up
    • Response time is recorded every 6 hours and committed to git
    • Graphs of response time are generated every day
  • GitHub Issues are used for incident reports
    • An issue is opened if an endpoint is down
    • People from your team are assigned to the issue
    • Incidents reports are posted as issue comments
    • Issues are locked so non-members cannot comment on them
    • Issues are closed automatically when your site comes back up
  • GitHub Pages are used for the status website
    • A simple, beautiful, and accessible PWA is generated
    • Built with Svelte and Sapper
    • Fetches data from this repository using the GitHub API

Screenshot of status website

📈 Status

This section is updated automatically when the status of any site changes.

URL Status History Response Time Uptime
Google 🟩 Up google.yml Response time graph 102ms 100.00%
Wikipedia 🟩 Up wikipedia.yml Response time graph 121ms 100.00%
Internet Archive 🟩 Up internet-archive.yml Response time graph 561ms 100.00%
Hacker News 🟩 Up hacker-news.yml Response time graph 425ms 100.00%
Broken Site 🟥 Down broken-site.yml Response time graph 0ms 0.00%
Secret Site 🟩 Up secret-site.yml Response time graph 35ms 100.00%

👩‍💻 Getting started

  1. Create a new repository using this template
  2. Update the .statusrc.yml file with your configuration
  3. Enable publishing the gh-pages branch for your status website and add a GH_PAT

Concepts

Issues as incidents

When the GitHub Actions workflow detects that one of your URLs is down, it automatically opens a GitHub issue (example issue #15). You can add incident reports to this issue by adding comments. When your site comes back up, the issue will be closed automatically as well.

Screenshot of GitHub issue Screenshot of incident page

Commits for response time

Four times per day, another workflow runs and records the response time of your websites. This data is commited to GitHub, so it's available in the commit history of each file (example commit history). Then, the GitHub API is used to graph the response time history of each endpoint and to track when a site went down.

Screenshot of GitHub commits Screenshot of live status

Configuration

The .statusrc.yml file is used as the central configuration for Upptime, with this syntax:

owner: koj-co # GitHub username 
repo: upptime # GitHub repository name 
user-agent: koj-co
sites: # List of endpoints to track 
  name: Google
    url: https://www.google.com
assignees: # Users to assign downtime issues (optional) 
  - AnandChowdhary
status-website: # Status website (optional) 
  cname: upptime.js.org # Custom domain CNAME 
  name: Upptime # Status website title 

Repository

A GitHub repository is used as the "source of truth" for your uptime logs, and the static site uses the GitHub API and fetches data from this repository.

After you've created a new repository using this template (see Creating a repository from a template), specify the username and repository name in the configuration:

owner: koj-co
repo: upptime

Endpoints

You can track as many websites as you like. Add the names and URLs of your endpoints in the sites key:

sites:
  name: Google
    url: https://www.google.com
  name: DuckDuckGo
    url: https://duckduckgo.com

To make POST requests (or any other HTTP verb), you can add the method key:

sites:
  name: POST to Google
    url: https://www.google.com
    method: POST
  name: DELETE Example
    url: https://example.com
    method: DELETE

If you don't want to show a URL publicly, you can use repository secrets (see Creating and storing encrypted secrets). Instead of the plain text URL, add the name of the secret prefixed with a $ character:

name: Secret Site
  url: $SECRET_SITE

In the above example, a secret named SECRET_SITE (without the $) is stored in the repository. Note that you'll also have to add this secret as an environment variable in each workflow file in .github/workflows:

# Example: .github/workflows/graphs.yml 
# ... 
name: Run script
  run: npm run graphs
  env:
    SECRET_SITE: ${{ secrets.SECRET_SITE }} # Add your repository secret 

User agent

Requests made to the GitHub API must include a valid User-Agent header (see User Agent required). It is recommended to use your GitHub username here:

user-agent: your-github-username

Assignees

You can add members of your team to be assigned to every downtime issue:

assignees:
  - AnandChowdhary
  - CarloBadini

If you want particular users to be assigned per-site, you can add assignees under each entry in sites:

sites:
  name: Google
    url: https://www.google.com
    assignees:
      - AnandChowdhary

Branding

A static website with PWA is also generated, and you can customize the logo and name in the navbar:

status-website:
  name: Upptime
  logoUrl: https://example.com/image.jpg

If you want to add a custom domain, you can add the cname key:

status-website:
  name: Upptime
  logoUrl: https://example.com/image.jpg
  cname: upptime.js.org # Custom CNAME 

Intro text

Optionally, you can add some introductory text to the website. You can use Markdown:

status-website:
  introTitle: "**Upptime** is the open-source uptime monitor and status page, powered entirely by GitHub."
  introMessage: This is a sample status page which uses **real-time** data from our [Github repository](https://github.com/koj-co/upptime). No server required — just GitHub Actions, Issues, and Pages.

Site deployment

Because GitHub Pages does not support the default GITHUB_TOKEN available to workflows, you'll have to set a secret GH_PAT with a Personal Access Token. For more info, see: https://github.com/maxheld83/ghpages#secrets.

Internationalization

Though our status page is in English, you can use any language with Upptime by supplying the required strings. The list of all required strings is available in site/i18n.yml, and you can add them under the i18n key in the configuration file:

i18n:
  activeIncidents: Incidentes activos
  allSystemsOperational: Todos los sistemas están operativos
  # ... 

📄 License

Package Sidebar

Install

npm i upptime-example

Weekly Downloads

1

Version

1.13.3

License

MIT

Unpacked Size

2.14 MB

Total Files

77

Last publish

Collaborators

  • anandchowdhary