はじめに

こんにちは！エンジニアリングコミュニティ「Easy Easy」の運営・広報を担当している@unsoluble_sugarです。

本コミュニティでは、月1回のLTイベント「完全に理解したTalk」を2019年末から開催しています。これまで継続的にイベントを重ね、多くの登壇者による発表が蓄積されてきました。

メンバー有志の方がまとめてくれているリンク集はあったものの、プラットフォームの性質上、多角的な検索や情報集約のUXとしては物足りない部分があり、「あの話、どの回だっけ？」「◯◯さんのこれまでのLT一覧を見たい」といった要望を満たすのが難しい状況でした。

https://qiita.com/segavvy/items/7245a2547ea0fa046de5

そこで、これらの情報を一箇所に集約したポータルサイトを作ることにしました。

https://easy2.jp/

今回はこのサイトを Claude Code と一緒に作り、週末2日間でリリースに漕ぎ着けるまでの過程を余すことなくお伝えします。

技術スタックの選定

今回のサイトは、過去のイベント情報・発表資料・登壇者情報を集約して閲覧するだけのシンプルなものです。動的な機能やログイン、書き込み等も不要なため、静的サイトとして構築する方針で進めました。

Next.js や Hugo といったフレームワークも選択肢にありましたが、イベントデータを静的HTMLに変換するだけのシンプルな構成にしました。データの追加・修正も YAML ファイルを編集するだけで済むので、メンテナンスしやすい設計です。

• データ管理: YAML（イベントごとにファイル分割）
• ビルド: Python + Jinja2（テンプレートエンジン）
• ホスティング: GitHub Pages
• CI/CD: GitHub Actions（pushで自動ビルド＆デプロイ）

ホスティング先は GitHub Pages を採用しました。個人で使う小規模なWebサービスをバイブコーディングする際に手軽で重宝しており、以前の記事でもGitHub Pagesを使った個人ツールの開発について書いています。

https://zenn.dev/unsoluble_sugar/articles/beaac7bbf9ee7a

CLAUDE.mdとルールファイルによるコンテキスト共有

Claude Code を使った開発で重要だったのが CLAUDE.md と .claude/rules/ の整備です。

Claude Code は CLAUDE.md を毎回の会話で自動的に読み込むため、「前回の会話で伝えたこと」を繰り返す必要がありません。プロジェクトの構成概要、ビルドコマンド、データ追加ワークフローなどを記載しています。

CLAUDE.md                # プロジェクトガイド（構成概要・開発コマンド）
.claude/rules/
├── development.md       # 開発ルール・コーディング規約
└── speaker_profile.md   # 登壇者プロフィール管理ルール
docs/specs/              # 仕様書（ページ設計、データスキーマ等）

ドメイン固有のルール（登壇者データの一元管理方針、アイコンURLの優先度など）は .claude/rules/ に分離しています。こちらも自動読み込みされるため、データ追加時にルールに沿った対応をしてくれます。

CLAUDE.md 自体には全体像の把握に必要な最小限の情報だけを残し、詳細は各ドキュメントへのポインタで参照する構成にしています。情報の重複を避けつつ、コンテキストウィンドウの消費も抑えられます。

なお、今回は簡易的なサイト構築ということもあり、Claude Codeのhooksやskillsといった機能は活用していません。CLAUDE.md と .claude/rules/ によるコンテキスト共有だけで十分進められました。より本格的な開発では、これらの仕組みを組み合わせることでさらに効率化できると思います。

ちなみに、筆者が仕事で携わっているゲームプロジェクトでは、Skillを使ったE2Eテスト自動化にも取り組んでいます。興味のある方はこちらの記事もご覧ください。

https://zenn.dev/unsoluble_sugar/articles/2a1f9e08ac9980

以下、実際に使用しているファイルの内容です。

pip install -r requirements.txt   # 依存パッケージ
python src/build.py               # サイトビルド → output/ に出力

