【ドキュメント静的ジェネレータ】docsifyを使ってみる

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

こんにちは！たぬきうどんです！

私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。

この記事ではドキュメント静的ジェネレータ「docsify」の紹介について書いています。

「docsify」ってなんだろう？

という方にオススメの記事となっています。

docsifyを使うと簡単にドキュメントサイトが作成できるので、ぜひご覧ください！

docsifyとは？

docsifyはMarkdownファイルをロード、解析し、Webサイトとして表示する静的サイトジェネレータです。

静的ファイルがビルド＆生成されないことが最も特徴的な点として挙げられます。

公式では

A magical documentation site generator.
docsify -Document-

と謳っています。

直訳すると、「魔法のドキュメントサイトジェネレータ」ですね。

docsifyの特徴としては

が挙げられます。

docsifyを使用した実際のサイトは以下のような感じです。

この記事執筆時の環境は以下です。

今回はdocsifyのインストールからローカルプレビューまでの手順を紹介します。

まずはdocsify-cliのインストールを行います。

このcliを使用し、初期化やローカル環境でのプレビューを行います。

任意のディレクトリで以下のコマンドを実行しましょう。

今回はローカルディレクトリのみにインストールします。

コマンドプロンプト

npm i docsify-cli

インストールが終わったらpackage.jsonのscripts部分に初期化コマンドとプレビューコマンドを定義しておきましょう。

今回は初期化コマンドををinit、プレビューコマンドをpreviewでnpm runにて実行できるようにしておきます。

package.json

{
  "scripts": {
    "init": "docsify init ./docs",
    "preview": "docsify serve docs"
  }
}

それでは初期化を行っていきます。

コマンドプロンプト

npm run init

上記のコマンドを実行することで、docsify init ./docsが実行され、docsディレクトリに以下のファイルが生成されます。

`index.html`	エントリーファイル。
`README.md`	Webサイトの核となるMDファイル。このファイルが解析され、ページが作られる。
`.nojekyll`	GitHub Pagesでホスティングする際に Jekyllの処理エンジンを使わないようにするためのファイル。

コンテンツはREADME.mdに書いていきます。