Docsify - ビルド不要でMarkdownからドキュメントサイトを作れるジェネレーター

はじめに

プロジェクトのドキュメントサイトを作りたいけれど、ビルド環境を整えるのが面倒だと感じたことはありませんか。DocusaurusやVitePressは高機能ですが、Node.jsのセットアップやビルドパイプラインの構築など、ドキュメントを書き始めるまでの準備が意外と重いんですよね。

Docsifyは、そんな悩みを解消してくれるドキュメントサイトジェネレーターです。最大の特徴は「ビルドが一切不要」なこと。Markdownファイルとindex.htmlを置くだけで、その場でドキュメントサイトとして動きます。GitHubスター31,000以上という実績もあり、READMEの延長でサクッとドキュメントを公開したい場面にぴったりのツールです。

とはいえ、読むより触った方が早いと思います。サイドバー付きのドキュメントサイトと、検索プラグインを使ったサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Docsifyとは

Docsifyは、Markdownファイルを実行時にパースしてWebサイトとして表示するJavaScriptライブラリです。一般的な静的サイトジェネレーターと違い、事前に静的HTMLを生成しません。ブラウザがページを開いたタイミングでMarkdownを読み込み、その場でレンダリングする仕組みです。

つまり、Markdownファイルを編集して保存すれば、それがそのまま公開内容になります。ビルドの待ち時間もデプロイパイプラインの再実行も不要です。

主な特徴

ビルドプロセス不要 - Markdownを置くだけ。静的HTMLの生成が発生しません
軽量 - 本体はgzip圧縮で約21KBとコンパクトです
全文検索プラグイン - 設定1行で検索ボックスを追加できます
複数のテーマ - Vue風、bootstrap風などのテーマが公式提供されています
豊富なプラグインAPI - コードコピー、ページネーション、絵文字対応など拡張が容易です
GitHub Pagesと好相性 - リポジトリにファイルを置くだけで公開できます

なお、2026年7月時点の最新安定版はv4.13.1です。次期メジャーバージョンのv5はリリース候補（RC）段階で、レガシーブラウザ（IE11など）のサポート打ち切りやアクセシビリティ強化が予定されています。

インストール方法

方法1: index.htmlを直接作成する

Docsifyの導入は、極端に言えばHTMLファイルを1枚作るだけです。プロジェクトのドキュメント用ディレクトリ（例: docs/）に以下のindex.htmlを置きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Project Docs</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'My Project',
      repo: ''
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

同じディレクトリにREADME.mdを置けば、それがトップページとして表示されます。

方法2: docsify-cliを使う

ローカルでのプレビューや雛形生成には公式CLIが便利です。

npm install -g docsify-cli

# docs ディレクトリに雛形を生成
docsify init ./docs

# ローカルサーバーを起動（http://localhost:3000）
docsify serve ./docs

docsify serveはファイルの変更を検知してライブリロードしてくれるので、Markdownを書きながらリアルタイムに表示を確認できます。

Docsifyのサンプルを動かす

Docsifyは本来、index.htmlと複数の.mdファイルをサーバー越しに読み込んで動くツールです。ただし今回のサンプルは、記事に埋め込んだ1つのHTMLファイルだけで完結させる必要があります。そこで、README.mdや_sidebar.mdを実ファイルとして置く代わりに、XMLHttpRequestを差し替えてMarkdown文字列をその場で返す小さな仕組みを使っています（実際のプロジェクトではこの差し替えは不要で、docs/フォルダに.mdファイルを普通に置くだけで動きます）。Docsify本体のAPIやwindow.$docsifyの設定は、いずれも通常どおりの書き方です。

以下はwindow.$docsifyの主要な設定オプションだけを抜き出したものです。

window.$docsify = {
  name: 'My Project',        // サイドバー上部に表示する名前
  repo: 'user/repo',         // GitHubへのリンクを自動表示
  loadSidebar: true,         // _sidebar.md を読み込んでサイドバー化
  subMaxLevel: 2,            // ページ内見出しをサイドバーに反映する深さ
  search: {                  // 検索プラグインの設定
    placeholder: '検索',
    depth: 2,
  },
};

Docsifyのサイドバーとページ遷移を試す

まずはloadSidebarとsubMaxLevelが実際にどう反映されるかを見てみましょう。サイドバーの「ガイド」リンクをクリックすると、ページ遷移なしで本文がguide.mdの内容に切り替わります。内部的にはハッシュルーティングでDocsify自身が本文だけを差し替えている状態です。

