docsifyをIISにホストする

# はじめに

[docsify](https://docsify.js.org) を使いたいが、以下の制約がある場合

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

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

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

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

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

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

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

- `index.html`
- `README.md`

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

- `Page1.md`

## `index.html`

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

https://docsify.js.org/#/quickstart?id=manual-initialization

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

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

## `README.md`

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

```md:README.md
# Hello, docify

トップページです

## PlantUML

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

## Link

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

## `Page1`

何の面白みもないページ

```md:Page1.md
# Page1

here is Page1.md

## Section1

here is Section1
```

## つくるファイルは以上

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

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

# IIS にホストする

ここからが本題

## IIS の設定

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/175b5fb4-4828-7f91-5f7f-a4ab91d63509.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/8523c994-1162-653a-1a23-e8788c4d541d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/1b7fdcc5-03e8-edbb-b380-b9a4128f31fb.png)

MIMEの種類 -> 機能を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/1d65e4ec-fade-de29-41ed-b3355c761a5e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/b03f4f33-3561-7973-d99e-47211c53d974.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/c6428a42-cf35-3148-99c0-34120a5912d5.png)


## 物理パスの設定

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/d9951256-e57f-83f6-4f51-0c6cadd6e5aa.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/63120e50-4aaf-8cb4-3204-a87dd1ade4ca.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/0fa50cc5-0c5e-39ce-bec5-ff2d02c471ec.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/7b23eee6-9613-6963-19f8-149fdbb59c95.png)

# おわりに

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

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

# 参考

https://www.cnblogs.com/yokeqi/p/14276176.html

https://www.ipentec.com/document/windows-iis-add-mime-type

https://qiita.com/kapioz/items/2c2353320ea96c8c43ed