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 プラグインのインストール
- Obsidianを開き、左下の 設定(歯車アイコン) をクリックする
- 左メニューの 「コミュニティプラグイン」 をクリックする
- 「コミュニティプラグインを有効化」 がオフの場合は有効化する(制限モードの解除)
- 「閲覧」 ボタンをクリックし、検索ボックスに
Webpage HTML Exportと入力する - 表示されたプラグインをクリックし 「インストール」 → 「有効化」 の順にクリックする
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のエクスポート
- Obsidianの左サイドバーにある 「フォルダ+上矢印」のリボンアイコン をクリックする(またはコマンドパレット
Cmd+P→Export to HTML) - エクスポートモーダルが開いたら:
- 左側のファイルピッカー:エクスポートしたいファイル・フォルダを選択する。Vault全体の場合はすべて選択する
- Export Mode:「Online Web Server」 を選ぶ(必須)
- 出力先(Browse):デスクトップなど任意のフォルダを指定する
- 「Export」 ボタンをクリックしてエクスポートを実行する
- 完了後、指定したフォルダ(デスクトップなど)に以下のような構成でファイルが出力される:
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. プロジェクトの新規作成
-
Cloudflare Dashboard にログインする
-
左側メニューの 「Workers & Pages」 → 「概要」 をクリックする
-
画面右上の 「アプリケーションの作成」 ボタンをクリックする
-
タブで 「Pages」 を選択し、「アセットを直接アップロード」 をクリックする
-
プロジェクト名 を入力する
プロジェクト名の例:
obsidian-blu-archives
この名前は初期URL(obsidian-blu-archives.pages.dev)に使われるが、後でカスタムドメインを設定するので、わかりやすい名前なら何でもよい。 -
「プロジェクトを作成」 をクリックする
3-2. ファイルのアップロードとデプロイ
- アップロード画面が表示されたら、STEP 2で出力した エクスポートフォルダ全体 をそのまま画面にドラッグ&ドロップする
- フォルダ内のファイルをまとめてドロップするのではなく、フォルダごと ドロップする
- ファイル数が多い場合は数分かかることがある
- アップロードが完了したら 「デプロイ」 ボタンをクリックする
- デプロイ完了後、
https://obsidian-blu-archives.pages.devのようなURLで一時的にアクセスできることを確認する
STEP 4: サブドメイン archives.obsidian-blu.com の設定
4-1. カスタムドメインの割り当て
- Cloudflare DashboardのPages一覧から、作成したプロジェクトをクリックして設定画面を開く
- 上部タブの 「カスタム ドメイン」 をクリックする
- 「カスタム ドメインの設定」 ボタンをクリックする
- 入力欄に
archives.obsidian-blu.comと入力する - 「続行」 をクリックする
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を更新してサイトを再デプロイする際の手順:
ドラッグ&ドロップ更新
- Obsidianで更新後のノートをエクスポートする(STEP 2 を繰り返す)
- Cloudflare DashboardのPagesプロジェクトを開く
- 「デプロイ」 タブ → 「デプロイの作成」 をクリックする
- 新しくエクスポートしたフォルダをドラッグ&ドロップしてデプロイする
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.com と archives.obsidian-blu.com の見た目を近づけたい場合、以下の手順でCSSを統一する。
6-1. メインサイトのスタイルを調べる
-
ブラウザで
obsidian-blu.comを開く -
F12(または右クリック → 検証) で開発者ツールを開く
-
以下の要素のCSSプロパティをメモする:
bodyのfont-family・font-size・line-height・color・background-colorh1・h2・h3のfont-size・color・font-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の適用方法
- 作成した
custom.cssをObsidianの設定フォルダ、またはWebpage HTML Exportプラグインの設定で指定する - プラグイン設定画面で「Custom CSS」または「Additional CSS」の項目に内容を貼り付けるか、CSSファイルのパスを指定する
- 再エクスポートして反映を確認する
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