びびっと！

Quartz と相性の良い公開方法から考える、ブログ・ドキュメント・ナレッジ共有・ホームページ公開の選び方

14 min read

Quartz と相性の良い公開方法から考える、ブログ・ドキュメント・ナレッジ共有・ホームページ公開の選び方

要旨

Quartz のような Markdown ベースの静的サイトジェネレーターは、Cloudflare Pages、GitHub Pages、Netlify、Vercel のような静的ホスティングと相性が良い。 ただし「どこに置くか」より先に、公開したいものが ブログなのか、ドキュメントなのか、ナレッジ共有なのか、会社・個人のホームページなのか を分ける方が失敗しにくい。 結論として、個人の調査アーカイブやObsidian的な知識網は Quartz + Cloudflare Pages、プロジェクト文書は Docusaurus / MkDocs / Starlight + Pages系ホスティング、普通のホームページやポートフォリオは Astro / Hugo / Next.js等 + Pages系ホスティング が有力。 公開先はCloudflare Pagesが汎用性と速度で強く、GitHub PagesはGitHub完結の簡潔さ、Netlifyは編集者向けワークフロー、Vercelはフロントエンドアプリとの連続性が強みになる。

背景・動機

このリポジトリは content/ をObsidian vaultとして扱い、Quartzで公開する前提の調査アーカイブである。 QuartzはMarkdown、wikilinks、バックリンク、グラフビューに強く、デジタルガーデンや研究ノートの公開に向いている。

一方で、公開したいものは必ずしも「知識グラフ」だけではない。 たとえば:

これらは似て見えるが、必要なナビゲーション、検索、編集フロー、権限、更新頻度が違う。 本稿では、QuartzとCloudflare Pagesの相性を起点にしつつ、用途別に公開方法を整理する。

調査内容

まず「公開物の型」を分ける

公開方法は、ホスティングサービス名から選ぶよりも、公開物の型から選んだ方が決めやすい。

型主な読まれ方向くツール向く公開先
調査アーカイブ / デジタルガーデンリンクを辿る、検索する、関連を探索するQuartzCloudflare Pages, GitHub Pages
技術ブログ / 個人ブログ新着順、タグ、RSS、記事単位で読むAstro, Hugo, Eleventy, Next.jsCloudflare Pages, Netlify, Vercel
プロダクトドキュメントサイドバー、バージョン、検索、手順で読むDocusaurus, MkDocs Material, StarlightCloudflare Pages, Netlify, Vercel, GitHub Pages
チーム内ナレッジ検索、権限、共同編集、履歴Notion, Confluence, Obsidian + Git, QuartzSaaS / private repo / 認証付きホスティング
ホームページ / ポートフォリオトップページから目的別に読むAstro, Hugo, Next.js, static HTMLCloudflare Pages, Netlify, Vercel
アプリ寄りWebサイト動的UI、API、プレビュー環境Next.js, Remix, SvelteKit, Astro SSRVercel, Cloudflare Workers/Pages, Netlify

SSGで済むものは、ビルド済みHTMLをCDNに置けばよい。 ログイン、投稿フォーム、決済、ユーザー別表示などが必要になると、静的サイトだけではなく Functions / Workers / API / CMS の設計が必要になる。

Quartz + Cloudflare Pages が強い場面

Quartz は、Obsidian的なMarkdown vaultをWeb化するためのSSGである。 wikilinks、バックリンク、グラフビュー、全文検索、Calloutなど、ノート同士の関係を見せる機能が強い。

Cloudflare Pages は、Git連携またはDirect Uploadで静的サイトをデプロイできる。CloudflareのCDN上に配信され、ビルドもCloudflare側に任せられるため、Quartzのような静的サイトと相性が良い。

この組み合わせが特に向くのは:

  • Obsidian vaultを公開したい
  • 記事よりもノート間リンクを見せたい
  • Markdownを真実の源にしたい
  • GitHubにpushしたら自動公開したい
  • 無料〜低コストで速い静的サイトを置きたい

注意点は、Quartzが「ブログテーマ」ではなく「知識グラフ公開ツール」に近いこと。 時系列ブログ、商品紹介LP、会社サイトのようにトップページ設計やビジュアル表現が重要な場合は、AstroやHugoの方が自然なことがある。

公開先ごとの性格

Cloudflare Pages

Cloudflare Pagesは、静的サイトとフロントエンドアプリをCloudflareのグローバルネットワーク上で配信するサービス。 Git連携、プレビュー、Direct Upload、Functions、Workersとの接続があり、静的サイトから少し動的なWebアプリまで伸ばしやすい。

