🔥 Open source static status page. Uses hyperfast Golang & Hugo, minimal JS, super light HTML/CSS, customizable, outstanding browser support (IE8+). Live demo available at linked website.
Clone or download
mistermantas Merge pull request #40 from metaa/metaa-patch-1
Fixed the version string in the footer for v2.0.2
Latest commit 8a1aaf4 Oct 16, 2018
Permalink
Failed to load latest commit information.
.github Add PR template Sep 9, 2018
archetypes Update default.md Aug 8, 2018
exampleSite typo new repo name Aug 30, 2018
images v2-rc1 Jul 24, 2018
layouts Fixed the version string in the footer Oct 16, 2018
static Update index.html Sep 2, 2018
.gitignore Fix #31 Oct 5, 2018
CODE_OF_CONDUCT.md v2 Dev Preview 1 Jul 5, 2018
CONTRIBUTING.md another files Aug 30, 2018
LICENSE.md v2 Dev Preview 1 Jul 5, 2018
README.md Typo on issue example set Sep 23, 2018
theme.toml another files Aug 30, 2018

README.md

cState

GitHub release GitHub last commit GitHub repo size in bytes Discord Chat Twitter Awesome README

Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Completely free with Netlify & GitHub Pages.

Want an example? Click here to see a live demo!

You can also see what an example cState project’s source code.

Looking for contributors! See Contribute section:

Contents


Features

  • Built with Hugo, a hyperfast Golang generator
  • Works not just on mobile, but also on the archaic Internet Explorer 8
  • Comes with a simple, focused, and extremely light design
  • Edit your status page from a simple config file
  • Comes pre-equipped with Netlify CMS for quick admin updates
  • Easy to edit and deploy on Netlify or GitHub Pages
  • Secure, ready for HTTPS, thanks to JAMstack
  • Extensive documentation on the wiki

Getting started

For this tutorial, it is assumed that you have Hugo and Git installed (check with hugo version & git --version).

Production

We encourage you to use Netlify for cState. These are the following options you need to change in deploy settings:

  • Build command: hugo
  • Publish directory: public
  • Add one build environment variable
    • Key: HUGO_VERSION
    • Value: 0.41

The easy way

You can simply click this button to get started:

Deploy to Netlify

This sets up cState with its default settings from the cstate/example repo.


If you want to do this from any branch in this repository, follow the manual instructions:

  1. Download the contents of the exampleSite directory in this repository. This will be your site guts, which will hold the content and configuration for the status page.
  2. Create a themes folder and navigate to it on the command line.
mkdir themes; cd themes;
  1. Now simply add a Git submodule pointing to this repository, like so:
git submodule add https://github.com/cstate/cstate
  1. Set up cState for your liking. It is now ready to be used in production.

Development

  1. Clone this repository in the command line:
git clone https://github.com/cstate/cstate.git
  1. Navigate to the theme directory:
cd cstate-master
  1. Launch the development setup much like this:
hugo serve --baseUrl=/ --theme=cstate-master --themesDir=../..

The main directory is the theme itself (the cState guts, basically) and the exampleSite folder houses all content. Use this local setup to experiment before deploying to production!

If you would like to commit/make a PR, make sure that themesDir is a comment before trying to merge upstream.

Updating

Assuming the production install instructions were followed, keep cState updated by having an up to date Git submodule in the themes folder. containing this repository. Your content will stay separate, as to avoid any conflicts.

If you already have a Git repository set up with a filled up themes/cstate folder, then all you need to do is this:

git submodule foreach git pull origin master

If you have previously used Netlfiy CMS or have made other changes without using the command line, the easiest thing to do is just clone it in a new place, change it how you want to, push those changes, and then you can safely remove the Git folder. So, do this:

git clone --recursive <your repo link goes here> && git submodule foreach git pull origin master && git push origin master

More info about submodules on updating & cloning.

FAQ

Where do issues go?

Using an admin panel (Netlify CMS)

This takes a little more effort to set up but pays off in the long run — see the wiki for up to date information.

Doing it from the Git repository

Create a file in content/issues. The name of the file will be the slug (what shows up in the URL bar). For example, this is what major-outage-east-us.md should look like:

---
title: Major outage in East US
date: 2017-02-30 14:30:00
resolved: true
resolvedWhen: 2017-02-30 16:00:00
severity: down
affected:
  - API
section: issue
---

*Monitoring* - After hitting the ole reboot button Example Chat App is now recovering. We’re going to continue to monitor as everyone reconnects. {{< track "2018-04-13 16:50:00" >}}

*Investigating* - We’re aware of users experiencing unavailable guilds and issues when attempting to connect. We're currently investigating. {{< track "2018-04-13 15:54:00" >}}

Time to break that down.

title: This is the one of the most important parts of an incident. (required)
date: An ISO-8601 formatted date. Does not include time zone. This is when you first discovered the issue. (required)
resolved: Whether issue should affect overall status. Either true or false. (boolean, required)
resolvedWhen: An ISO-8601 formatted date. Does not include time zone. This is when downtime stopped. You may set the time that downtime ended without completely resolving the issue (thus leaving time for monitoring).
severity: If an issue is not resolved, it will have an applied severity. There are 3 levels of severity: notice, disrupted, and down. If there are multiple issues, the status page will take the appearance of the more drastic issue (such as disrupted instead of notice). (required)
affected. Add the items that were present in the config file which should alter the status of each individual system (component). (array, required)
section. This must be issue, so that Hugo treats it as one. (required)

I have more questions!

Check out the wiki.

Contribute

cState needs help to grow, not only would it benefit from stuff like unit tests, but also get influenced by fresh ideas to grow even further.

License

MIT © Mantas Vilčinskas