はじめに

Webサイトの稼働状況や障害情報をユーザーに掲示する手段として、ステータスページというものがあります。たいてい、Atlassian Statuspage とか有料サービスを利用していることが多いと思いますが、フリーのツールもそれなりにあります。今回、Netlify StatusKit というものを利用して手作りしたことがあった為、紹介します。

Netlify StatusKit とは

静的Webサイト/SPA 向けの PaaS である Netlify が公開しているステータスページ構築のためのテンプレートです。
https://www.netlify.com/status-pages/

静的Webサイトを出力するためのキットとなっており、 Netlify で運用することが可能です。公式の紹介動画があるので、ご覧ください（リンクor画像クリックでYoutube動画に遷移できます）。
https://youtu.be/sCXGMu5QzQs

なにができる

機能別のステータス掲示
- ステータスの初期値は Operational, Under maintenance, Degraded performance, Partial outage, Major outageです。
インシデント情報の投稿/編集/掲示
- インシデントは ActiveとPastの２つのステータスをとります。
- インシデント情報は gulp タスクとしてCLI入力により作成できます。インシデント情報は mdファイルとして保存されます。インシデント情報の編集と削除は md ファイルを直接変更することで実現できます。
インシデント履歴の掲示
- ActiveとPastに関わらず、すべてのインシデントの履歴を掲示します。

デプロイ

まずは上記のリポジトリにある Deploy to Netlify ボタンをつかって、自分のNetlify プロジェクトにデプロイしてみるといいと思います。
Netlify の site と任意の GitHub 上の Git リポジトリとが連携させてあれば、Git リポジトリへのpushを感知してデプロイが実行されます（手動デプロイも可能です）
ちなみに、dist ディレクトリ配下にWebサイトの静的ファイル群が出力されます。実際にインターネットに公開される静的ファイルはこれらになるので、これらを直接アップロードすれば Netlify でなくてもデプロイは可能です。

カスタマイズ

ソースコードが公開されており、自分でカスタマイズして利用することも可能です。
https://github.com/netlify/netlify-statuskit

コードを見ると、静的サイトジェネレーターである Hugo をベースしたものということがわかります。私は Hugo を触った経験はありませんでしたが、それなりにいじれたと思っています（機能追加、デザイン変更など）。基本的な HTML/JavaScript/CSS/タスクランナーの知識があれば、問題なくカスタマイズできるのではないかと思います。