📚 lunelukkio.com プライベート教科書サイト 構成図解

名前.com で取得したドメイン lunelukkio.com を使い、Cloudflare の無料枠で
本人だけが見られる AI 製 HTML 教科書サイトを構築するプロジェクトの全体像。

1. 全体アーキテクチャ

ブラウザから教科書が表示されるまでの流れ。

👤 あなた ブラウザでアクセス https://lunelukkio.com Cloudflare DNS 名前.com の NS をここに移管 🔐 Cloudflare Access Zero Trust / Google ログイン lunelukkio@gmail.com のみ許可 ❌ 他人は拒否 認証 OK 📄 Cloudflare Pages HTML を配信（静的ホスティング） push で自動デプロイ 🐙 GitHub リポジトリ lunelukkio-site (Private) 💻 各 PC のローカル git clone / pull / push
図1: アクセスから配信までのデータフロー

2. 使うサービスと料金

レイヤーサービス役割料金
ドメイン名前.comドメイン名の保有取得済み（年額のみ）
DNSCloudflare DNS名前解決無料
ホスティングCloudflare PagesHTML 配信無料・無制限帯域
認証Cloudflare AccessGoogle ログインで保護無料（50ユーザー）
バージョン管理GitHubHTML の保管・同期無料

初期費用・ランニングコスト：ドメイン年額のみ。それ以外は完全無料。

3. なぜ GitHub で一元管理するか

複数 PC で作業する場合の管理方式の比較。

❌ Google Drive で管理 Google Drive PC-A PC-B PC-C ⚠ 同期競合・履歴弱い ⚠ Cloudflare と連携不可 ⚠ どれが最新か不明になる ✅ GitHub で管理 GitHub PC-A PC-B PC-C pull ✓ バージョン履歴あり ✓ Cloudflare Pages 自動連携 ✓ 競合は git が検出 ✓ push でサイトに即反映 日常: pull → 編集 → commit → push push 後 1〜2 分で lunelukkio.com に反映
図2: 管理方式の比較（GitHub 一元管理が最適）

4. 各 PC のフォルダ配置イメージ

各 PC でフォルダの場所は自由。中身は GitHub が同期する。

🐙 GitHub（正本） lunelukkio-site clone / pull / push clone / pull / push 💻 PC-A (Mac) ~/Documents/ └ lunelukkio-site/ ├ .git/ ├ index.html ├ math/ └ english/ 💻 PC-B (Windows) D:\projects\ └ lunelukkio-site\ ├ .git\ ├ index.html ├ math\ └ english\ 💻 PC-C (別の Mac) ~/work/ └ textbook/ ├ .git/ ├ index.html ├ math/ └ english/
図3: フォルダ場所は PC ごとに自由。中身は git が同期

5. 日常の作業フロー

1作業前: git pull で最新を取得
2編集: AI で作った HTML を該当フォルダに配置・修正
3確認: ローカルで HTML を開いて表示確認
4記録: git add . → git commit -m "..."
5公開: git push → 1〜2 分後に lunelukkio.com に自動反映
# 典型的なターミナル操作
cd ~/Documents/lunelukkio-site
git pull
# (HTML を編集・追加)
git add .
git commit -m "数学2章を追加"
git push
# → Cloudflare Pages が自動でビルド&デプロイ

6. セキュリティ（なぜ自分だけ見えるか）

👥 他人 別の Google アカウント 👤 あなた lunelukkio@gmail.com 🔐 Cloudflare Access ポリシー: Allow if email = lunelukkio@gmail.com ❌ 403 Forbidden 教科書は見えない ✅ 教科書を閲覧 セッション 24 時間
図4: メールアドレスベースのアクセス制御

🔒 通信

HTTPS 自動発行（Cloudflare）

全通信暗号化

🆔 認証

Google ログイン必須

セッション 24 時間

🚫 認可

メアド一致のみ Allow

他人は 403 拒否

📦 リポジトリ

Private 設定

GitHub 側でも非公開

7. 構築フェーズ一覧

#フェーズ所要時間
1GitHub リポジトリ作成10分
2ローカル + 初期 HTML15分
3Cloudflare アカウント + DNS 移管30分（反映待ち含む）
4Cloudflare Pages デプロイ15分
5独自ドメイン接続10分
6Cloudflare Access 認証設定20分
7各 PC セットアップPCごと 10分

詳細手順は docs/plan.md を参照。

8. このプロジェクトの管理ファイル

/Users/makoto_natsuharu/Documents/claude/html_project/
├── CLAUDE.md                       ← プロジェクト記憶
└── docs/
    ├── plan.md                     ← 詳細実行計画（手順書）
    └── learning/
        └── architecture.html       ← 本ファイル（図解説明）

作成: 2026-05-20 / lunelukkio personal project