Riebeckite
Menu
Color mode

Obsidian Vault を使う

すでに Obsidian Vault を持っている場合、Riebeckite はその Vault をサイトのコンテンツとして読むことができます。まずはローカルで 1 つのノートを公開し、リンクと画像を確認してから dist/ をビルドします。

始める前に

必要なものは次の3つです。

  • Node.js
  • 既存の Obsidian Vault
  • 公開してよいノート 1 つ

Riebeckite は Obsidian のワークスペース設定を必要としません。.obsidian/ は自動的に無視されるため、Vault から削除する必要はありません。

1. Riebeckite サイトを作る

Vault の隣にサイトを作ります。

sh
npx create-riebeckite my-site --preset starter
cd my-site

starter preset には、WikiLink、埋め込み、Callout、タグを扱う Obsidian Markdown plugin が最初から入っています。

2. Vault を接続する

riebeckite.config.ts を開き、content.directory を Vault に向けます。

ts
content: {
  directory: "../my-vault",
},

../my-vault は、my-site から見た Vault への相対パスに置き換えてください。

3. 公開するノートを選ぶ

Riebeckite は、既定では明示的に指定したノートだけを公開します。

公開したいノートに、次の frontmatter を追加します。

yaml
---
title: Hello
publish: true
tags:
  - example
aliases:
  - Hello note
---

意味は次のとおりです。

  • publish: true のノートは公開ページとして生成されます。
  • publish: false のノートはビルド結果に含まれません。
  • publish がないノートは、既定の starter 構成では下書きとして扱われます。

公開ノートから未公開のノートへリンクすると、リンク先ページは生成されず、そのリンクも公開サイトで有効なリンクとしては公開されません（壊れたリンクと同じ表示になります）。@riebeckite/plugin-diagnostics の riebeckite-diagnostics を実行すると、これらの参照が publish-boundary 警告として表示されます。

4. Riebeckite を起動する

依存関係を入れ、check を実行します。

sh
npm install
npm exec riebeckite check

続いてローカルプレビューを起動します。

sh
npm exec riebeckite dev

ターミナルに表示されたローカル URL を開いてください。

開発サーバーを起動したまま Obsidian でノートを保存すると、次のページ表示に内容が反映されます。公開設定の変更もそのまま反映されます。

以下は、Fresh starter サイトと小さなテスト Vault で実際に確認した例です。

WikiLink は次のように書きます。

