コンテンツにスキップ
Reports
Zenn Dev Easy Easy Articles 89318e4d0acb4f

【週末2日】Claude Codeでコミュニティポータルサイトを構築・リリースするまでの全記録

  • URL: https://zenn.dev/easy_easy/articles/89318e4d0acb4f
  • 日付: 2026-06-26
  • Tier: Tier 3
  • 要旨: 週末2日間でClaude Codeを使い、エンジニアコミュニティのポータルサイト（Next.jsではなくPython + Jinja2 + GitHub Pages構成）を構築してリリースした開発記録。コードの実装だけでなく仕様書整備・Skill作成・Issue起票・PR作成・セキュリティ監査・README作成・リリースノート整備まで開発に関わるほぼ全作業をClaude Codeで完結した点が特徴的だった。CLAUDE.mdをエントリポイントとして最小限に保ち、詳細はSkill・Rules・ステアリングドキュメントに委譲する4層構造でコンテキスト共有を設計し、Speaker DeckのoEmbed API・Google Slides・Docswell等の埋め込みURL自動生成ロジックやspeakers.yaml一元管理による全ページへの即時反映など、決定論的なビルドスクリプト設計が具体的に示されている。

詳細

技術スタック選定

  • 動的機能・ログイン・書き込み不要の静的サイト
  • データ管理: YAML（イベントごとにファイル分割）
  • ビルド: Python + Jinja2
  • ホスティング: GitHub Pages
  • CI/CD: GitHub Actions（push → 自動ビルド＆デプロイ）

CLAUDE.mdの設計方針

  • エントリポイントとして最小限（プロジェクト概要・コマンド・ドキュメントの所在のみ）
  • 詳細は .claude/rules/（開発ルール・登壇者管理ルール）に委譲
  • 4層コンテキスト共有: CLAUDE.md / Skill / Rules / .steering/

スライド埋め込みURL自動生成

  • Google Slides: URLパターンマッチでembedURL構築
  • Docswell: パスから日付サフィックスを除去してslug取得
  • Speaker Deck: oEmbed API呼び出し（結果はキャッシュ）
  • slides.com, SlideShare: それぞれURL変換ルール

登壇者管理設計

  • data/speakers.yaml で一元管理
  • 各イベントYAMLには speaker.id と speaker.name のみ記載（プロフィール情報は書かない）
  • ビルド時にspeakers.yamlとマージ → 全イベントページに即時反映
  • アイコン優先度: icon_url（直接指定）→ GitHubアバター（フォールバック）

Claude Codeで完結した作業範囲

  • 仕様ドキュメント整備（docs/specs/ に8ファイル）
  • Skill・Rules作成（/update-specs スキル）
  • 技術選定の相談・Issue起票・PR作成
  • サービス命名・README英日作成・バッジ追加
  • セキュリティ監査・ブランチ保護（GitHub Ruleset設定）
  • Git履歴の機密データ完全削除・リリースノート整備
Zenn Dev Easy Easy Articles 87042b3ecb2517Zenn Dev Easy Easy Articles 8a92c47f0b3d51