向く用途:

  • Quartz / Astro / Hugo / Docusaurus / MkDocs などの静的サイト
  • カスタムドメインで高速配信したい個人サイト
  • Cloudflare DNSを使っているサイト
  • 将来WorkersやPages Functionsを足す可能性があるサイト

気をつける点:

  • GitHub Pagesより設定項目は多い
  • フレームワークごとにビルドコマンドと出力ディレクトリの理解が必要
  • 認証付きナレッジ共有は別途Cloudflare Access等の設計が必要

GitHub Pages

GitHub Pages は、GitHubリポジトリから静的サイトを公開する仕組み。 GitHubだけで完結するため、オープンソース文書、個人プロジェクトページ、軽量なドキュメントに向く。

向く用途:

  • GitHub上のOSSドキュメント
  • 個人の技術メモや小さな静的サイト
  • 追加サービスを増やしたくないプロジェクト

気をつける点:

  • 高度なプレビュー環境やエッジ機能は専門サービスの方が強い
  • privateなナレッジ共有や細かいアクセス制御には向きにくい
  • カスタムビルドはGitHub Actions側の理解が必要

Netlify

Netlify は、静的サイトホスティングから始まり、フォーム、Functions、Deploy Preview、CMS的な編集フローまで含むWeb公開基盤。 Jamstack系のブログ、マーケサイト、編集者が関わる静的サイトで使いやすい。

向く用途:

  • ブログ、コーポレートサイト、ドキュメント
  • Pull Requestごとのプレビューが欲しいサイト
  • フォームや簡単なサーバレス機能も欲しいサイト
  • 編集者向けワークフローを組みたいサイト

気をつける点:

  • VercelやCloudflareと比べて、選ぶ理由を「編集フロー」や「Netlify機能」に置くと判断しやすい
  • 大規模・高トラフィック時は料金とビルド制限を確認する

Vercel

Vercel は、Next.jsを中心にフロントエンドアプリのデプロイ体験が強い。 静的サイトも置けるが、強みはプレビュー、フレームワーク統合、Serverless / Edge Functions、Next.jsとの一体感にある。

向く用途:

  • Next.js / React中心のWebサイト
  • アプリ寄りのWebサイト
  • プレビューURLを多用する制作・開発フロー
  • 静的ページから動的機能へ伸ばしたいサイト

気をつける点:

  • 純粋なMarkdown静的サイトだけならCloudflare PagesやGitHub Pagesでも十分
  • Next.jsを使わないなら、Vercelである必然性を一度確認する

ツール別の向き不向き

Quartz

Quartz は、Obsidian vaultやデジタルガーデンを公開する用途に強い。 「完成記事の一覧」より「関連ノートの網」を見せたい場合に向く。

向く:

  • 個人研究ノート
  • 学習ログ
  • 調査アーカイブ
  • Obsidian vault公開
  • エージェントが生成・追記する知識ベース

向きにくい:

  • 会社トップページ
  • 商品LP
  • 見た目重視のポートフォリオ
  • 複雑なバージョン付き製品ドキュメント

Astro / Hugo / Eleventy

ブログやホームページには、汎用SSGの方が扱いやすい。 AstroはコンテンツサイトとコンポーネントUIのバランスが良く、Hugoは高速で成熟、Eleventyはシンプルな静的サイトに向く。

向く:

  • 個人ブログ
  • コーポレートサイト
  • ポートフォリオ
  • 静的なランディングページ
  • Markdown記事 + デザイン自由度が必要なサイト

Docusaurus / MkDocs Material / Starlight

ドキュメントサイトには、サイドバー、検索、バージョン、ナビゲーションが重要になる。 DocusaurusはReact/MDX中心、MkDocs MaterialはPython/MkDocs系、StarlightはAstro系のドキュメントサイトに向く。

向く:

  • OSSドキュメント
  • 社内手順書
  • APIドキュメント
  • チュートリアル
  • バージョン管理された製品資料

Notion / Obsidian Publish / SaaS Wiki

共同編集や権限管理が中心なら、静的サイト化よりSaaSの方が楽な場合がある。 Notion、Confluence、Google Sites、Obsidian Publishなどは、エンジニア以外も直接編集しやすい。

向く:

  • 非エンジニアが頻繁に更新する社内Wiki
  • 権限管理が重要なナレッジベース
  • リアルタイム共同編集
  • 公開よりも編集体験が重要なサイト

ただし、Markdownを真実の源にしたい場合や、将来の移行性を重視する場合は、SaaSのエクスポート品質を確認する必要がある。

