サイト構築の実施記録

Phase 1GitHub リポジトリ作成

HTML コンテンツの正本を保管する場所を用意した。

狙い: 「設計時の意思決定」で議論したとおり、教科書と学習ノートを一つのリポジトリに統合（案 X、フラット構造）。

Phase 2ローカル準備と初期 HTML 配置

各 PC で作業できるよう SSH 鍵を設定し、リポジトリを clone、最小限の HTML を配置した。

# 1. SSH config を設定（macOS Keychain 連携）
~/.ssh/config:
Host github.com
  HostName github.com
  User git
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519

# 2. clone
cd ~/Documents
git clone git@github.com:lunelukkio/lunelukkio-site.git

# 3. 初期ファイル配置
- index.html (ルート目次)
- README.md
- assets/style.css (共通スタイル)
- claude-html-project/index.html
- claude-html-project/chp-001.html (既存からの移行)

# 4. 初回コミット & push
git add . && git commit -m "初期サイト構造を追加" && git push

※ この段階で SSH 鍵問題に遭遇（後述）。

Phase 3Cloudflare アカウントと DNS 移管

名前.com で管理されていたドメインの DNS を Cloudflare に引き継いだ。

1. Cloudflare アカウント作成（無料）
2. 「Add a site」で lunelukkio.com を追加
3. Cloudflare が 2 つのネームサーバーを提示
4. 名前.com Navi で「ネームサーバー変更」→ Cloudflare の 2 つを設定
5. 数分〜数時間で DNS 反映、Cloudflare ダッシュボードが「Active」に変化

確認時のチェックポイント: DNS Setup = Full（Cloudflare が完全管理）、Registrar = Onamae.com（登録元はそのまま）。

Phase 4Cloudflare Pages デプロイ

GitHub リポジトリと Cloudflare Pages を連携させ、push のたびに自動デプロイされる体制を作った。

デプロイ成功すると Cloudflare が仮 URL lunelukkio-site.pages.dev を発行し、サイトが閲覧可能になった。

Phase 5独自ドメイン接続

Cloudflare Pages のプロジェクトに lunelukkio.com をカスタムドメインとして紐づけた。

1. Pages プロジェクトの「Custom domains」→「Set up a domain」
2. ドメイン名 lunelukkio.com を入力
3. Cloudflare が CNAME レコードを自動生成（@ → lunelukkio-site.pages.dev）
4. 「Activate domain」で確定 → 「Verifying」を経て「Active」
5. SSL 証明書は Cloudflare が自動発行（5〜15 分）

この時点で https://lunelukkio.com が誰でも閲覧可能になっている（認証はまだ）。

Phase 6Cloudflare Access による認証保護

本人だけが閲覧できる状態にするため、Zero Trust（Cloudflare Access）を有効化し、Google ログインを認証プロバイダーに設定した。

このフェーズが最も手順が多く、3 つのパートに分かれる。

Part A: Cloudflare 側で Google プロバイダー追加を開始

• Zero Trust → Integrations → Identity providers → Add new identity provider → Google
• Callback URL https://lunelukkio.cloudflareaccess.com/cdn-cgi/access/callback を確認

Part B: Google Cloud Console で OAuth クライアント作成

1. 新規プロジェクト lunelukkio-access 作成
2. OAuth consent screen 設定（Branding + Audience タブ）
   • App name: lunelukkio-site
   • User support email / Developer contact: lunelukkio@gmail.com
   • Authorized domains: cloudflareaccess.com、lunelukkio.com
   • User type: External、Publishing status: Testing
   • Test users に lunelukkio@gmail.com を追加
3. OAuth 2.0 Client ID 作成（Web application）
   • Authorized redirect URI に Cloudflare の Callback URL を貼り付け
   • Client ID と Client Secret を取得

Part C: Cloudflare に戻って Client ID / Secret を入力 → テスト

• App ID 欄に Client ID、Client secret 欄に Client Secret を貼り付け
• Save → Test ボタンで動作確認
• 「Your connection works!」+ 自分のメールアドレス表示で成功

アプリケーション登録とポリシー

• Access controls → Applications → Add an application → Self-hosted and private → Public DNS
• Destinations: lunelukkio.com（subdomain・path 空欄、全パス保護）
• Authentication: Accept all = Off、Google のみチェック、Instant authentication = On
• Access policies: Only me、Action = Allow、Include: Emails = lunelukkio@gmail.com