- id: speaker_id             # 一意のID（必須）
  name: 表示名               # 表示名（必須）
  icon_url: ""               # connpassアイコン等（任意、上記優先度で自動解決）
  twitter: ""                # X(Twitter)アカウント名（@なし）
  github: ""                 # GitHubアカウント名
  qiita: ""                  # Qiitaアカウント名（任意）
  zenn: ""                   # Zennアカウント名（任意）
  website: ""                # Webサイト（任意）

talks:
  - title: 発表タイトル
    speaker:
      name: 表示名           # 可読性のために残す
      id: speaker_id         # speakers.yaml の id と一致させる（必須）
    slide_url: ...

ローカルでのサイト構築

サイトの基本構造

最初のコミットで、以下のページ構成で一気に構築しました。

• トップページ
• イベント詳細ページ
• 登壇者一覧ページ
• About ページ

全イベント分のYAMLデータを用意し、ビルドスクリプトでHTMLを生成。ローカルで python -m http.server を使って表示を確認しながら開発を進めました。

トップページ（イベント一覧）

全イベントをカード形式で新着順に一覧表示するページです。

各カードにはイベント番号、タイトル、開催日、発表数、発表タイトルのプレビューを表示しています。

年度フィルターボタンで表示を絞り込めるようにしました。JavaScript で DOM の表示/非表示を切り替える軽量な実装です。

イベント詳細ページ

各回の詳細情報を表示するページです。

主な要素として以下を実装しました。

• 開催概要: 開催日時、connpassイベントページのリンクを表示
• YouTube動画埋め込み: 配信アーカイブがある場合に動画プレイヤーを表示
• イベントレポート: イベントレポ記事がある場合はリンクボタンを表示
• 発表カード: 登壇者のアイコン・名前・SNSリンク、発表タイトル、タグを表示
• 動画再生箇所のリンク: 各発表の開始時間へのリンクを生成
• スライド埋め込み: 発表資料をページ内で直接閲覧可能（iframe）
• 関連リンク: スライドURL・関連記事がある場合はリンクボタンを表示

登壇者のプロフィール情報は data/speakers.yaml で一元管理しており、ビルド時にイベントYAMLの speaker.id とマージされます。これにより、プロフィールの変更は speakers.yaml を編集するだけで全イベントページに反映されます。

# data/speakers.yaml
- id: unsoluble_sugar
  name: 星影
  icon_url: https://github.com/unsolublesugar.png
  twitter: unsoluble_sugar
  github: unsolublesugar
  zenn: unsoluble_sugar
  website: https://linktr.ee/unsoluble_sugar

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

発表資料は Speaker Deck、Google Slides、Docswell など様々なサービスが使われています。YAMLに slide_url（閲覧用URL）を記載するだけで、ビルド時に各サービスの埋め込みURLを自動生成するようにしました。

def generate_slide_embed_url(slide_url: str, sd_cache: dict) -> str:
    # Google Slides
    if "docs.google.com/presentation" in slide_url:
        m = re.search(r"/d/([a-zA-Z0-9_-]+)", slide_url)
        if m:
            return f"https://docs.google.com/presentation/d/{m.group(1)}/embed"

    # SlideShare（secretリンクはスキップ）
    if "slideshare.net/" in slide_url and "/secret/" not in slide_url:
        slug = slide_url.split("?")[0].rstrip("/").split("/")[-1]
        return f"https://www.slideshare.net/slideshow/{slug}/embed"

    # Docswell
    if "docswell.com/s/" in slide_url:
        after_s = slide_url.split("/s/")[1]
        parts = after_s.split("/")
        if len(parts) >= 2:
            slug_full = parts[1].split("#")[0]
            slug = slug_full.split("-")[0]  # 日付サフィックス除去
            return f"https://www.docswell.com/slide/{slug}/embed"

    # slides.com
    if "slides.com/" in slide_url and "/embed" not in slide_url:
        clean = slide_url.split("?")[0].split("#")[0].rstrip("/")
        return clean + "/embed"

    # Speaker Deck（oEmbed API経由）
    if "speakerdeck.com/" in slide_url:
        return _fetch_speakerdeck_embed(slide_url, sd_cache)

    return ""

