1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ドキュメント生成ツールとして使用するSSG比較

Last updated at Posted at 2024-09-10

静的サイトジェネレーター(SSG)を使用して開発用ドキュメントを生成、管理することを考えてみます。

比較観点:

  • 内部用ドキュメントを想定しているため SEO は考慮しない
  • 既存のドキュメントが Markdown ファイルなのでそのまま移植することを想定
  • ドキュメント内検索をしたい
  • SSG は npm でインストールしたい
  • かっこいい(主観)画面が良い

まとめ表

SSGツール Markdown対応 ドキュメント内検索
Docusaurus デフォルトで利用可能。Algoliaなどもサポート
Nextra デフォルトで利用可能。Next.js ベースなので独自にカスタマイズ可能。
VitePress デフォルトで利用可能。Algoliaなどもサポート
Gatsby Plugin で利用可能
Algoliaなどもサポート

1. Docusaurus

docusaurus.png

Facebook が開発した SSG。ドキュメンテーションに特化しており、React ベースでカスタマイズが容易。

インストール直後のディレクトリ構成:

README.md
babel.config.js
blog/
docs/
docusaurus.config.ts
node_modules/
package-lock.json
package.json
sidebars.ts
src/
static/
tsconfig.json

2. Nextra

Next.jsベースの SSG で、ドキュメント作成に特化しており、シンプルなセットアップでモダンなドキュメントサイトが構築可能。

nextra.png

ファイル構造:

# Next.js の追加パッケージのため、ディレクトリ構成は Next.js に従う
.
├─ pages

3. VitePress

Vue.jsを使用したドキュメンテーションに特化したSSG。Vueコンポーネントの利用が可能で、拡張性が高い。

vitepress.png

ファイル構造:

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

4. Gatsby

Reactベースの SSG 。高速かつ高機能なプラグインエコシステムを提供し、動的なサイトの構築にも強い。

gatsby.png

インストール直後のディレクトリ構成:

$ npm init gatsby

README.md
gatsby-config.ts
node_modules/
package-lock.json
package.json
src/
tsconfig.json
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?