Obsidian Digital Garden + Cloudflare Pages + Cloudflare Access 構築手順

概要

Obsidian Vaultから選択的にノートを公開し、Cloudflare Pagesでホスティング、Cloudflare Accessで認証付きアクセスを実現する。

構成図

Obsidian Vault
  ↓ dg-publish: true フラグ
Digital Gardenプラグイン
  ↓ push
GitHubリポジトリ（非公開）
  ↓ webhook
Cloudflare Pages（自動ビルド＆ホスティング）
  ↓
Cloudflare Access（認証ゲート）
  ├─ 職場: IP一致 → 即アクセス
  └─ 家/モバイル: ワンタイムPIN（メール）→ アクセス

コスト: $0（全サービス無料枠内）

Step 1: GitHubリポジトリ作成

1. GitHubにログイン
2. New Repository作成
   • リポジトリ名: digital-garden（任意）
   • Private に設定（推奨）
   • README初期化: チェックなし
3. リポジトリURLを控える（例: https://github.com/(username)/digital-garden.git）

Step 2: GitHub Fine-grained Personal Access Token 作成

Digital GardenプラグインがGitHubにpushするために必要。Fine-grained PATを使うことで、特定リポジトリのみに権限を制限できる。

1. GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens
2. Generate new token
3. 設定:
   • Token name: digital-garden-obsidian
   • Expiration: 必要に応じて設定（推奨: 1年）
   • Repository access: Only select repositories → digital-garden を選択
   • Permissions: Contents → Read and write のみ有効化
4. Generate token
5. トークンをコピーして安全な場所に保存（再表示不可）

Step 3: Obsidian Digital Garden プラグイン設定

1. Obsidian → Settings → Community plugins → Browse
2. Digital Garden で検索 → Install → Enable
3. Plugin Settingsを開く

基本設定

公開設定

• dg-publish デフォルト値: false（明示的に指定したものだけ公開）
• Automatically publish on save: 任意（おすすめ: false）

Step 4: Cloudflareアカウント & Pages 設定

4-1. Cloudflareアカウント作成

• https://dash.cloudflare.com/sign-up から登録（無料）

4-2. Pagesサイト作成

1. Cloudflareダッシュボード → Workers & Pages → Create → Pages
2. Connect to Git を選択
3. GitHubアカウントを連携 → digital-garden リポジトリを選択
4. Build設定:
   • Framework preset: None（または Hugo / Jekyll など、Digital Gardenの生成物に応じて）
   • Build command: デフォルト（Digital GardenがHTML生成済みの場合）または npm run build
   • Build output directory: dist または docs（Digital Gardenの出力先に合わせる）
5. Save and Deploy

4-3. ドメイン設定（任意）

• Cloudflare Pagesは *.pages.dev ドメインを自動発行
• カスタムドメインを使う場合は、Pages設定 → Custom domains から追加

Step 5: Cloudflare Access 設定

5-1. Zero Trustダッシュボードアクセス

1. https://one.dash.cloudflare.com/ にアクセス
2. 無料プラン（Free）を選択

5-2. Application作成

1. Access → Applications → Add an application
2. Application type: Self-hosted
3. 設定:
   • Application name: Obsidian Digital Garden
   • Session duration: 24h（任意）
   • Application domain: Cloudflare PagesのURL（例: digital-garden.pages.dev）

5-3. ポリシー設定

Policy 1: 職場IPからのアクセス（認証不要）

• Policy name: Office IP
• Rule:

  Selector: IP
  Operator: is in
  Value: <職場の固定IP>（例: 123.45.67.89 または CIDR: 123.45.67.0/24）
  

• Action: Allow

Policy 2: ワンタイムPIN認証（メールOTP）

1. Policy name: Home OTP
2. Rule:

   Selector: Email
   Add a group
   

3. 許可するメールアドレスを入力
   • Email: (your-email)
4. Action: Allow

デフォルトルール

• 上記ポリシーに一致しないアクセス → Deny

5-4. Application保存

Step 6: テスト & 検証

6-1. Obsidianからテスト公開

1. Obsidianで任意のノートを開く
2. フロントマターに以下を追加:

   ---
   dg-publish: true
   ---
   

3. コマンドパレット（Ctrl/Cmd+P）→ Digital Garden: Publish Current Note
4. GitHubリポジトリにpushされることを確認

6-2. Cloudflare Pagesビルド確認

• Cloudflareダッシュボード → Pages → Deployments でビルドステータスを確認

6-3. アクセス確認

1. 職場IPから: 認証なしで直接アクセスできることを確認
2. 家/モバイルから: Cloudflare Accessのログイン画面が表示されることを確認
3. OTP認証（メール）でログイン → アクセスできることを確認

運用

ノートを公開する

1. Obsidianでノートを作成/編集
2. フロントマターに dg-publish: true を追加
3. コマンドパレット → Digital Garden: Publish Current Note
4. 自動的にCloudflare Pagesにデプロイされる

ノートを非公開にする

1. dg-publish: true を dg-publish: false に変更
2. 再度 Digital Garden: Publish Current Note を実行

認証情報を追加/変更

• Cloudflare Zero Trustダッシュボード → Access → Applications → 対象Application → Policies から編集可能

トラブルシューティング

Digital Gardenがpushに失敗する

• GitHub PATの権限を確認（repo が必要）
• PATの有効期限が切れていないか確認
• リポジトリ名が正しいか確認

Cloudflare Pagesでビルドが失敗する

• Build output directoryが正しいか確認（dist / docs）
• リポジトリにHTMLファイルが含まれているか確認

Cloudflare Accessが機能しない

• Application domainがCloudflare PagesのURLと一致しているか確認
• DNSプロキシが有効になっているか確認（Cloudflareオレンジクラウドマーク）