Google Slides・Docswell・slides.com は URL のパターンマッチで埋め込みURLを組み立てています。Speaker Deck は oEmbed API を呼び出してiframeのsrc URLを取得する方式です。API呼び出しの結果はキャッシュしておき、次回以降のビルドでは再取得しないようにしています。

登壇者一覧ページ

過去に登壇いただいた方々のプロフィールと登壇履歴をまとめたページです。

• 検索ボックス: 名前やIDでリアルタイム検索
• ソート切替: 登壇回数順 / 最新イベント順 / 名前順をボタンで切り替え
• 登壇者カード: アイコン、名前、SNSリンク（X, GitHub, Qiita, Zenn等）、登壇回数、発表履歴の一覧を表示

アイコン画像は speakers.yaml の icon_url フィールドを最優先とし、未設定の場合は GitHub アバター（https://github.com/{username}.png）にフォールバックする仕組みです。

About ページ

コミュニティの紹介、統計情報（イベント開催数、LT発表数、登壇者数）、運営メンバー、参加方法などをまとめたページです。

統計情報はビルド時にYAMLデータから自動集計されます。

GitHub Pages へのデプロイ

ローカルでの動作確認がある程度済んだ段階で、GitHub リポジトリにプッシュし、GitHub Pages での公開に移りました。GitHub Pages の基本的な仕組みや初期設定については、公式ドキュメントを参照してください。

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

GitHub Pages の準備

リポジトリの Settings → Pages から、ソースを「GitHub Actions」に設定します。

ブランチ指定方式（gh-pages ブランチ等）だと、ビルド成果物をリポジトリにコミットする必要がありますが、Actions ワークフローからの直接デプロイであれば、ビルド成果物をgit管理せずに済み、pushをトリガーにビルドからデプロイまで一気通貫で実行できます。

GitHub Actions ワークフロー

main ブランチへのプッシュをトリガーに、ビルドとデプロイが自動で実行されます。ワークフローの内容はシンプルで、Python のセットアップ → 依存パッケージのインストール → build.py の実行 → output/ ディレクトリを GitHub Pages にアップロード、という流れです。

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v5
        with:
          python-version: '3.11'
          cache: 'pip'
      - run: pip install -r requirements.txt
      - run: cd src && python build.py
      - uses: actions/upload-pages-artifact@v3
        with:
          path: output

  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/deploy-pages@v4

デプロイして表示確認

初回プッシュ後、GitHub Actions のビルドが成功すると https://ユーザー名.github.io/リポジトリ名/ でサイトが公開されます。以降は Claude Code でコミット＆プッシュまで一気に指示できるので、修正→デプロイ→確認のサイクルが数十秒単位で回せるようになりました。

イベントデータの地道な修正

初期データの収集は Claude Code に任せていたのですが、情報ソースとなるWebページによっては Web fetch でページ全体を取得しきれずデータが欠落するケースがありました。

また、connpass や YouTube の概要欄にそもそも記載されていない情報（スライドURL、発表者のSNSアカウント等）も多く、結果としてかなりの量の手動確認・修正が必要になりました。

具体的には以下のような修正を行っています。

• connpassイベントページURL — 複数回分で間違ったURLが設定されていたため修正
• 登壇者の割り当てミス — 発表者の取り違えが複数件あり修正
• 発表順の修正 — YouTube動画の再生順と一致するように並べ替え
• YouTube タイムスタンプの追加 — 欠落していた発表開始時間を動画から確認して補完
• 登壇者の表示名変更 — connpass名からの変更希望に対応
• スライドURLの追加 — リンクが欠落していた発表に資料URLを追加

とはいえ、修正作業自体は Claude Code に「#28のタイムスタンプを追加して」のように指示すると、YAMLの編集・リビルド・確認までを一気に進めてくれるので、人間がやるのは「正しい情報の確認」に集中できました。

