Docsbook
概要

最初のドキュメントサイトを作成する

このチュートリアルでは、GitHubリポジトリからドキュメントサイトを公開し、そのサイトのページを変更します。コーディングの経験も、何かをインストールする必要もありません。すべての手順をブラウザ上で行います。

最後にできるもの: docsbook.io/YOUR-USERNAME/docs にある公開中のドキュメントサイトと、そのサイトで自分で編集した1ページ。

開始する前に#

必要なものは2つです。

  • ブラウザーとインターネット接続。 どのオペレーティングシステムでも使用できます。
  • GitHubアカウント。 無料で作成できます。お持ちでない場合は、ステップ1で作成します。

GitHubとは？ GitHubは、テキストファイルを保存して共有するためのウェブサイトです。ドキュメントやコード向けに作られたGoogleドライブのようなものだと考えてください。DocsbookはGitHubからファイルを読み込み、ドキュメントウェブサイトとして公開します。

ステップ1：GitHubアカウントを作成する#

すでにアカウントをお持ちの場合は、このステップをスキップしてください。

  1. github.comにアクセスします。
  2. 右上隅のSign upをクリックします。
  3. メールアドレスを入力し、パスワードを選択します。
  4. ユーザー名を選択します。ユーザー名は、docsbook.io/your-username/your-repoのようにドキュメントのURLに表示されます。
  5. GitHubからメールで送信された確認コードを確認します。

右上隅にSign upボタンがあるGitHubホームページ

ステップ 2: サンプルリポジトリをフォークする#

リポジトリ（略して「repo」）とは、ドキュメントファイルを格納する GitHub 上のフォルダーです。1 つのリポジトリから 1 つのドキュメントサイトが公開されます。

空のリポジトリから始めるのではなく、Docsbook のサンプルリポジトリをコピーします。他の人のリポジトリをコピーすることをフォークと呼びます。フォークしたコピーは独立しているため、変更が元のリポジトリに影響することはありません。

  1. github.com/docsbook-io/docs に移動します。

    Docsbook example repository page with the Fork button in the top right

  2. 右上隅にある Fork をクリックします。

  3. すべての設定をそのままにして、Create fork をクリックします。

    GitHub fork dialog with the Create fork button highlighted

  4. GitHub に新しいリポジトリ github.com/YOUR-USERNAME/docs が表示されます。

    Your forked copy of the docs repository, listing its markdown files

これで、公開の準備が整ったサンプルドキュメントを格納するリポジトリが用意できました。

ステップ3：リポジトリをDocsbookに接続する#

  1. docsbook.io/connectにアクセスします。

    Docsbook sign-in page offering GitHub, Google, Apple and email sign-in

  2. サインイン方法（GitHub、Google、Apple、またはメールによる1回限りのコード）を選択し、手続きを完了します。

  3. Google、Apple、またはメールでサインインした場合、DocsbookからGitHubへのアクセスを求められます。Authorize docsbookをクリックします。

    Docsbookはリポジトリのファイルを読み取ります。明示的に指示しない限り、リポジトリ内の内容を変更または削除することはありません。

  4. 一覧からフォークしたリポジトリを見つけてクリックします。

    Docsbook repository list with one repository selected

  5. Docsbookがサイトをビルドし、サイトにリダイレクトします。

ドキュメントが次の場所で公開されました：

docsbook.io/YOUR-GITHUB-USERNAME/docs

サイトを開き、サイドバーの項目をクリックして確認します。表示されるすべてのページは、フォークしたリポジトリ内のMarkdownファイルです。

ステップ4：GitHubでページを編集する#

  1. github.com/YOUR-USERNAME/docsでリポジトリを開きます。

  2. 変更するファイルをクリックします — まずはREADME.mdから始めます。

    Repository file list with README.md highlighted

  3. ファイルの右上付近にある鉛筆アイコンをクリックします。

    GitHub file view with the pencil edit icon highlighted

  4. 文を変更します。このファイルはMarkdownで記述されています。**bold**は太字として、# Headingは大きな見出しとして表示されます。このページの最後にあるMarkdown構文リファレンスで、その他の構文を確認できます。

    GitHub markdown editor with edited text in the file

  5. 変更をコミットまで下にスクロールします。

  6. 「概要を更新」のように、変更内容を説明する短いメモを書きます。

  7. 変更をコミットをクリックします。

    GitHub Commit changes form with the green commit button highlighted

