Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@satour

Netlify StatusKit でつくる Status ページ

はじめに

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

Netlify StatusKit とは

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

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

なにができる

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

デプロイ

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

カスタマイズ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?