docsifyをIISにホストする


はじめに

docsify を使いたいが、以下の制約がある場合

  • Node.js が好きではない、またはインストール時にトラブルが起きる
  • python が好きではない、またはインストール時にトラブルが起きる

Windows OS ユーザーであれば、IIS を使う道が残されている

docsifyページ用のファイルをつくる

IIS 構築の前に、サイトの元となるソースファイルをつくる

必要なソースファイルは3つ

適当なフォルダをつくって、以下ファイルをつくっていく

最低限必要なのは2つのファイル

  • index.html
  • README.md

リンク先として、もうひとつファイルをつくる

  • Page1.md

index.html

公式サイトを参考に、index.htmlをつくる

PlantUML を使いたいので、</body>の直前に以下1行を追加する

<script src="//unpkg.com/docsify-plantuml/dist/docsify-plantuml.min.js"></script>

README.md

以下README.md内の「``plantuml」のダッシュは、2つではなく3つにする
(Qiita 投稿上の都合による)

README.md
# Hello, docify

トップページです

## PlantUML

``plantuml
@startuml
Alice -> Bob
@enduml
``

## Link

- [ページ1](./Page1.md)
- [Google.com](https://www.google.com/)

Page1

何の面白みもないページ

Page1.md
# Page1

here is Page1.md

## Section1

here is Section1

つくるファイルは以上

冒頭で述べた制約が無ければ、ここでnpmpythonのコマンドをたたいて
ローカルでサイトをさくっと確認することができる

今回は、IIS から見るまで我慢する

IIS にホストする

ここからが本題

IIS の設定

Windows キーを押してiisで検索する

インターネットインフォメーションサービスを起動する

左のほうに「サイト」があるので、「Webサイトの追加」を押す

  • 適当なサイト名を入力する
  • 物理パスは、先につくったindex.htmlが格納されているフォルダを指定する
  • ポート番号は任意の値でよいが、他のアプリケーションと衝突しないように注意する
    • ここでは 60,000 番台で適当な値を入れた結果、61,243 が当選した

MIMEの種類 -> 機能を開く

右側の操作から「追加」を押して
拡張子.mdと種類text/mdを入力しOK

最後にサイトを再起動しておく

物理パスの設定

物理パスに指定したフォルダに対してアクセス権を付与する

セキュリティ度外視でとりあえず動かしたいのであれば
「フォルダ右クリック -> プロパティ -> 共有 -> プルダウンから Everyone を選択して追加 -> 共有」をする

IISにホストしたdocsifyサイトにアクセスする

ウェブブラウザを開き、アドレスバーにlocalhost:61243を打ち込む
61243はポートの値なので、IISで設定した値をつかう

万事うまくいっていれば以下のようにトップページ(README.mdの内容)が表示される

ページ1へのリンクを押せば、画面が遷移する

.mdファイルを変更保存したあと、ブラウザでF5更新をすれば、即時変更が反映される

おわりに

docsify の強みのひとつは、マークダウンで書けるために git で管理しやすい点だと思う

git で管理する背景には、複数人でドキュメントを共同編集したいという動機があると思う
共同編集に携わる人たちには、冒頭で述べたように python や Node.js が使えない人がいるかもしれない(本当?)
本記事がそういった人たちの助けになればうれしい

参考