公開後の改善

デプロイして実際のブラウザで確認すると、ローカルでは気づかなかった問題がいくつか見つかりました。公開後に行った改善は以下の通りです。

• YouTube埋め込み再生の実装と修正
• レスポンシブデザイン対応
• イベント一覧の使い勝手改善
• 登壇者一覧の改善
• フッター・OGP・メタ情報の整備
• 企画コーナーページの新設
• 登壇者個別ページの追加

それぞれの詳細を順に紹介します。

YouTube埋め込み再生の実装と修正

イベント詳細ページでは、YouTube動画のサムネイルをクリックすると iframe 埋め込みプレーヤーに切り替わり、ページ内で直接再生できる機能を実装しました。ローカル環境（file://）では YouTube ページを新しいタブで開く動作にしています。

ところが、デプロイ後に公開ページでサムネイルをクリックしても何も反応しないという問題が発生しました。原因を調査したところ、テンプレートで <a> タグを <div> タグに変更したことで、クリック動作がJavaScriptのイベントハンドラに完全依存する構造になっていたことがわかりました。ブラウザキャッシュで旧JSが残っている場合や、JS読み込み失敗時にリンクが無反応になる問題がありました。

修正として <a> タグベースに戻し、JavaScript で preventDefault() してから iframe に差し替える実装に変更しました。これにより、JS が無効でも YouTube へのリンクとして機能するプログレッシブエンハンスメントが確保できました。

function initYouTubePlayer() {
  const players = document.querySelectorAll('.youtube-player-wrapper');
  if (!players.length) return;

  const isLocal = window.location.protocol === 'file:';
  if (isLocal) return; // ローカルでは<a>タグのデフォルト動作に任せる

  players.forEach(wrapper => {
    const videoId = wrapper.dataset.videoId;
    if (!videoId) return;

    wrapper.addEventListener('click', (e) => {
      e.preventDefault();

      // 公開ページではiframe埋め込みに差し替え
      const iframe = document.createElement('iframe');
      iframe.src = 'https://www.youtube-nocookie.com/embed/'
        + videoId + '?autoplay=1&rel=0';
      iframe.setAttribute('allow',
        'accelerometer; autoplay; clipboard-write; '
        + 'encrypted-media; gyroscope; picture-in-picture');
      iframe.setAttribute('allowfullscreen', '');
      iframe.className = 'youtube-iframe';

      wrapper.innerHTML = '';
      wrapper.appendChild(iframe);
    });
  });
}

レスポンシブデザイン対応

PCでの表示を中心に構築を進めていたので、スマホで実際にアクセスしてみるとモバイル考慮の不足による崩れが複数見つかりました。

主な問題と対応は以下の通りです。

• ヘッダー: ナビゲーションのテキストが折り返して二段になっていたため、「参加する」ボタンをヘッダーから非表示にし、代わりにトップページのヒーローセクションに大きめのボタンとして配置
• イベントカード: 発表タイトルの white-space: nowrap が flexbox の min-width: auto と組み合わさり、カード幅を押し広げて横スクロールが発生。min-width: 0 と overflow: hidden で解決
• 登壇者カード: 発表履歴の「#番号・タイトル・日付」が横一列に間延びしていたため、CSS order で「#番号 日付 / タイトル全幅」の2行レイアウトに変更
• フッター: コピーライト表示を中央寄せに
• ヒーロー統計カード: 3カードのうち開催スケジュールのみ表示し、省スペース化

flexbox や CSS Grid を使ったレイアウトでは、PC表示で問題なくてもモバイルで意図しない挙動になるケースがあるので、メディアクエリでの調整は欠かせませんでした。

イベント一覧の使い勝手改善

過去のイベントがすべて表示されるとスクロール量が膨大になるため、デフォルト表示を現在年のイベントのみに変更しました。「すべて」フィルターは最後に配置し、選択時は12件ずつの「さらに読み込む」ページネーションを導入しています。

