Ghost - Github Hosted Status Page

A status page to host on GitHub pages. Its uses GitHub issues to show the status of your service components and incidents.

Do you like it? Support this project!

Demo

https://ricardomaia.github.io/ghost/

Get started

Note that you must have Node.js and Git installed on your computer and a GitHub account.

Fork the repository. Click on the right top button of respository page.

Now clone your forked repository on your computer. On terminal type:

git clone https://github.com/[your_username]/ghost.git

Install the dependencies...

cd ghost
npm install

Setup

Ghost provides a console script to create all required label on your repository. But first you need set a personal access token. Go to https://github.com/settings/tokens and click on button "Generate new token". On the "Note" input field give an friendly name like "ghost" and check the options:

• repo:status
• repo_deployment and
• public_repo

So click in the "Generate token". You will see a string like 23ffabb27cb569eeb3da9599ac61608511477046. Save it to later!

node setup.js

Paste your generated token.

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the start script in package.json including the parameter --host 0.0.0.0.

 "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --host 0.0.0.0",
    "publish": "npm run build && node_modules\\.bin\\gh-pages.cmd -d public"
  },

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

Configuration

Set your config.json file like this, replacing user and repo with your username and repository name.

{
  "user": "ricardomaia",
  "repo": "statuspage",
  "auto_refresh": true,
  "incident_days": 365
}

Set auto_refresh true or false to enable or disable page update each 60 seconds.

Finally, incident_days, defines the number of days in the issues history to be queried.

⚠️ Development mode uses a local json file instead of connect GitHub API.

Building and running in production mode

To create an optimised (production) version of the app:

npm run build

And run it:

npm run start

⚠️ The production mode uses the settings in your config.json file and connects to the GitHub API.

Deploying to GitHub Pages

The command below compiles a production version and push to gh-pages branch of your repository.

npm run publish