Riebeckite
Menu
Color mode

クイックスタート

空のフォルダから Riebeckite サイトを作り、ブラウザで確認してビルドするまでの最短手順です。最初から内部構造を理解する必要はありません。

要件

簡単な要件：Installation。Node.js (LTS)、ターミナルが必要です。約5分で終わります。

1. サイトを作る

インタラクティブ生成器を実行します。

bash
npx create-riebeckite

プロンプトに次のように答えます（推奨される回答）。

  • Project name：既定値の my-site のまま Enter を押します
  • Preset：迷ったら starter のまま。Presets を参照
  • Content source：This project を選んで Markdown をサイトのフォルダ内に残します
  • Deployment：まず手元で試すなら、既定値の Not now のまま Enter を押します。すぐに公開準備まで進めたい場合だけ Cloudflare Workers を選びます。依存関係のインストール後に Deploy now? と聞かれ、Yes でそのまま初回公開、Later で後回しにできます。push ごとの自動公開は GitHub Actions。Deployment を参照

成功すると Created a starter Riebeckite site in my-site（入力した名前が入る）と、次に実行するコマンドの一覧が表示されます。既定値の Not now では、外部への公開も依存関係のインストールも行いません。フォルダへ移動して package を入れます。

bash
cd my-site
npm install

npm install は、生成されたサイトの package を入れます。生成されるサイトは、まずは1つのリポジトリとして考えれば十分です。@riebeckite/* パッケージは npm から入るので、これだけで足ります。

最初に触ることが多いファイルは、本文を書く content/index.md と、site.title、site.baseUrl、content.directory を設定する riebeckite.config.ts です。

2. 開発を開始する

bash
npm exec riebeckite dev

生成されたアプリによって開発サーバーが起動します。 ターミナルに表示されたローカル URL をブラウザで開いてください。 Riebeckite のサイトが表示されれば成功です。

編集中はこのコマンドを起動したままにします。止めるときは Ctrl + C を押します。

3. 最初のページを編集

content/index.md を編集します。たとえば見出しを # My Digital Garden に変更します。ファイルを保存するとブラウザで変更が反映されます。

4. もう一つページを作る

content/hello.md を作成します。publish: true が必須です。

md
---
publish: true
---
 
# Hello
 
This is my second page.

/hello で表示されます。

5. ページをリンクする

content/index.md に [[hello]]（Obsidian WikiLink）を追加します。starter preset は @riebeckite/plugin-obsidian-markdown を有効にしています。生成されたコンテンツ自体が [[guide]]、[[examples]] を使しています。リンクをクリックして確認してください。

6. サイトをビルドする

bash
npm exec riebeckite build

成功すると、公開用の静的ファイルが dist/ に作られます。デプロイでは、この dist/ を配信します。

7. Cloudflare Workers へ公開する

生成時に Cloudflare Workers を選んだサイトには Wrangler の依存と wrangler.jsonc がすでに含まれているため、追加の準備は要りません。ビルドして公開します。

bash
npm run build
npm exec riebeckite deploy

Deploy now? で Yes を選んだ場合は、生成直後に build と deploy まで自動で実行され、https://<name>.<account>.workers.dev のような URL が表示されます。Later を選んだ場合や、後から更新を公開する場合は上の2コマンドを実行します。初回は Wrangler のログインがブラウザで開きます。Not now で生成した既存サイトでは、先に npm install -D wrangler を実行してください。

公開 URL が決まったら、riebeckite.config.ts の site.baseUrl をその URL に更新し、もう一度ビルドとデプロイを実行すると、サイトマップなどに正しい URL が入ります。

bash
npm exec riebeckite build
npm exec riebeckite deploy

push のたびに自動デプロイしたい場合は Deployment の GitHub Actions へ進んでください。Content を別リポジトリに分けたい場合は Separate Content Repository → を参照してください。

次に読むページ

History

1 changesCollapseExpand
1 + # クイックスタート
2 +
3 + 空のフォルダから Riebeckite サイトを作り、ブラウザで確認してビルドするまでの最短手順です。最初から内部構造を理解する必要はありません。
4 +
5 + ## 要件
6 +
7 + 簡単な要件：[Installation](./installation.md#requirements)。Node.js (LTS)、ターミナルが必要です。約5分で終わります。
8 +
9 + ## 1. サイトを作る
10 +
11 + インタラクティブ生成器を実行します。
12 +
13 + ```bash
14 + npx create-riebeckite
15 + ```
16 +
17 + プロンプトに次のように答えます（推奨される回答）。
18 +
19 + - **Project name**：既定値の `my-site` のまま Enter を押します
20 + - **Preset**：迷ったら `starter` のまま。[Presets](./presets.md) を参照
21 + - **Content source**：`This project` を選んで Markdown をサイトのフォルダ内に残します
22 + - **Deployment**：まず手元で試すなら、既定値の `Not now` のまま Enter を押します。すぐに公開準備まで進めたい場合だけ `Cloudflare Workers` を選びます。依存関係のインストール後に `Deploy now?` と聞かれ、`Yes` でそのまま初回公開、`Later` で後回しにできます。push ごとの自動公開は `GitHub Actions`。[Deployment](./deployment.md) を参照
23 +
24 + 成功すると `Created a starter Riebeckite site in my-site`（入力した名前が入る）と、次に実行するコマンドの一覧が表示されます。既定値の `Not now` では、外部への公開も依存関係のインストールも行いません。フォルダへ移動して package を入れます。
25 +
26 + ```bash
27 + cd my-site
28 + npm install
29 + ```
30 +
31 + `npm install` は、生成されたサイトの package を入れます。生成されるサイトは、まずは1つのリポジトリとして考えれば十分です。`@riebeckite/*` パッケージは npm から入るので、これだけで足ります。
32 +
33 + 最初に触ることが多いファイルは、本文を書く `content/index.md` と、`site.title`、`site.baseUrl`、`content.directory` を設定する `riebeckite.config.ts` です。
34 +
35 + ## 2. 開発を開始する
36 +
37 + ```bash
38 + npm exec riebeckite dev
39 + ```
40 +
41 + 生成されたアプリによって開発サーバーが起動します。 **ターミナルに表示されたローカル URL をブラウザで開いてください。** Riebeckite のサイトが表示されれば成功です。
42 +
43 + 編集中はこのコマンドを起動したままにします。止めるときは `Ctrl + C` を押します。
44 +
45 + ## 3. 最初のページを編集
46 +
47 + `content/index.md` を編集します。たとえば見出しを `# My Digital Garden` に変更します。ファイルを保存するとブラウザで変更が反映されます。
48 +
49 + ## 4. もう一つページを作る
50 +
51 + `content/hello.md` を作成します。`publish: true` が必須です。
52 +
53 + ```md
54 + ---
55 + publish: true
56 + ---
57 +
58 + # Hello
59 +
60 + This is my second page.
61 + ```
62 +
63 + `/hello` で表示されます。
64 +
65 + ## 5. ページをリンクする
66 +
67 + `content/index.md` に `[[hello]]`（Obsidian WikiLink）を追加します。starter preset は `@riebeckite/plugin-obsidian-markdown` を有効にしています。生成されたコンテンツ自体が `[[guide]]`、`[[examples]]` を使しています。リンクをクリックして確認してください。
68 +
69 + ## 6. サイトをビルドする
70 +
71 + ```bash
72 + npm exec riebeckite build
73 + ```
74 +
75 + 成功すると、公開用の静的ファイルが `dist/` に作られます。デプロイでは、この `dist/` を配信します。
76 +
77 + ## 7. Cloudflare Workers へ公開する
78 +
79 + 生成時に `Cloudflare Workers` を選んだサイトには Wrangler の依存と `wrangler.jsonc` がすでに含まれているため、追加の準備は要りません。ビルドして公開します。
80 +
81 + ```bash
82 + npm run build
83 + npm exec riebeckite deploy
84 + ```
85 +
86 + `Deploy now?` で `Yes` を選んだ場合は、生成直後に build と deploy まで自動で実行され、`https://<name>.<account>.workers.dev` のような URL が表示されます。`Later` を選んだ場合や、後から更新を公開する場合は上の2コマンドを実行します。初回は Wrangler のログインがブラウザで開きます。`Not now` で生成した既存サイトでは、先に `npm install -D wrangler` を実行してください。
87 +
88 + 公開 URL が決まったら、`riebeckite.config.ts` の `site.baseUrl` をその URL に更新し、もう一度ビルドとデプロイを実行すると、サイトマップなどに正しい URL が入ります。
89 +
90 + ```bash
91 + npm exec riebeckite build
92 + npm exec riebeckite deploy
93 + ```
94 +
95 + push のたびに自動デプロイしたい場合は [Deployment](./deployment.md) の GitHub Actions へ進んでください。Content を別リポジトリに分けたい場合は [Separate Content Repository →](../guides/content-repositories.md) を参照してください。
96 +
97 + ## 次に読むページ
98 +
99 + - [Deployment](./deployment.md) - Cloudflare Workers への公開と GitHub Actions による自動化
100 + - [Presets](./presets.md) - `starter`、`minimal`、`showcase`、`empty` を比較する
101 + - [First Content](./first-content.md) - Markdown の書き方と確認方法をもう少し詳しく見る
102 + - [Installation](./installation.md) - 要件とセットアップの詳しい解説
103 + - [サイトのアイコンとロゴ →](../guides/branding.md) - アイコン・ヘッダーのロゴ・リンクプレビュー画像を差し替える
104 + - [Obsidian Vault →](../guides/obsidian.md) - Obsidian Vault をコンテンツソースとして使う
105 + - [Separate Content Repository →](../guides/content-repositories.md) - コンテンツを別リポジトリに分割
106 +