年フィルター選択時には、一覧下部に「← 2025年」「2024年 →」のようなナビゲーションボタンを配置。まだ開催されていないイベントのカードには「開催予定」バッジと「参加者・登壇者募集中！」のメッセージを表示するようにしました。

イベント詳細ページにも、ページ下部に前後のイベントへのナビゲーションボタンを配置しています。中央にイベント一覧へのリンク、左右に前後のイベントという3ボタン構成です。

登壇者一覧の改善

登壇回数の多いユーザーの表示領域が大きくなりすぎる問題を、HTML の <details> / <summary> 要素で解決しました。最新3件を常時表示し、4件以上は「他 N件の発表を見る」で展開、展開後は「閉じる」に切り替わります。

検索機能も拡充し、名前やIDだけでなく発表タイトルでもヒットするよう対応しました。マッチしたキーワードをハイライト表示する機能も追加しています。

フッター・OGP・メタ情報の整備

フッターのテキストリンクを整理し、connpass（コミュニティ）と YouTube（チャンネル登録）の2つに絞ってSVGアイコン付きボタンに変更しました。

YouTubeのリンクには ?sub_confirmation=1 パラメータを付けて、チャンネル登録確認ダイアログに直接遷移するようにしています。

また、Open Graph Protocol と Twitter Card のメタタグを全ページに追加し、SNSシェア時のプレビュー表示にも対応しました。OG画像は1200×630pxで用意しています。

<!-- OGP -->
<meta property="og:title" content="{{ site_title }}">
<meta property="og:description" content="{{ site_description }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ site_url }}">
<meta property="og:site_name" content="{{ site_title }}">
<meta property="og:image" content="{{ site_og_image }}">
<meta property="og:locale" content="ja_JP">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ site_title }}">
<meta name="twitter:description" content="{{ site_description }}">
<meta name="twitter:image" content="{{ site_og_image }}">

site_title や site_url 等の値はビルド時に設定ファイル（src/config/settings.py）から注入されるので、テンプレート側はJinja2の変数を参照するだけです。

企画コーナーページの新設

イベント内で実施してきた「チャレンジコーナー」や「ちょこっと深堀り」といった特別企画のアーカイブページを新設しました。

データ管理の工夫

企画コーナーの発表は個人の登壇ではなく運営メンバーや参加者全員で行うものなので、speaker.id = "easy2" という特別なIDを割り当てました。ビルドスクリプトで easy2 を登壇者一覧から除外しつつ、企画ページにのみ表示する仕組みです。

タイトルに「チャレンジコーナー」を含むものはチャレンジセクションに、それ以外（ちょこっと深堀り、sli.doトークタイム等）は深堀りセクションに自動振り分けしています。

番外編企画のデータ追加

前述の企画コーナーは通常のLT発表とは別枠で実施されていたため、既存のイベントデータには含まれていませんでした。過去の動画を見返しながら該当する回の情報をまとめて追加しています。大量のYAMLファイルを効率的に更新するため、Pythonスクリプトで一括処理しました。

登壇者個別ページの追加

サイト公開後に一通り触っていたところ、「◯◯さんがこれまで発表した内容を一覧で見たい」という要望への考慮漏れに気づきました。登壇者一覧ページでは発表タイトルまでは確認できますが、実際に資料や動画を辿るにはイベント詳細ページへ飛ぶ必要があり、登壇回数の多い方ほど掘り下げが不便な構造でした。

そこで、登壇者ごとの個別ページ /speakers/{speaker_id}/ を新設しました。

ページ構成

• ヘッダー: アイコン（大サイズ）、名前、登壇回数、SNSリンク
• 発表履歴カード: 開催日の降順で並ぶ。各カードにはイベント番号・開催日・タイトル・タグ・リンクボタン群（イベント詳細 / スライド / 動画 / 関連記事）を表示
• 下部: 「登壇者一覧に戻る」ボタン

