Obsidianに書き溜めた膨大なメモ。自分だけで読み返すのも良いですが、「誰かに共有したい」「自分の知識を体系化して公開したい」と思ったことはありませんか。しかし、ブログのようにきれいに整えてから公開しようとすると、更新が億劫になり、結局ノートが死蔵されてしまいがちです。
そこで注目されているのが、ObsidianをCMS（コンテンツ管理システム）として使い、自分の思考をそのままウェブサイトとして公開する「デジタルガーデン」という手法です。この記事では、無料ツールの「Quartz（クォーツ）」とGitHubを使い、Obsidianの使い勝手を維持したまま自分だけのサイトを作るコツを詳しく解説します。
デジタルガーデンとは？ObsidianとQuartzで思考を公開する理由
デジタルガーデンは、完成された記事を投稿する従来のブログとは異なり、未完成の思考や日々の学びをネットワーク状に公開し、時間をかけて育てていくスタイルを指します。Obsidianの最大の特徴である「ノート同士の繋がり」をそのままウェブに持ち込めるのが最大の強みです。
ここでは、なぜわざわざブログサービスを使わずにObsidianとQuartzを組み合わせるのか、その魅力とメリットについて見ていきましょう。
完成させなくていい「思考の庭」をウェブに作る
ブログを書こうとすると、起承転結を整え、見栄えを気にして……と公開までのハードルが高くなりがちです。デジタルガーデンでは、たとえ数行のメモであっても、それが新しい知識の断片であれば公開して構いません。
庭の植物を育てるように、後から内容を追記したり、別のノートとリンクで繋げたりしながら、徐々に内容を充実させていきます。
- 下書き状態で公開してもいい
- 自分の成長記録がそのままコンテンツになる
- 読者と共に知識を深めていく感覚を味わえる
例えば、プログラミングの学習中に学んだ断片的なコードを公開しておき、数ヶ月後にそれらを繋ぎ合わせて一つの解説ページに育てる。そんな柔軟な発信ができるのが、デジタルガーデンの醍醐味です。
Obsidian Publishを使わずに無料で維持できる
Obsidianのノートを公開する最も簡単な方法は、公式サービスの「Obsidian Publish」を使うことです。非常に便利ですが、月額8ドル（約1,200円〜）からの費用がかかるため、趣味で始めるには少しハードルが高いと感じる方もいるでしょう。
Quartzを使えば、GitHubやVercelといった無料のホスティングサービスと組み合わせることで、月額費用を一切かけずに自分だけのサイトを維持できます。
| サービス | 費用 | カスタマイズ性 | 設定の難易度 |
| Obsidian Publish | 月額 $8〜 | 低め（標準的） | かなり簡単 |
| Quartz + Vercel | 0円 | 非常に高い | 少し慣れが必要 |
| 一般的なブログ | サーバー代など | 制限あり | 簡単 |
「理屈はわかるけれど、設定が難しいのでは？」と不安になるかもしれません。確かに最初はいくつかのツールをインストールする必要がありますが、一度設定してしまえば、あとはObsidianでノートを書いて保存するだけで、自動的にサイトが更新される快適な環境が手に入ります。
グラフビューや双方向リンクがそのまま機能する
Quartzの素晴らしい点は、Obsidian特有のユーザー体験をウェブサイト上でもほぼ完璧に再現できることです。ノート同士を繋ぐ「双方向リンク」はもちろん、リンク先にマウスを重ねた時の「ホバープレビュー」や、知識の広がりを視覚化する「グラフビュー」も動作します。
普通のブログでは、記事を読んだ後に「関連記事」を探す必要がありますが、Quartzなら読者はリンクを辿って、あなたの思考のネットワークを自由に回遊できます。この「迷路を歩くような楽しさ」を提供できるのは、Quartzならではの特徴です。
Quartzでサイトを作る前に準備する3つの環境
Quartzを動かすためには、あなたのPCにいくつかの「道具」を入れる必要があります。普段、プログラミングをしない方にとっては聞き慣れない言葉が出てくるかもしれませんが、手順通りに進めれば大丈夫です。
基本的には、サイトを組み立てるためのエンジン（Node.js）と、ファイルを運ぶためのツール（Git）、そして保存場所（GitHub）の3つを用意します。
Node.jsとGitをインストールする
Quartz 4は、Node.jsという技術を使って動いています。公式サイトから推奨版（LTS）をダウンロードしてインストールしましょう。あわせて、ファイルの変更履歴を管理するGit（ギット）もインストールしておきます。
これらは、あなたのPC内でQuartzが「MarkdownファイルをHTMLに変換する」作業を行うために必要なプログラムです。
- Node.js：18.14以上を推奨
- Git：最新版をインストール
- インストール後はPCを再起動する
例えば、料理を作るときの「コンロ」と「調理器具」を用意するようなものだと考えてください。これらが揃っていないと、いくら材料（ノート）があってもサイトを完成させることはできません。
GitHubのアカウントを作成してリポジトリを用意する
次に、作ったサイトのデータを保存しておくインターネット上の倉庫「GitHub（ギットハブ）」のアカウントを用意します。GitHubは、世界中の開発者が使っている信頼性の高いサービスです。
Quartzの公式リポジトリを「フォーク（コピー）」することで、自分専用のサイトの土台を手に入れることができます。
- GitHubで自分のアカウントを作る
- Quartzのテンプレートを探す
- 「Fork」ボタンを押して自分の場所にコピーする
「自分のノートを公開するなんて恥ずかしい」と思うかもしれませんが、GitHubのリポジトリは後から非公開にすることも可能です。ただし、サイトとして公開するためには、特定のフォルダだけを公開設定にするなどの工夫が必要になります。
公開用のノートを保存する「保管庫」を決める
Obsidianの中にあるすべてのノートを公開する必要はありません。プライベートな日記やパスワードメモなどは隠し、特定のフォルダに入れたノートだけを公開するのが一般的です。
公開用のフォルダを一つ作り、その中に「外に出しても良い知識」だけを移動させましょう。
- 「Public」というフォルダを作る
- 公開したいノートをその中に移動
- 画像ファイルも忘れずに整理する
フォルダ構成がぐちゃぐちゃだと、公開した時にリンクが切れてしまう原因になります。この機会に、ノートの保存場所をシンプルに整理しておくことをおすすめします。
最短15分！Quartzをインストールして初期設定を済ませる
道具が揃ったら、いよいよQuartzをあなたのPCにインストールします。コマンドを打つ作業がありますが、基本的にはコピー＆ペーストで進められます。
自分のPC上でサイトが動いているのを見た瞬間の感動はひとしおです。ここでは、最初のセットアップから画面表示までのステップを解説します。
ターミナルからQuartzをセットアップする
Windowsなら「PowerShell」や「コマンドプロンプト」、Macなら「ターミナル」を開きます。先ほどフォークした自分のGitHubリポジトリを、PCにダウンロード（クローン）する命令を打ち込みます。
git clone https://github.com/あなたのユーザー名/quartz.git
cd quartz
npm install
これにより、Quartzが動くための部品がすべてあなたのPCに揃います。通信環境にもよりますが、数分程度で終わる作業です。
npx quartz create でプロジェクトを開始する
準備ができたら、Quartzに「自分のノートはここにあるよ」と教えてあげます。以下のコマンドを打つと、設定ウィザードが始まります。
npx quartz create
「どのノートを同期するか？」「リンクの形式はどうするか？」といった質問に答えていくだけで、自分専用の設定ファイルが作られます。
「理屈がよくわからない」という項目が出てきたら、ひとまずはデフォルト（標準設定）のまま進めてしまって構いません。後からいくらでも書き換えが可能です。
ローカル環境でサイトが正しく表示されるか確認する
世界中に公開する前に、まずは自分のPCの中だけでサイトを確認してみましょう。
npx quartz build --serve
このコマンドを打った後、ブラウザで http://localhost:8080 にアクセスしてみてください。あなたのObsidianにあるノートが、きれいなウェブサイトの形になって表示されているはずです。
- デザインが崩れていないか
- リンクは正しく飛べるか
- 画像は表示されているか
ここで問題がなければ、いよいよ世界に向けて公開（デプロイ）する作業に移ります。
GitHubへプッシュしてVercelでサイトを公開する
ローカルで確認できたサイトを、インターネット上の誰でも見られる状態にします。ここでは、無料で使える強力なホスティングサービス「Vercel（ヴァーセル）」を使います。
一度紐付けをしてしまえば、あとはGitHubにデータを送るだけで、Vercelが勝手に最新のサイトへと作り替えてくれます。
作成したデータをGitHubへ送信する
PCの中にあるQuartzのファイルを、GitHubの倉庫へと送り返します。これを「プッシュ」と呼びます。
git add .
git commit -m "サイトを初公開！"
git push origin main
この操作により、あなたのGitHubリポジトリが最新の状態になります。
「難しそうだな」と感じるかもしれませんが、この一連の流れはObsidianのプラグインを使えば自動化できるので、今は「そういうものか」と理解しておくだけで十分です。
Vercel（またはCloudflare Pages）と連携してデプロイする
Vercelの公式サイトへ行き、自分のGitHubアカウントと連携させます。公開したいリポジトリ（Quartz）を選択すると、自動でビルド（サイトの組み立て）が始まります。
数分待つと、「https://プロジェクト名.vercel.app」というURLが発行され、あなたのサイトが世界中に公開されます。
- Vercelにログイン
- リポジトリを選択
- 「Deploy」ボタンを押す
驚くほど簡単ですよね。Vercel以外にも、Cloudflare Pagesというサービスを使う方法もあり、どちらも個人利用であれば無料で高速なサイトが運営できます。
独自のドメインを設定して自分だけのURLを持つ
Vercelが発行するURLでも十分ですが、「https://example.com」のような自分だけのドメイン（独自ドメイン）を使いたい場合は、別途設定が必要です。
ドメイン取得サービスでお好みの名前を購入し、Vercelの設定画面で紐付けるだけです。
「確かに費用は少しかかるけれど、愛着が湧くから」という理由で、独自ドメインを取得するユーザーも多いです。もちろん、無料のままでもデジタルガーデンとしての機能に差はありません。
Obsidianから一歩も動かずに記事を更新する運用のコツ
サイトの公開ができたら、次は「いかに楽に更新し続けるか」が重要です。毎回ターミナルを開いてコマンドを打つのは大変ですよね。
Obsidianのプラグインを活用すれば、普段のノート作成の流れを一切止めずに、サイトを更新できる環境が作れます。
Obsidian Gitプラグインで更新作業を自動化する
「Obsidian Git」というプラグインを使いましょう。これを設定すると、ノートを保存した時や、決まった時間おきに、自動でGitHubへデータを送ってくれるようになります。
つまり、あなたはObsidianで文章を書くだけでいいのです。
- 5分おきに自動同期
- バックアップも兼ねられて安心
- コマンド入らずの全自動公開
「同期エラーが起きたらどうしよう」という心配もありますが、基本的には自分一人が使うリポジトリなので、コンフリクト（競合）が起きることは滅多にありません。
公開したいノートに publish: true を設定する
すべてのノートを公開したくない場合は、各ノートの冒頭（プロパティ）に目印をつけましょう。
Quartzの設定で「 publish: true があるものだけを表示する」というフィルターをかけることができます。
---
publish: true
title: 今日学んだこと
---
これにより、書きかけの恥ずかしいメモやプライベートな内容が、うっかり世界中に公開されてしまうのを防げます。
サイトに載せない「プライベートなメモ」を保護する方法
もし「フォルダごと非公開にしたい」という場合は、.gitignore という設定ファイルにそのフォルダ名を書き込みます。
GitHubにすらデータを送りたくない機密性の高い情報は、最初からQuartzのフォルダ外で管理するか、こうした除外設定を徹底しましょう。
- 特定のフォルダを同期対象外にする
- タグを使って公開・非公開を分ける
- ローカル限定の保管庫と分ける
「理屈はわかるが、うっかりミスが怖い」という方は、まずは公開専用の独立した保管庫（Vault）を作ることから始めるのが最も安全です。
Quartzを自分好みに！テーマやレイアウトをカスタマイズする
Quartzの標準デザインもシンプルで素敵ですが、せっかくなら自分らしさを出したいですよね。
Quartz 4はTypeScriptという言葉を使って書かれていますが、デザインの変更だけであれば、決まったファイルの数字や文字を書き換えるだけで対応できます。
quartz.config.ts でサイト名やテーマカラーを変える
サイトのタイトルや、リンクの色、背景色などを変えたい時は quartz.config.ts を開きます。
「この色をもう少し青くしたいな」と思ったら、カラーコードを書き換えるだけです。
pageTitle: サイトのタイトルtheme: 色やフォントの設定enableRSS: 更新情報の配信設定
例えば、自分のブランドカラーが決まっているなら、ここを一箇所いじるだけでサイト全体の雰囲気がガラリと変わります。
quartz.layout.ts でサイドバーや検索窓の配置をいじる
「グラフビューを右側に置きたい」「検索窓を目立たせたい」といった配置の変更は、 quartz.layout.ts で行います。
各パーツ（コンポーネント）がブロックのように定義されているので、その順番を入れ替えたり、不要なものを削除したりできます。
- サイドバーの項目
- フッターのコピーライト
- 関連リンクの表示有無
| パーツ | 役割 | おすすめの配置 |
| Search | 全文検索機能 | ヘッダー右側 |
| Graph | ネットワーク表示 | 記事の末尾またはサイド |
| Table of Contents | 目次 | サイドバー固定 |
| Backlinks | リンク元の一覧 | 記事の最下部 |
カスタマイズしすぎると動作が重くなることもあるので、まずは標準的な配置で使い始め、欲が出てきたら少しずついじってみるのが良いでしょう。
Google Analyticsを導入してアクセスを解析する
「自分のノート、誰か読んでくれているかな？」と気になるのは自然なことです。Google Analyticsのコードを貼り付ければ、アクセス数や読まれている記事を確認できます。
設定ファイルの中に、IDを書き込む専用の場所が用意されています。
「誰も読んでいないから寂しい」と思う必要はありません。デジタルガーデンはあくまで自分のための思考の整理場所であり、誰かの目に触れるのは「おまけ」のようなものだと考えるのが、長続きのコツです。
デプロイに失敗した？Quartzでよくあるトラブルと解決策
設定を進めていると、なぜかサイトが表示されない、エラーが出て止まるといったトラブルに遭遇することがあります。
特に初めての方が見舞われやすい問題とその対処法をまとめました。エラーメッセージに怯えず、一つずつ原因を潰していきましょう。
「Build Failed」が出たときのチェックポイント
Vercelの画面で赤文字の「Build Failed」が出た場合、原因の多くはNode.jsのバージョン不一致や、必要なファイルがGitHubに送られていないことです。
まずはPC上のローカル環境で npx quartz build が通るか確認してください。ローカルで通るなら、GitHubへのプッシュ忘れや、Vercel側の設定ミスが疑われます。
リンクが正しく繋がらない原因と対処法
「ノートはあるのにクリックしても開けない」という場合、Obsidian側のリンク設定（WikiLinksかMarkdownリンクか）と、Quartz側の設定が噛み合っていない可能性があります。
quartz.config.ts 内のリンク設定を確認し、自分のObsidianの書き方に合わせましょう。
日本語のファイル名で画像が表示されない問題を避ける
Obsidianでは日本語のファイル名が便利ですが、ウェブの世界では全角文字が原因で画像が表示されなかったり、URLが非常に長くなったりすることがあります。
できれば、公開する画像ファイル名だけでも英数字にしておくと、トラブルを未然に防げます。
- ファイル名は半角英数字がベター
- スペースはハイフン（-）に置き換える
- 拡張子（.pngなど）を正しく付ける
「すべてのファイル名を変えるのは大変だ」という場合は、Obsidianのプラグイン（Image Captionsなど）を使って、表示上だけ名前を変える工夫も検討してみてください。
ObsidianとQuartzで「自分だけの場所」を育てる手順
最後に、構築したサイトをどうやって運用していくか、その心構えについてお伝えします。
ツールはあくまで道具に過ぎません。大切なのは、あなたの思考がサイトを通じてどう深まっていくかです。無理なく、楽しく「庭仕事」を続けるためのステップをご紹介します。
毎日1ノートを公開することから始める
いきなり完璧なサイトを目指すと、記事が書けなくなります。まずは今日学んだこと、読んだ本の感想など、一言メモでいいので公開してみましょう。
「とりあえず公開する」という習慣がつくと、Obsidianを開くのがもっと楽しくなります。
- 3行日記でもいい
- リンク一本貼るだけでもいい
- 未完成のまま世に出す勇気を持つ
読者からのフィードバックを得る仕組みを導入する
もし余裕があれば、giscus（ギスカス）などのコメントシステムを導入してみてください。GitHubの議論機能（Discussions）を使って、サイトにコメント欄を作ることができます。
読者から「このリンク先の内容も面白かったです！」といった反応がもらえると、思考の繋がりはさらに広がります。
思考がつながり成長していくプロセスを楽しむ
数ヶ月経ってサイトを見返した時、バラバラだったメモが網の目のように繋がっていることに気づくはずです。
それは、あなたの脳内にある知識が体系化され、一つの「庭」として育った証です。ObsidianとQuartzは、そのプロセスを最も美しく、そして効率的にサポートしてくれます。
まとめ：Obsidianを最強の発信拠点にしよう
ObsidianをCMSとして使い、Quartzでサイトを公開することは、単なる節約術ではありません。自分の思考をダイレクトに世界へ繋げ、知識を育てていくための「ライフワーク」の始まりです。
- 無料で自由： 費用を気にせず、自分好みのデザインで公開できる。
- 自動で楽： 書くだけで更新される仕組みが、継続を助けてくれる。
- 繋がりを活かす： グラフビューやリンクで、読者に新しい体験を提供できる。
まずはNode.jsをインストールすることから、一歩踏み出してみませんか。あなたのPCに眠っている貴重なメモたちが、世界中の誰かの助けになる日が、すぐそこまで来ています。
