Netlify StatusKit

Netlify StatusKit is a Hugo-based, MIT-licensed template that deploys a public status page to Netlify, with incidents written as Markdown files and published through Git pushes.

What is Netlify StatusKit?

Netlify StatusKit is an open-source template for building a self-hosted status page on Netlify, originally created by Netlify's team but now maintained by the community. It takes configuration from environment variables and content from Markdown files in a Git repository, and outputs a static status page that updates when you push changes. The template is built on the Victor-Hugo boilerplate, which bundles Hugo and uses NPM for dependency management, so a local development server runs with npm start.

Key Features

Netlify StatusKit bundles everything needed to run a status page in a single Hugo site: one-click deployment, environment-variable configuration, and a Markdown-based incident workflow.

• One-click deploy — The Deploy to Netlify button clones the GitHub repository into your account and starts a new site immediately, prompting you to fill in required environment variables before the first build.
• Environment-variable setup — Four variables control the essentials: STATUSKIT_PAGE_TITLE for the browser title, STATUSKIT_COMPANY_LOGO for the logo URL, STATUSKIT_SUPPORT_CONTACT_LINK for a support page, and STATUSKIT_RESOURCES_LINK for user documentation.
• Markdown incident workflow — Incidents live as plain Markdown files in site/content/incidents; running npm run new-incident asks a series of questions and generates a pre-filled file for you to edit.
• Affected systems — Define which systems (such as API, CDN, or database) you track by editing the global systems variable in site/config.toml, then mark individual system status when opening or modifying an incident.
• Incident resolution — Set resolved = true in an incident's TOML front matter to mark it as resolved; the status page shows all open incidents until every one has a resolved state of true.
• Activity tracking — Add a timestamp to any incident update using the Hugo track shortcode so users see exactly when the situation changed.
• Git-powered updates — After the initial deploy, editing files locally and pushing to GitHub triggers a Netlify build, so the incident announcement goes live in a matter of seconds.

Who is it for?

Netlify StatusKit fits teams that already use GitHub and Netlify and want to publish incident status without switching to a commercial service.

• SaaS and API providers who want a transparent status page integrated into their existing Netlify/GitHub workflow, and who want to avoid a separate status-page subscription.
• Open-source maintainers who need a lightweight way to communicate outages and maintenance windows to their user base, and who are comfortable editing Markdown files.
• Hugo developers who want a fully customizable status page; the template exposes the complete Victor-Hugo source, so layouts, styles, and content structure can be modified freely.

Use cases

Netlify StatusKit supports several practical workflows:

• Publishing incident announcements: create a Markdown incident, push it to GitHub, and Netlify deploys the update to the status page automatically.
• Reporting on multiple systems: tell users about a CDN issue without implying the API is down by marking only the affected system on the incident.
• Self-hosting a status page: keep full control of the code and data by running your status page as a static site on your own Netlify account.

How does Netlify StatusKit work?

Deploying Netlify StatusKit takes three steps: click a button, set environment variables, and push Markdown incidents to the repository.

1. Click the Deploy to Netlify button and fill in the four required environment variables when prompted.
2. Add or edit incident Markdown files in the repository, using npm run new-incident as a helper to generate the file structure.
3. Push changes to GitHub; Netlify builds the Hugo site and serves the updated status page.

For local development, run npm install to download dependencies and npm start to start the development server. The command npm run dependencies checks whether Hugo is installed and downloads it if it is missing.

Pricing

The template itself is free to use under the MIT License. You will need a Netlify account to host the site; Netlify's own plans apply to the hosting, but the template code has no cost.

Alternatives

A few other status page products exist for comparison.

• Statuspage.io — a commercial hosted status page service.
• Cachet — a self-hosted status page project.

FAQ

Is Netlify StatusKit free?

Yes, the template is released under the MIT License, so you can use, modify, and distribute it freely. It does not include Netlify hosting, which is covered by Netlify's own pricing.

How do I create a new incident?

Run npm run new-incident in the repository root. You'll answer a few questions, and Hugo generates a new Markdown file in site/content/incidents pre-filled with your responses. Edit the file to describe the situation and push it to GitHub.

What does resolved = true do?

It marks an incident as resolved in the front matter of the Markdown file. When all incidents have a resolved state of true, the status page shows everything as operational again.

Is Netlify StatusKit still maintained?

The project is no longer maintained by Netlify staff. According to the README, Netlify doesn't have the staff to process contributions, and the project is now community-led.

Can I customize which systems appear?

Yes. Open site/config.toml and edit the global systems variable to add or remove the systems you want to report on. Then when you open or modify an incident, you can change the status of each system individually.