このページでは一覧性を重視して、動画やスライドの埋め込み（iframe）はあえて使わず、シンプルなリンクボタン形式にしています。登壇回数が多い方のページでも表示が軽量になり、発表を俯瞰しやすくなりました。

既存ページからの導線

登壇者一覧ページの各カード、およびイベント詳細ページの発表カードから、登壇者アイコン・名前をクリックすると個別ページへ遷移できるようにしました。ただし speaker.id が tbd（発表者未定）や easy2（コミュニティ企画枠）の場合はリンクにしない条件分岐を入れています。

{% set has_speaker_page = talk.speaker.id not in ('tbd', 'easy2') %}

ビルド処理の拡張

登壇者ごとに個別ページを出力するループを build.py に追加しました。クリーンURL対応として output/speakers/{id}/index.html の構造で出力し、階層が深くなる分 base_path は "../.." を指定しています。

tpl = env.get_template("speaker_detail.html")
for speaker in speakers:
    speaker_dir = speakers_dir / speaker["id"]
    speaker_dir.mkdir(exist_ok=True)
    html = tpl.render(
        speaker=speaker,
        base_path="../..",
        **{k: v for k, v in common_ctx.items() if k != "base_path"},
    )
    (speaker_dir / "index.html").write_text(html, encoding="utf-8")

イベント詳細ページから気になる登壇者のアイコンをタップして、その人の他の発表に飛べる導線ができたことで、サイト内の回遊性が大きく上がりました。

クリーンURL対応

/about.html ではなく /about でアクセスできるよう、ディレクトリベースの出力構造に変更しました。Next.js や Hugo などのフレームワークを使っていればデフォルトで対応されている部分ですが、今回は素のPython + Jinja2 で構築しているため自前で対応する必要がありました。

# Before
output/about.html
output/events/075.html

# After
output/about/index.html
output/events/075/index.html

ビルドスクリプトの出力先と base_path（相対パス）の調整で対応しています。テンプレート内のリンクから .html 拡張子を除去するだけでなく、各ページの階層に応じた base_path を正しく設定する必要がありました。

カスタムドメインの設定

GitHub Pages のデフォルトのまま公開すると、URLが https://ユーザー名.github.io/リポジトリ名/ のようになります。コミュニティのサイトなのに作者個人の名前がURLに含まれるのは少々よろしくないので、カスタムドメインを設定することにしました。

取得したドメインは easy2.jp です。easy2 のような短く汎用性の高いドメイン名はすでに取得済みであることが多く、easy2.com / easy2.net / easy2.org などの主要TLDはいずれも他所で押さえられていました。そんな中で .jp が唯一空いていたというのは幸運でした。

コミュニティ名そのままのドメインが取れるのは稀なので、欲しいドメインがあれば早めに確保しておくのがベストです。

なお、ドメインの取得には XServer Domain を利用しました。

https://www.xdomain.ne.jp/

筆者が普段から使い慣れているという理由で採用していますが、特にこだわりがあるわけではないので、皆さんお好きなドメインサービスで取得すればOKです。

ネームサーバーの設定

最初のハマりポイントがネームサーバーの設定でした。XServer Domain のネームサーバーは以下を使用します。

当初 ns1.xserver.jp（レンタルサーバー用）を設定してしまい、DNS クエリが REFUSED になって全く解決できない状態に。XServer Domain 単体で DNS を使う場合は xdomain.ne.jp のネームサーバーを指定する必要があります。

DNSレコードの設定

続いて XServer Domain の DNS レコード設定で、以下のレコードを追加しました。

Aレコード（IPv4） — GitHub Pages のIPアドレス4つ:

AAAAレコード（IPv6）:

CNAMEレコード — www サブドメイン用:

CNAMEレコードは、www.easy2.jp のようなサブドメインへのアクセスを GitHub Pages のデフォルトドメイン（{ユーザー名}.github.io）へ転送するために設定します。

これにより、easy2.jp と www.easy2.jp の両方からサイトにアクセスできるようになります。GitHub Pages 側では自動的に正規のドメインへリダイレクトされます。

