Netlify StatusKit でつくる Status ページ

はじめに

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
![Netlify Status Page Kit紹介動画]
(https://i.gyazo.com/13ce0f2d427b21327a3dff25bf80e816.png)

なにができる

• 機能別のステータス掲示
  • ステータスの初期値は 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/タスクランナーの知識があれば、問題なくカスタマイズできるのではないかと思います。