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 thesite.yml workflow:
.github/workflows/site.yml
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
Configuration Options
Custom Domain
Custom Domain
To use a custom domain, add the Then configure your DNS to point to GitHub Pages.
cname property:Repository Subdomain
Repository Subdomain
If you don’t have a custom domain, use the Your status page will be available at
baseUrl property:username.github.io/upptime.Branding
Branding
Customize the appearance with your own logo and text:
Navigation
Navigation
Features
The generated status page includes:- Live Status
- Response Times
- Uptime Percentages
- Incident History
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:- History files in the
history/directory - API JSON files in the
api/directory - GitHub Issues for incident details
- Response time graphs in the
graphs/directory
Deployment
Automatic Deployment
The workflow automatically deploys to GitHub Pages using thepeaceiris/actions-gh-pages action:
Enabling GitHub Pages
- Go to your repository Settings
- Navigate to Pages in the sidebar
- Set source to gh-pages branch
- Click Save
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:
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
- Configure Incident Tracking
- View Response Time Graphs
- Set up Notifications