• Configuring an apex domain - GitHub Document

ドメイン所有権の検証

トラブルシュートの一環として、GitHub の Settings → Pages → Verified & approved domains で easy2.jp を追加し、表示された TXT レコードを XServer Domain の DNS に追加しました。

ドメイン所有権の検証は、他ユーザーによるドメイン乗っ取りを防ぐためのセキュリティ機能です。Custom domain の設定保存自体はドメイン検証なしでもできたものの、DNS check のところで赤い × が出続けたため、併せてこちらも対応しました。

https://docs.github.com/ja/enterprise-cloud@latest/organizations/managing-organization-settings/verifying-or-approving-a-domain-for-your-organization

DNS反映の待ち時間

DNS レコードの設定自体は数分で権威ネームサーバーに反映されましたが、各 DNS サーバーへの伝播には時間差がありました。

dig コマンドで Google DNS（8.8.8.8）からは引けるのに、ローカルの ISP DNS ではまだ SERVFAIL が返るなど、環境によってアクセスできたりできなかったりという状態が続きました。

# 権威NSで確認（すぐ反映される）
dig easy2.jp A @ns1.xdomain.ne.jp +short

# Google DNS で確認（数分〜数時間で反映）
dig easy2.jp A @8.8.8.8 +short

# ローカルDNSキャッシュをクリア（Mac）
sudo dscacheutil -flushcache && sudo killall -HUP mDNSResponder

このDNSレコードの反映にかかる時間は、通常数時間〜最大72時間と言われています。

今回の場合は丸一日かかりました。この間、「なにか対応漏れがないか」「設定ミスがないか」など、悶々とした時間を過ごすわけですが…できることはただ祈って待つだけです。

GitHub Pages 側の設定

DNS が反映された後、GitHub Pages の設定画面で Custom domain に easy2.jp を入力して保存します。DNS check が通ると HTTPS 証明書が自動発行され、「Enforce HTTPS」を有効にできます。

正式リリース

DNSが無事に反映された後は、GitHub Pages 側の DNS check も通過し、HTTPS証明書（Let's Encrypt）が自動発行されました。HTTPSでのアクセス、SSL証明書の有効性、リダイレクト動作など諸々のチェックが通ったことを確認し、晴れて正式リリースを迎えることができました。

https://easy2.jp/

参考リンク

https://docs.github.com/ja/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site

https://docs.github.com/ja/pages/configuring-a-custom-domain-for-your-github-pages-site/verifying-your-custom-domain-for-github-pages

https://docs.github.com/ja/pages/configuring-a-custom-domain-for-your-github-pages-site/troubleshooting-custom-domains-and-github-pages

おわりに

Claude Code との対話ベースでの開発は、特にこうした「データ整備 + UI改善」の繰り返しが多いプロジェクトとの相性が良いと感じました。今回のような小規模な静的サイトであれば、週末2日あればリリースまで漕ぎ着けられます。やりたいことを言葉で伝えれば形にしてくれるので、コーディング経験が少ない方にもおすすめできます。

一方で、大量データの一括変更時に意図しない上書きが発生するケースもあり、git diff での差分確認は欠かせません。また、生成されたUI/UXは実際にブラウザやスマホで触ってみると気になる点が出てくるものです。Claude Code に任せっきりにせず、自分の目で確認して改善のフィードバックを重ねることが、完成度を上げるポイントだと感じました。

今回の開発により、これまで課題に感じていた部分は概ね満たせました。過去の発表資料を横断的に探せるポータルとして、今後のコミュニティの活動記録に役立てていければと思います。

なお、他のコミュニティでも同様のポータルサイトを作れるよう、今回の構成をテンプレート化したリポジトリも公開しています。サイトを見てもらって「良いな！」と思った方は、自身のコミュニティに合った形にカスタマイズしてぜひ活用してみてください。

https://github.com/unsolublesugar/engineer-community-portal