cState ステータスページ導入・設定手順書

Posted at 2025-09-15

1. プロジェクトの作成方法

A. 新規にお試しリポを作る場合

cState の公式ページにある 💚 Deploy to Netlify ボタンをクリック
GitHub アカウントを選び、新しいリポジトリ（例: cstate-test）を作成
Netlify が自動でビルドし、公開URL（例: https://cstate-test.netlify.app/）が発行される

B. 既存のリポジトリ（例: cotogoto-state）で使う場合

GitHub でリポジトリを作成し、cState をフォークまたはコピー
Netlify にログイン → New site from Git → GitHub のリポジトリを選択
ビルドコマンドに hugo --gc --minify を指定
公開ディレクトリは public
環境変数 HUGO_VERSION に最新の Hugo バージョンを設定（例: 0.140.0）

2. 基本設定（config.yml）

リポジトリ直下の config.yml を編集。

サイト情報

title: "CotoGoto 障害・不具合情報"
baseURL: "https://state.cotogoto.ai/"
languageCode: ja
defaultContentLanguage: ja
params:
  description: "サービスの状態を継続的に監視しており、障害が発生した場合はこちらでお知らせします。"
  logo: "img/cotogoto-logo-2.png"
  useLogo: true

システム（外部リンク対応）

systems:
  - name: ステータス
    category: 稼働状況
    link: https://stats.uptimerobot.com/FhojOcdT1C

カスタムタブ

params:
  customTabs:
    - name: "UptimeRobot ステータス"
      link: "https://stats.uptimerobot.com/FhojOcdT1C"
    - name: "GitHub"
      link: "https://github.com/cotogoto/cotogoto-state"

3. Netlify CMS の導入

Netlify CMS を使うと、GUIでインシデントや設定を編集できます。

必要ファイル

static/admin/index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Status Admin</title>
  <script src="https://unpkg.com/netlify-cms@^2/dist/netlify-cms.js"></script>
</head>
<body></body>
</html>

static/admin/config.yml

backend:
  name: git-gateway
  branch: main

media_folder: "static/img"
public_folder: "/img"

collections:
  - name: "issues"
    label: "インシデント"
    folder: "content/issues"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - { label: "タイトル", name: "title", widget: "string" }
      - { label: "日時", name: "date", widget: "datetime", format: "YYYY-MM-DDTHH:mm:ssZ" }
      - { label: "解消済み?", name: "resolved", widget: "boolean", default: false }
      - { label: "解消日時", name: "resolvedWhen", widget: "datetime", required: false, format: "YYYY-MM-DDTHH:mm:ssZ" }
      - { label: "深刻度", name: "severity", widget: "select", options: ["notice","disrupted","down","major"], default: "notice" }
      - { label: "影響システム", name: "affected", widget: "list", default: [] }
      - { label: "セクション", name: "section", widget: "hidden", default: "issue" }
      - { label: "本文", name: "body", widget: "markdown", required: false }

  - name: "settings"
    label: "サイト設定"
    files:
      - name: "site"
        label: "基本設定"
        file: "config.yml"
        fields:
          - { label: "サイトタイトル", name: "title", widget: "string" }
          - { label: "説明文", name: "params.description", widget: "text" }
          - { label: "ロゴ", name: "params.logo", widget: "string" }
          - label: "カスタムタブ"
            name: "params.customTabs"
            widget: "list"
            fields:
              - { label: "表示名", name: "name", widget: "string" }
              - { label: "リンクURL", name: "link", widget: "string" }

Netlify 側の設定

サイトダッシュボード → Identity → Enable
Git Gateway を有効化
自分のメールを招待して承認
/admin/ にアクセスしてログイン

4. インシデントの運用

インシデントは content/issues/ に Markdown ファイルとして保存されます。
例: 2025-09-15-web-api-down.md

---
title: "APIが応答しない問題"
date: 2025-09-15T10:30:00+09:00
resolved: true
resolvedWhen: 2025-09-15T12:00:00+09:00
severity: down
affected:
  - API
section: issue
---

09:30頃から API が応答しない問題が発生していました。  
12:00 に復旧を確認しました。

5. UptimeRobot との自動連携（オプション）

GitHub Actions を使って、UptimeRobot API の結果を自動で content/issues/ に反映できます。

.github/workflows/uptimerobot-sync.yml を追加
Secrets に以下を登録
- UPTIMEROBOT_API_KEY（Read-only API key）
- GIT_AUTHOR_NAME（例: status-bot）
- GIT_AUTHOR_EMAIL（例: status-bot@example.com）
Workflow 実行でダウン時にインシデント作成、復旧時に resolved へ更新

6. ヘッダーやナビゲーションのカスタマイズ

簡単な方法（差し込み）

layouts/partials/custom/above-header.html
layouts/partials/custom/below-header.html
に HTML を書けば追加可能。

例: layouts/partials/custom/below-header.html

<nav class="top-nav">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/issues/">インシデント履歴</a></li>
    <li><a href="https://stats.uptimerobot.com/FhojOcdT1C" target="_blank">外部ステータス</a></li>
  </ul>
</nav>

完全置き換え

layouts/partials/header.html を作るとデフォルトヘッダーを丸ごと差し替え可能。

7. よくある質問

Q: 404を正常扱いにできる？
→ UptimeRobot では不可。ラッパーの /health API を自作して200返すのが定番。
Q: UA-XXXX形式のAnalytics IDは？
→ UAは廃止済。GA4の測定ID（G-XXXXXX）を googleAnalytics に設定。
Q: 外部リンクを新しいタブで開きたい
→ layouts/partials/nav.html を上書きして target="_blank" を追加。

インストール完了後のチェックリスト

Netlify にデプロイできた
/admin/ にログインできた
テストインシデントが表示された
外部リンク（UptimeRobot）が機能した
（必要なら）自動連携ワークフローが動作した

これで 基本的なステータスページ公開 → 管理画面からのインシデント投稿 → 外部リンク追加 → 自動化＆カスタマイズ まで一通り実現できます ✅

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

cState ステータスページ 導入・設定手順書