Skip to main content
Upptime generates a beautiful, accessible status page that displays the real-time status of all your monitored endpoints. The page is built with Svelte and hosted entirely on GitHub Pages.

Live Status Page

Every Upptime repository gets its own status page showing:
  • Current status of all monitored sites (up/down)
  • Response time graphs
  • Uptime percentages
  • Incident history
  • Historical data and trends
Check out the official demo at demo.upptime.js.org

How It Works

The status page is generated by the site.yml workflow:
.github/workflows/site.yml
name: Static Site CI
on:
  schedule:
    - cron: "0 1 * * *"
  repository_dispatch:
    types: [static_site]
  workflow_dispatch:
jobs:
  release:
    name: Build and deploy site
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          ref: ${{ github.head_ref }}
          token: ${{ secrets.GH_PAT || github.token }}
      - name: Generate site
        uses: upptime/[email protected]
        with:
          command: "site"
        env:
          GH_PAT: ${{ secrets.GH_PAT || github.token }}
      - uses: peaceiris/actions-gh-pages@v4
        name: GitHub Pages Deploy
        with:
          github_token: ${{ secrets.GH_PAT || github.token }}
          publish_dir: "site/status-page/__sapper__/export/"
          force_orphan: "false"
          user_name: "Upptime Bot"
          user_email: "[email protected]"
The status page rebuilds once per day (at 1:00 AM UTC) to ensure fresh data is displayed.

Configuration

Customize your status page in the .upptimerc.yml configuration file:
.upptimerc.yml
status-website:
  # Add your custom domain name, or remove the `cname` line if you don't have a domain
  cname: demo.upptime.js.org
  # baseUrl: /your-repo-name
  logoUrl: https://raw.githubusercontent.com/upptime/upptime.js.org/master/static/img/icon.svg
  name: Upptime
  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/upptime/upptime).
  navbar:
    - title: Status
      href: /
    - title: GitHub
      href: https://github.com/$OWNER/$REPO

Configuration Options

To use a custom domain, add the cname property:
status-website:
  cname: status.example.com
Then configure your DNS to point to GitHub Pages.
If you don’t have a custom domain, use the baseUrl property:
status-website:
  baseUrl: /upptime
Your status page will be available at username.github.io/upptime.
Customize the appearance with your own logo and text:
status-website:
  logoUrl: https://example.com/logo.svg
  name: My Company Status
  introTitle: "Service Status Dashboard"
  introMessage: Real-time status for all our services

Features

The generated status page includes:
Real-time status indicators for all monitored sites:
  • Green (Up): Site is operational
  • Yellow (Degraded): Partial outage
  • Red (Down): Site is unavailable
  • Gray (Unknown): No recent data

Technology Stack

The status page is built with modern web technologies:

Svelte

Lightweight, reactive framework for fast page loads

Sapper

Static site generation for optimal performance

GitHub API

Fetches real-time data directly from your repository

GitHub Pages

Free hosting with custom domain support

Progressive Web App

The status page is a fully-featured PWA (Progressive Web App):
  • Offline support: Works without internet connection after first visit
  • Mobile-friendly: Responsive design for all screen sizes
  • Installable: Can be installed on mobile home screens
  • Accessible: WCAG compliant with semantic HTML
Users can install your status page as an app on their devices for quick access.

Data Source

The status page fetches data from:
  1. History files in the history/ directory
  2. API JSON files in the api/ directory
  3. GitHub Issues for incident details
  4. Response time graphs in the graphs/ directory
All data is served as static files - no backend server required.

Deployment

Automatic Deployment

The workflow automatically deploys to GitHub Pages using the peaceiris/actions-gh-pages action:
- uses: peaceiris/actions-gh-pages@v4
  name: GitHub Pages Deploy
  with:
    github_token: ${{ secrets.GH_PAT || github.token }}
    publish_dir: "site/status-page/__sapper__/export/"

Enabling GitHub Pages

  1. Go to your repository Settings
  2. Navigate to Pages in the sidebar
  3. Set source to gh-pages branch
  4. Click Save
Make sure GitHub Pages is enabled in your repository settings for the status page to be publicly accessible.

Customization

Theme and Colors

The status page uses CSS variables that can be customized by forking and modifying the Upptime template.

Internationalization

The status page supports multiple languages. Configure your preferred language in .upptimerc.yml:
status-website:
  i18n:
    activeIncidents: Active Incidents
    allSystemsOperational: All Systems Operational
    # ... more translations

Performance

The static site architecture ensures:
  • Fast load times: No server-side processing
  • Global CDN: Served via GitHub’s CDN
  • Minimal bandwidth: Only static assets
  • High availability: 99.9%+ uptime through GitHub Pages

Next Steps

Build docs developers (and LLMs) love