md
[[hello]]
[[hello|custom hello label]]
[[hello#Details|hello details]]
[[Hello note]]

Vault 内の画像は、Obsidian の埋め込み構文で参照できます。

md
![[sample.png]]

Riebeckite は Vault から画像を解決し、公開ノートから参照されている画像を build 時に dist/ へコピーします。この基本ケースでは、Riebeckite 用に画像を別フォルダへ移動する必要はありません。

公開ノートの埋め込みも使えます。

md
![[embedded]]

6. サイトをビルドする

ローカル表示に問題がなければ、静的サイトをビルドします。

sh
npm exec riebeckite build

出力先は dist/ です。

Obsidian の何が使えるか

Obsidian の機能 Riebeckite での扱い
Markdown 標準の Markdown として対応
WikiLinks starter の Obsidian Markdown plugin で対応
WikiLink aliases `[[note
Heading links [[note#Heading]] に対応
Images ![[sample.png]] のような公開ノートから参照される画像に対応
Note embeds 公開 Markdown ノートの埋め込みに対応
Callouts > [!NOTE] に対応
Tags Obsidian Markdown plugin でタグ化。tag ページは starter の taxonomy plugin が提供
Frontmatter 対応
Obsidian aliases aliases: を WikiLink 解決に利用
publish 対応。publish: true が公開、下書きはビルドされない
Canvas @riebeckite/plugin-canvas が必要
Excalidraw @riebeckite/plugin-excalidraw が必要
Bases @riebeckite/plugin-bases が必要
Mermaid 図として描画するには @riebeckite/plugin-mermaid が必要。未導入ならコードブロックとして扱われる
.obsidian/ Riebeckite には不要。自動的に無視される

Vault を別リポジトリで管理する

最短ルートは、ローカルの Vault フォルダを content.directory に指定する方法です。Vault とサイトを別々の GitHub リポジトリで管理したい場合は、Separate content repository の構成を使います。

GitHub Actions の設定は Content Repositories を参照してください。

次のステップ

  • 必要なノートだけに publish: true を付ける
  • config を変更したら npm exec riebeckite check を実行する
  • 公開前に npm exec riebeckite build を実行する
  • 機能を追加したくなったら 最初の Plugin を追加する を読む

History

1 changesCollapseExpand
1 + # Obsidian Vault を使う
2 +
3 + すでに Obsidian Vault を持っている場合、Riebeckite はその Vault をサイトのコンテンツとして読むことができます。まずはローカルで 1 つのノートを公開し、リンクと画像を確認してから `dist/` をビルドします。
4 +
5 + ## 始める前に
6 +
7 + 必要なものは次の3つです。
8 +
9 + - Node.js
10 + - 既存の Obsidian Vault
11 + - 公開してよいノート 1 つ
12 +
13 + Riebeckite は Obsidian のワークスペース設定を必要としません。`.obsidian/` は自動的に無視されるため、Vault から削除する必要はありません。
14 +
15 + ## 1. Riebeckite サイトを作る
16 +
17 + Vault の隣にサイトを作ります。
18 +
19 + ```sh
20 + npx create-riebeckite my-site --preset starter
21 + cd my-site
22 + ```
23 +
24 + `starter` preset には、WikiLink、埋め込み、Callout、タグを扱う Obsidian Markdown plugin が最初から入っています。
25 +
26 + ## 2. Vault を接続する
27 +
28 + `riebeckite.config.ts` を開き、`content.directory` を Vault に向けます。
29 +
30 + ```ts
31 + content: {
32 + directory: "../my-vault",
33 + },
34 + ```
35 +
36 + `../my-vault` は、`my-site` から見た Vault への相対パスに置き換えてください。
37 +
38 + ## 3. 公開するノートを選ぶ
39 +
40 + Riebeckite は、既定では明示的に指定したノートだけを公開します。
41 +
42 + 公開したいノートに、次の frontmatter を追加します。
43 +
44 + ```yaml
45 + ---
46 + title: Hello
47 + publish: true
48 + tags:
49 + - example
50 + aliases:
51 + - Hello note
52 + ---
53 + ```
54 +
55 + 意味は次のとおりです。
56 +
57 + - `publish: true` のノートは公開ページとして生成されます。
58 + - `publish: false` のノートはビルド結果に含まれません。
59 + - `publish` がないノートは、既定の `starter` 構成では下書きとして扱われます。
60 +
61 + 公開ノートから未公開のノートへリンクすると、リンク先ページは生成されず、そのリンクも公開サイトで有効なリンクとしては公開されません（壊れたリンクと同じ表示になります）。`@riebeckite/plugin-diagnostics` の `riebeckite-diagnostics` を実行すると、これらの参照が `publish-boundary` 警告として表示されます。
62 +
63 + ## 4. Riebeckite を起動する
64 +
65 + 依存関係を入れ、check を実行します。
66 +
67 + ```sh
68 + npm install
69 + npm exec riebeckite check
70 + ```
71 +
72 + 続いてローカルプレビューを起動します。
73 +
74 + ```sh
75 + npm exec riebeckite dev
76 + ```
77 +
78 + ターミナルに表示されたローカル URL を開いてください。
79 +
80 + 開発サーバーを起動したまま Obsidian でノートを保存すると、次のページ表示に内容が反映されます。公開設定の変更もそのまま反映されます。
81 +
82 + ## 5. WikiLink と画像を確認する
83 +
84 + 以下は、Fresh `starter` サイトと小さなテスト Vault で実際に確認した例です。
85 +
86 + WikiLink は次のように書きます。
87 +
88 + ```md
89 + [[hello]]
90 + [[hello|custom hello label]]
91 + [[hello#Details|hello details]]
92 + [[Hello note]]
93 + ```
94 +
95 + Vault 内の画像は、Obsidian の埋め込み構文で参照できます。
96 +
97 + ```md
98 + ![[sample.png]]
99 + ```
100 +
101 + Riebeckite は Vault から画像を解決し、公開ノートから参照されている画像を build 時に `dist/` へコピーします。この基本ケースでは、Riebeckite 用に画像を別フォルダへ移動する必要はありません。
102 +
103 + 公開ノートの埋め込みも使えます。
104 +
105 + ```md
106 + ![[embedded]]
107 + ```
108 +
109 + ## 6. サイトをビルドする
110 +
111 + ローカル表示に問題がなければ、静的サイトをビルドします。
112 +
113 + ```sh
114 + npm exec riebeckite build
115 + ```
116 +
117 + 出力先は `dist/` です。
118 +
119 + ## Obsidian の何が使えるか
120 +
121 + | Obsidian の機能 | Riebeckite での扱い |
122 + | --- | --- |
123 + | Markdown | 標準の Markdown として対応 |
124 + | WikiLinks | starter の Obsidian Markdown plugin で対応 |
125 + | WikiLink aliases | `[[note|label]]` に対応 |
126 + | Heading links | `[[note#Heading]]` に対応 |
127 + | Images | `![[sample.png]]` のような公開ノートから参照される画像に対応 |
128 + | Note embeds | 公開 Markdown ノートの埋め込みに対応 |
129 + | Callouts | `> [!NOTE]` に対応 |
130 + | Tags | Obsidian Markdown plugin でタグ化。tag ページは starter の taxonomy plugin が提供 |
131 + | Frontmatter | 対応 |
132 + | Obsidian aliases | `aliases:` を WikiLink 解決に利用 |
133 + | `publish` | 対応。`publish: true` が公開、下書きはビルドされない |
134 + | Canvas | `@riebeckite/plugin-canvas` が必要 |
135 + | Excalidraw | `@riebeckite/plugin-excalidraw` が必要 |
136 + | Bases | `@riebeckite/plugin-bases` が必要 |
137 + | Mermaid | 図として描画するには `@riebeckite/plugin-mermaid` が必要。未導入ならコードブロックとして扱われる |
138 + | `.obsidian/` | Riebeckite には不要。自動的に無視される |
139 +
140 + ## Vault を別リポジトリで管理する
141 +
142 + 最短ルートは、ローカルの Vault フォルダを `content.directory` に指定する方法です。Vault とサイトを別々の GitHub リポジトリで管理したい場合は、Separate content repository の構成を使います。
143 +
144 + GitHub Actions の設定は [Content Repositories](../guides/content-repositories.ja.md) を参照してください。
145 +
146 + ## 次のステップ
147 +
148 + - 必要なノートだけに `publish: true` を付ける
149 + - config を変更したら `npm exec riebeckite check` を実行する
150 + - 公開前に `npm exec riebeckite build` を実行する
151 + - 機能を追加したくなったら [最初の Plugin を追加する](./first-plugin.ja.md) を読む
152 +