用途別の推奨パターン

個人の調査アーカイブ

推奨:

  • 執筆: Obsidian
  • 形式: Markdown + wikilinks
  • 生成: Quartz
  • 公開: Cloudflare Pages

理由:

  • ノート同士のリンクをそのままWebで見せられる
  • Cloudflare PagesのGit連携で自動公開しやすい
  • MarkdownをGitで管理できる
  • 将来、別SSGへ移行しやすい

技術ブログ

推奨:

  • Astro / Hugo / Eleventy
  • Cloudflare Pages / Netlify / Vercel

理由:

  • 日付、タグ、カテゴリ、RSS、OGPなどブログ機能を設計しやすい
  • トップページや記事一覧の見せ方を自由に作れる
  • Quartzよりも「読ませる記事」の導線を作りやすい

OSS・プロダクトドキュメント

推奨:

  • Docusaurus / MkDocs Material / Starlight
  • GitHub Pages / Cloudflare Pages / Netlify

理由:

  • サイドバー、検索、バージョン管理、コードブロックなどが揃う
  • GitHubリポジトリと近い場所で管理できる
  • Pull Requestレビューとドキュメント更新をつなげやすい

小規模チームのナレッジ共有

推奨はチームの書き手で変わる。

エンジニア中心:

  • Obsidian / Markdown
  • GitHub private repo
  • Quartz
  • Cloudflare Pages + 必要なら認証

非エンジニア中心:

  • Notion / Confluence / Google Sites
  • 必要なページだけMarkdownへ移して公開

理由:

  • エンジニア中心ならGitレビューとMarkdown運用が自然
  • 非エンジニア中心なら共同編集・検索・権限の体験が重要

ホームページ・ポートフォリオ

推奨:

  • Astro / Hugo / Next.js
  • Cloudflare Pages / Vercel / Netlify

理由:

  • トップページ、プロフィール、制作実績、問い合わせ導線を作りやすい
  • Markdownだけでなく画像・コンポーネント・レイアウトが重要
  • Quartzのグラフビューは主役になりにくい

判断フロー

flowchart TD
  A[公開したいものは何か] --> B{ノート同士のリンク網が主役?}
  B -->|はい| C[Quartz]
  B -->|いいえ| D{手順書・製品ドキュメント?}
  D -->|はい| E[Docusaurus / MkDocs / Starlight]
  D -->|いいえ| F{時系列記事・ブログ?}
  F -->|はい| G[Astro / Hugo / Eleventy]
  F -->|いいえ| H{動的UIやアプリ機能が必要?}
  H -->|はい| I[Next.js / Remix / SvelteKit]
  H -->|いいえ| J[Astro / Hugo / static HTML]

  C --> K{GitHubだけで完結したい?}
  E --> K
  G --> K
  J --> K
  K -->|はい| L[GitHub Pages]
  K -->|いいえ| M{Cloudflare DNSや高速CDNを使いたい?}
  M -->|はい| N[Cloudflare Pages]
  M -->|いいえ| O{編集者向けプレビューやフォームが重要?}
  O -->|はい| P[Netlify]
  O -->|いいえ| Q{Next.js中心?}
  Q -->|はい| R[Vercel]
  Q -->|いいえ| N

結論

公開方法は「Cloudflare Pagesが良いか、GitHub Pagesが良いか」だけでは決まらない。 先に決めるべきなのは、公開物の性格である。

  • 調査アーカイブ / デジタルガーデン: Quartz + Cloudflare Pages
  • 軽量なOSS文書: Docusaurus / MkDocs / Quartz + GitHub Pages
  • ブログ / 個人サイト: Astro / Hugo / Eleventy + Cloudflare Pages / Netlify
  • Next.js中心のWebサイト: Next.js + Vercel
  • 編集者が多いナレッジ共有: Notion / Confluence / SaaS Wikiを優先し、必要箇所だけ静的公開
  • ホームページ / ポートフォリオ: Astro / Hugo / Next.js + Cloudflare Pages / Vercel / Netlify

このリポジトリのように、Obsidian的なリンク網を育て、調査記事を長期的に増やしていく用途では、Quartz + Cloudflare Pagesはかなり筋が良い。 一方で、将来的に「普通のブログ」「製品ドキュメント」「プロフィールサイト」も作りたいなら、それぞれ別のSSGやテンプレートを選んだ方が自然である。 Quartzは万能のWebサイト作成ツールではなく、Markdownノートのネットワークを公開するための強い道具として位置づけるのがよい。

関連

出典

Graph View

Backlinks