ステップ 5：サイトで変更を確認する#

Docsbookサイトに戻り、編集したページを再読み込みします。新しい文が表示されています。

これが一連の流れです。GitHubにコミットすると、公開サイトにも反映されます。これでチュートリアルは完了です。

ページの追加と削除#

ページの追加は、ボタンが異なるだけで同じ手順です。

ページを追加する:

  1. リポジトリを開き、Add file → Create new file をクリックします。

    GitHub Add file dropdown open, showing the Create new file option

  2. Name your file にパスとファイル名（guides/installation.md など）を入力します。/ を入力すると、フォルダーが作成されます。

    New file name field containing guides/installation.md

  3. 内容を記述し、Commit new file をクリックします。

ページは自動的に Docsbook のサイドバーに表示されます。

ページを削除する:

  1. リポジトリでファイルを開きます。

  2. 右上付近にある ⋯ メニューをクリックします。

    GitHub file view with the three-dot menu open

  3. Delete file をクリックし、次に Commit changes をクリックします。

その他の方法#

上記のチュートリアルでは、何もインストールせずに使える方法を説明しています。最初のサイトを作成した後は、3つの代替方法があります。

フォークする代わりに、空のリポジトリから始める。 github.com/new にアクセスし、スペースを含まない短い名前をリポジトリに付け、Public を選択して、Add a README file にチェックを入れ、Create repository をクリックします。その後、手順3とまったく同じように接続します。

GitHub new repository form with the Create repository button highlighted

AIコーディングアシスタントでページを作成する。 Claude Codeは会話を通じてファイルの読み取り、作成、編集を行うため、多数のページを一度に作成する場合に便利です。claude.ai/code からインストールし、リポジトリをクローンするよう依頼してから、作成したいものを説明します — 「要件、インストール、初回ログインのセクションを含む guides/installation.md を作成して」。完了したら、コミットしてプッシュするよう伝えると、サイトが更新されます。

公開済みのページ自体で編集する。 サイトを接続すると、GitHubやインストールなしで、Docsbook AIチャット内の、現在読んでいるページからブロックを変更できます。ライブページでの編集を参照してください。

リファレンス: Markdown 構文#

Markdown は書式設定を制御する記号の集合です。ドキュメントで使用するのは次のものです。

テキスト#

入力内容 表示結果
**bold text** 太字テキスト
*italic text* 斜体テキスト
~~strikethrough~~ 取り消し線
`inline code` inline code 
# Large heading (page title)
## Medium heading (section)
### Small heading (sub-section)
 
- First item
- Second item
  - Nested item, indented by two spaces
 
1. First step
2. Second step
 
[Link to an external site](https://example.com)
[Link to another page in your docs](/docsbook-io/docs/guides/getting-started/managing-docs)

画像とコードブロック#

![Fork dialog with the Create fork button highlighted](https://raw.githubusercontent.com/docsbook-io/docs/main/guides/getting-started/images/fork-dialog.png)

コードブロックを三重バッククォートで囲み、言語名を指定すると、構文がハイライト表示されます：

```javascript
console.log("Hello!")
```

コールアウト#

> This is a note or an important callout.

リファレンス：ファイルがページになる仕組み#

Docsbook はファイル名とフォルダー名からサイドバーを構築します。設定は必要ありません。

リポジトリ内のファイル サイドバーのページ
README.md ホーム
installation.md インストール
guides/quick-start.md ガイド → クイックスタート
api/overview.md API → 概要

ここから、次の 3 つのルールが導かれます。

  • ファイル名とフォルダー名がページタイトルになり、ハイフンはスペースに置き換えられます。
  • フォルダー内の README.md が、そのフォルダーのインデックスページになります。
  • ハイフンを含む小文字の名前から、読みやすい URL が生成されます。getting-started.md は /getting-started になります。

これらのページの順序を決める仕組みについては、ドキュメントサイトを管理するを参照してください。

次のステップ#

Updated

このページは役に立ちましたか？

提供： Docsbook