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を書きながらリアルタイムに表示を確認できます。

基本的な使い方

ページの追加

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の技術資料など、「読みに来る人が決まっている」用途で使うのがおすすめです。