BBB

archives.obsidian-blu.com 構築手順書

ObsidianマークダウンをHTML化してCloudflareサブドメインに静的サイトとして展開する

対象サイト: archives.obsidian-blu.com
展開先: Cloudflare Pages(Direct Upload)
前提: obsidian-blu.com はCloudflareで管理済みの既存ドメイン


概要・構成

この手順書では、以下の構成でサイトを構築します。

obsidian-blu.com         ← 既存の静的サイト(変更なし・影響なし)
archives.obsidian-blu.com ← 新しく構築するアーカイブサイト(本手順の対象)

処理の流れは以下のとおりです:

Obsidan Vault (iCloud)
  ↓ Webpage HTML Export プラグイン
HTML一式(フォルダ階層を維持)
  ↓ Cloudflare Pages Direct Upload
archives.obsidian-blu.com(公開)

主な特徴:

  • Git不要・GitHub不要
  • Quartz不要
  • フォルダ階層(notes / 第1階層 / 第2階層 ...)がURLにそのまま反映される
  • 完全無料(Obsidianプラグイン・Cloudflare Pages無料枠)
  • Cloudflare CDNとSSL自動発行で高速・安全

STEP 1: Obsidian プラグインのインストールと設定

1-1. Webpage HTML Export プラグインのインストール

  1. Obsidianを開き、左下の 設定(歯車アイコン) をクリックする
  2. 左メニューの 「コミュニティプラグイン」 をクリックする
  3. 「コミュニティプラグインを有効化」 がオフの場合は有効化する(制限モードの解除)
  4. 「閲覧」 ボタンをクリックし、検索ボックスに Webpage HTML Export と入力する
  5. 表示されたプラグインをクリックし 「インストール」「有効化」 の順にクリックする

1-2. プラグインの設定

このプラグインの設定は、「プラグイン設定ページ」「エクスポートモーダル(実行時ダイアログ)」 の2か所に分かれている。

プラグイン設定ページ(コミュニティプラグイン一覧 → Webpage HTML Export の「オプション」)

設定はいくつかのセクションに分かれている。Cloudflareへの静的サイト展開で特に関係する項目は以下のとおり:

Page Features(ページ機能)

設定名 推奨設定 備考
Theme Toggle オン推奨 ライト/ダークモード切替ボタンを表示する
Document outline / table of contents オン推奨 右サイドバーに目次を表示する
File navigation tree オン推奨 左サイドバーにフォルダ・ファイルのナビゲーションを表示する
Search Bar オン推奨 ファイルナビゲーション上部に全文検索バーを表示する
Graph View 任意 グラフビューを表示する。オンにすると静的サイト上でも動作する(後述)
Custom head content 任意 カスタムCSS・JS・アナリティクスなどを全ページの <head> に挿入できる。デザイン共通化に活用可能(STEP 6参照)
Favicon path 任意 ブラウザタブに表示されるアイコン画像のパスを指定する

Export Options(エクスポートオプション)

設定名 推奨設定 備考
Only export modified files オン推奨 2回目以降の更新時に変更ファイルのみ出力し、時間を短縮する
Delete old files オン推奨 名前変更・移動したファイルの古いHTMLを自動削除してくれる
Minify HTML オン推奨 HTML/CSS/JSを圧縮してページの読み込みを高速化する

Layout Options(レイアウト)

設定名 推奨設定 備考
Document width 例: 50em コンテンツ幅。em単位で指定するとフォントサイズ基準になる
Sidebar width 例: 20em サイドバー幅

エクスポートモーダル(実行時ダイアログ)

リボンアイコン(左サイドバーの「フォルダ+上矢印」アイコン)をクリックすると開くダイアログ。以下を設定して実行する:

設定 内容
ファイルピッカー(左側) エクスポートするファイル・フォルダを選択する。Vault全体をエクスポートする場合はすべて選択
Export Mode(右側) 「Online Web Server」 を選択する(Cloudflareにアップロードする場合はこれ)
出力先(Browse) デスクトップなど、任意のフォルダを指定する