<div id="app"></div>
<script>
  window.$docsify = {
    name: 'Docsify Demo',
    loadSidebar: true,
    subMaxLevel: 2,
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/docsify@4.13.1"></script>

サイドバー用の_sidebar.mdに- [ガイド](guide.md)のような行を増やすと、その分だけメニュー項目が増えます。subMaxLevelの値を0に変えると、guide.md内の## セットアップのようなページ内見出しがサイドバーに反映されなくなることも確認できます。

Docsifyの検索プラグインを試す

次は、Docsify本体とは別に配布されている検索プラグイン（lib/plugins/search.min.js）です。window.$docsify.searchにオプションを渡すだけで、サイドバー上部に全文検索ボックスが追加されます。検索ボックスに「猫」と入力するとホームページがヒットし、「犬」と入力するとguide.mdがヒットします。

window.$docsify = {
  search: {
    placeholder: 'キーワードを検索',
    noData: '見つかりませんでした',
    depth: 2, // 見出しレベル2までを検索対象にする
  },
};

検索窓に文字を打つたびに、結果がその場で絞り込まれるのが分かります。noDataの文言を書き換えたり、depthの値を1に減らして検索対象にする見出しレベルを狭めたりして、挙動の違いを確認してみてください。

基本的な使い方

ページの追加

Markdownファイルを追加すると、ファイル名がそのままURLになります。

docs/
├── index.html
├── README.md      → https://example.com/#/
├── guide.md       → https://example.com/#/guide
└── api/
    └── README.md  → https://example.com/#/api/

サイドバーの設定

サイドバーを表示するには、設定でloadSidebarを有効にして_sidebar.mdを作成します。

window.$docsify = {
  name: 'My Project',
  loadSidebar: true,
  subMaxLevel: 2  // ページ内見出しをサイドバーに表示する深さ
};

_sidebar.mdはただのMarkdownのリストです。

- [はじめに](/)
- [ガイド](guide.md)
- API
  - [概要](api/)

ナビゲーションバーとカバーページ

同じ要領で、loadNavbar: trueと_navbar.mdでヘッダーナビゲーションを、coverpage: trueと_coverpage.mdでトップのカバーページを追加できます。

<!-- _coverpage.md -->
# My Project <small>1.0</small>

> シンプルで使いやすいツールです。

[GitHub](https://github.com/example/my-project)
[はじめる](#はじめに)

プラグインの追加

プラグインはscriptタグを追加するだけで有効になります。定番の全文検索とコードコピーを入れてみましょう。

<script>
  window.$docsify = {
    name: 'My Project',
    loadSidebar: true,
    search: {
      placeholder: '検索',
      noData: '結果が見つかりません'
    }
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>

これだけでサイドバー上部に検索ボックスが表示され、コードブロックにコピーボタンが付きます。

実践的なユースケース

GitHub Pagesで社内ツールのドキュメントを公開する

Docsifyが最も輝くのは、GitHub Pagesとの組み合わせです。ビルドが不要なので、GitHub Actionsの設定すら要りません。

リポジトリのdocs/ディレクトリにindex.htmlとMarkdownを配置します
リポジトリのSettings → Pagesで、ソースをmaster branch /docs folderに設定します
以降はMarkdownをpushするだけでドキュメントが更新されます

my-project/
├── src/           # アプリ本体
└── docs/          # ドキュメント（GitHub Pagesの公開対象）
    ├── index.html
    ├── README.md
    ├── _sidebar.md
    └── setup.md

CIの実行を待たずに、pushした瞬間から最新のドキュメントが反映されるのは体験として非常に快適です。

既存READMEの資産をそのまま活かす

すでにリポジトリ内に散らばっているREADMEやMarkdownメモがある場合、それらを移動せずにサイト化できるのもDocsifyの強みです。_sidebar.mdでリンクを張るだけで、既存のMarkdown資産がそのままドキュメントサイトの1ページになります。

ドキュメント整備の第一歩として「まず今あるものを見やすくする」アプローチを取れるので、導入のハードルが非常に低いです。

注意点: SEOが重要な場合は不向き

一点だけ注意があります。Docsifyはクライアントサイドでレンダリングするため、検索エンジンへのインデックスやOGP対応の面では静的HTMLを生成するツールに劣ります。製品の公開ドキュメントなどSEOを重視する場合は、DocusaurusやVitePressの方が適しています。社内ドキュメントやOSSの技術資料など、「読みに来る人が決まっている」用途で使うのがおすすめです。