Export Modeについて: 3つのモードがある。Cloudflare Pagesへのアップロードには必ず 「Online Web Server」 を選ぶこと。

  • Online Web Server:Webサーバーへのアップロード用。ファイルナビゲーション・検索・グラフビューなどすべての機能が動作する
  • HTML Documents:ローカルで開くHTML形式
  • Raw HTML Documents:シンプルなHTMLのみ

フォルダ階層のURL反映について: プラグインはObsidian内のフォルダ構成を維持したままHTMLを出力する。notes/第1フォルダ/第2フォルダ/ファイル名.md というパスは、notes/第1フォルダ/第2フォルダ/ファイル名.html として出力され、URLもそのまま archives.obsidian-blu.com/notes/第1フォルダ/第2フォルダ/ファイル名 に対応する。


STEP 2: HTMLのエクスポート

  1. Obsidianの左サイドバーにある 「フォルダ+上矢印」のリボンアイコン をクリックする(またはコマンドパレット Cmd+PExport to HTML
  2. エクスポートモーダルが開いたら:
    • 左側のファイルピッカー:エクスポートしたいファイル・フォルダを選択する。Vault全体の場合はすべて選択する
    • Export Mode「Online Web Server」 を選ぶ(必須)
    • 出力先(Browse):デスクトップなど任意のフォルダを指定する
  3. 「Export」 ボタンをクリックしてエクスポートを実行する
  4. 完了後、指定したフォルダ(デスクトップなど)に以下のような構成でファイルが出力される:
export-folder/          ← このフォルダをまるごとCloudflareにアップロードする
├── index.html
├── notes/
│   ├── 第1フォルダ/
│   │   ├── 記事1.html
│   │   └── 第2フォルダ/
│   │       └── 記事2.html
│   └── ...
├── lib/               ← CSS・JSアセット
│   ├── styles.css
│   └── ...
└── media/             ← 画像ファイル
    └── ...

確認ポイント: 出力フォルダの中に index.html が存在するか確認する。存在しない場合は、トップページとなるノートに対して index.md という名前を付けて再エクスポートするか、プラグイン設定でホームページのノートを指定する。


STEP 3: Cloudflare Pages プロジェクトの作成とDirect Upload

3-1. プロジェクトの新規作成

  1. Cloudflare Dashboard にログインする

  2. 左側メニューの 「Workers & Pages」「概要」 をクリックする

  3. 画面右上の 「アプリケーションの作成」 ボタンをクリックする

  4. タブで 「Pages」 を選択し、「アセットを直接アップロード」 をクリックする

  5. プロジェクト名 を入力する

    プロジェクト名の例:obsidian-blu-archives
    この名前は初期URL(obsidian-blu-archives.pages.dev)に使われるが、後でカスタムドメインを設定するので、わかりやすい名前なら何でもよい。

  6. 「プロジェクトを作成」 をクリックする

3-2. ファイルのアップロードとデプロイ

  1. アップロード画面が表示されたら、STEP 2で出力した エクスポートフォルダ全体 をそのまま画面にドラッグ&ドロップする
    • フォルダ内のファイルをまとめてドロップするのではなく、フォルダごと ドロップする
    • ファイル数が多い場合は数分かかることがある
  2. アップロードが完了したら 「デプロイ」 ボタンをクリックする
  3. デプロイ完了後、https://obsidian-blu-archives.pages.dev のようなURLで一時的にアクセスできることを確認する

STEP 4: サブドメイン archives.obsidian-blu.com の設定

4-1. カスタムドメインの割り当て

  1. Cloudflare DashboardのPages一覧から、作成したプロジェクトをクリックして設定画面を開く
  2. 上部タブの 「カスタム ドメイン」 をクリックする
  3. 「カスタム ドメインの設定」 ボタンをクリックする
  4. 入力欄に archives.obsidian-blu.com と入力する
  5. 「続行」 をクリックする

4-2. DNS・SSL の自動設定(Cloudflare管理ドメインの場合)

obsidian-blu.com がすでにCloudflareで管理されているため、以下が自動的に処理される:

  • DNSに archives.obsidian-blu.com → Cloudflare Pages へのCNAMEレコードが追加される
  • SSL証明書(HTTPS)が自動発行・適用される

通常、数分以内に https://archives.obsidian-blu.com でアクセスできるようになる。
DNSの伝播に最大で数時間かかる場合があるが、Cloudflare管理ドメインの場合はほぼ即時反映される。

4-3. 動作確認

以下を確認する:

  • https://archives.obsidian-blu.com にアクセスしてトップページが表示される
  • フォルダ階層のページにも正しくアクセスできる(例:https://archives.obsidian-blu.com/notes/第1フォルダ/記事1
  • ノート間のリンクが正しく機能している
  • 既存の https://obsidian-blu.com に影響がないことを確認する

STEP 5: 更新作業(2回目以降)

Vaultを更新してサイトを再デプロイする際の手順:

ドラッグ&ドロップ更新

  1. Obsidianで更新後のノートをエクスポートする(STEP 2 を繰り返す)
  2. Cloudflare DashboardのPagesプロジェクトを開く
  3. 「デプロイ」 タブ → 「デプロイの作成」 をクリックする
  4. 新しくエクスポートしたフォルダをドラッグ&ドロップしてデプロイする

CLIを使った更新(ターミナル操作に慣れている場合の効率化)

Node.jsがインストールされている場合、以下のコマンド1行でアップロードできる:

npx wrangler pages deploy <エクスポートフォルダ名> --project-name obsidian-blu-archives

例:

cd ~/Desktop
npx wrangler pages deploy obsidian-export --project-name obsidian-blu-archives
  • 初回のみ、ブラウザでCloudflareへのログイン認証が求められる
  • 2回目以降は上記コマンド1行で完了する
  • git add / git commit / git push などのGitコマンドは一切不要

STEP 6:(オプション)メインサイトとのデザイン共通化

obsidian-blu.comarchives.obsidian-blu.com の見た目を近づけたい場合、以下の手順でCSSを統一する。

6-1. メインサイトのスタイルを調べる

  1. ブラウザで obsidian-blu.com を開く

  2. F12(または右クリック → 検証) で開発者ツールを開く

  3. 以下の要素のCSSプロパティをメモする:

    • bodyfont-familyfont-sizeline-heightcolorbackground-color
    • h1h2h3font-sizecolorfont-weight
    • リンク(a)の color とホバー時のスタイル
    • コンテンツ幅(max-width)と中央寄せ設定

6-2. カスタムCSSを作成する

メモしたスタイルを基に、以下のようなCSSファイルを作成する(custom.css として保存):

/* ===================================================
   archives.obsidian-blu.com カスタムスタイル
   obsidian-blu.com のデザインに合わせた調整
   =================================================== */

/* 基本スタイル */
body {
    font-family: /* メインサイトと同じフォントを指定 */;
    font-size: 16px;
    line-height: 1.7;
    color: /* メインサイトのテキスト色 */;
    background-color: /* メインサイトの背景色 */;
}

/* コンテンツ幅・中央寄せ */
.markdown-preview-view,
.content,
main {
    max-width: /* メインサイトのmax-widthを指定(例: 960px) */;
    margin: 0 auto;
    padding: 20px;
}

/* 見出し */
h1 { font-size: 2.5em; color: /* メインサイトの見出し色 */; }
h2 { font-size: 2.0em; color: /* メインサイトの見出し色 */; }
h3 { font-size: 1.6em; color: /* メインサイトの見出し色 */; }

/* リンク */
a {
    color: /* メインサイトのリンク色 */;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

6-3. AIを使ったCSS生成(推奨)

CSSの作成はAI(Claude・Geminiなど)に任せると効率的。以下のプロンプトを使う:

プロンプト例(メインサイトのCSSを分析させる場合):

既存ウェブサイト(obsidian-blu.com)とサブドメインサイト(archives.obsidian-blu.com)の
デザインを共通化するためのCSSを生成してください。

以下は既存サイトのCSSです:
[既存サイトのCSSをここに貼り付ける]

ObsidianのWebpage HTML ExportプラグインのエクスポートHTMLに適用します。
body, h1〜h3, a, p, ul, ol, blockquote, pre code の各要素に対して
既存サイトのスタイルを再現するCSSを記述してください。
コンテンツが中央配置され、最大幅が設定されるようにしてください。

6-4. カスタムCSSの適用方法

  1. 作成した custom.css をObsidianの設定フォルダ、またはWebpage HTML Exportプラグインの設定で指定する
  2. プラグイン設定画面で「Custom CSS」または「Additional CSS」の項目に内容を貼り付けるか、CSSファイルのパスを指定する
  3. 再エクスポートして反映を確認する

STEP 7:(参考)Graph View について

ObsidianのGraph Viewをアーカイブサイト上でそのままインタラクティブに表示することは、Webpage HTML Exportプラグインでは直接対応していない。理由はGraph ViewがObsidianアプリ内部の動的機能であり、静的HTMLとして出力できないため。

代替案

方法 難易度 特徴
スクリーンショットを画像として掲載 ★☆☆ 最も簡単。静的な画像として表示
Cytoscape.js でカスタム実装 ★★★ インタラクティブ。JSONデータの別途生成が必要。obsidian-blu.com側で実装済みの方法と同様
Quartzに切り替える ★★☆ Graph View標準搭載。ただしGit連携が前提

obsidian-blu.com のGraph Viewとの統一を検討する場合: 既存サイトで実装済みのCytoscape.jsベースのGraph Viewと同じ graph.json を参照させ、archives.obsidian-blu.com 側にも同様のGraph Viewページを追加することで視覚的統一感を持たせることができる。


トラブルシューティング

アップロード後にページが表示されない

  • エクスポートフォルダのルートに index.html があるか確認する
  • ファイルパスに日本語が含まれる場合、URLエンコードの問題が起きる可能性がある。フォルダ名・ファイル名を英数字に変更することを検討する

ノート間のリンクが切れている

  • エクスポート時にVault全体をエクスポートしているか確認する(一部だけエクスポートすると参照先が欠ける)
  • プラグインの設定で「Relative Links」が有効になっているか確認する

サブドメインにアクセスできない

  • Cloudflare DashboardのDNS設定で archives.obsidian-blu.com のCNAMEレコードが作成されているか確認する
  • ドメインのSSL/TLS設定が「フル」または「フル(厳格)」になっているか確認する

既存サイト(obsidian-blu.com)に影響が出た

  • 本手順ではCloudflare Pages上に別プロジェクトとして作成しているため、既存サイトへの影響はないはず
  • DNSレコードを確認し、obsidian-blu.com@ レコード)が変更されていないことを確認する

まとめ・全体フロー

[1] Obsidianプラグイン設定
    └── Webpage HTML Export をインストール・設定

[2] HTMLエクスポート
    └── Vault(またはフォルダ)をHTMLとして書き出し
    └── フォルダ階層がそのままURLパスに反映される

[3] Cloudflare Pages プロジェクト作成
    └── Workers & Pages → Pages → Direct Upload
    └── プロジェクト名: obsidian-blu-archives

[4] サブドメイン設定
    └── カスタムドメイン: archives.obsidian-blu.com
    └── DNS・SSL は Cloudflare が自動設定

[5] 更新時
    └── 再エクスポート → ドラッグ&ドロップ or wrangler CLI

作成日: 2026年4月3日
対象: obsidian-blu プロジェクト / Bluish Media Tokyo