VuePressを使って技術メモをサイト化する

この記事は [Vue.js #2 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/vuejs-2) の16日目の記事です。すごく遅れてすみません。

個人の技術メモの話です。
今まで、Kobito・Boostnote・Kibelaなど色々使ってきましたが、

- マークダウンファイルで管理
- VSCodeで編集
- クラウドストレージで共有

という形に落ち着きました。
ツールで管理すると、乗り換えたくなった時にめんどくさいんですよね…

ただ、ブラウザで見たくなる時があるので、ちょっと触ってみたいと思っていたVuePressでサイト化することにしました。

# インストール

初めて触るのでインストールから

```bash
# package.json作る。内容は適宜に
npm init
# VuePressのローカルインストール
npm install -D vuepress
# docs以下のディレクトリのファイルが使われるようなので作成
mkdir docs
# TOPページ用のREADME.mdを作成
echo '# Hello VuePress' > docs/README.md
```

ローカルインストールなので、 `npm run` コマンドで `vuepress` コマンドが実行できるように `package.json` の `scripts` の中身をこんな感じに変えてあげます。

``` package.json
"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
}
```

これで  `npm run dev` コマンドを叩いて `localhost:8080` にアクセスしてみれば…

![スクリーンショット 2018-12-18 17.52.57.png](https://qiita-image-store.s3.amazonaws.com/0/3531/943244d0-b49c-29c5-9eca-350c4fad89e9.png)

表示できました。簡単や。

# ページを作ってみる

`docs` 以下にマークダウンファイルを置いておくと自動的にページにしてくれる(階層も作ってくれる)とのことなのでちょうどこの前メモってたPCの設定メモを `docs/tool/mac移行まとめ.md` とあえて日本語でファイルを作ってみました。
これで `localhost:8080/tool/mac移行まとめ.html` をみてみると


![スクリーンショット 2018-12-18 17.52.23.png](https://qiita-image-store.s3.amazonaws.com/0/3531/159cb33f-b4ba-8b50-0c15-2258463ef6cc.png)

いけますね。
まるっと書き溜めてるマークダウンファイルを移すで大丈夫な気がしてきました。

# サイドバーをつけてみる

これだとページが全然わからないので、サイドバーにリンクを出したいです。
サイドバーを出すには、 `.vuepress/config.js` に設定を書くようです。
こんな感じで書くと

``` config.js
module.exports = {
    themeConfig: {
        sidebar: [
            // 
            '/',
            // グループ化したいリンク
            {
                // タイトル
                title: 'tool',
                // falseにすると常に開く
                collapsable: false,
                children: [
                    '/ツール/mac移行まとめ',
                ]
            }
        ]
    }
}
```

![スクリーンショット 2018-12-18 19.58.50.png](https://qiita-image-store.s3.amazonaws.com/0/3531/bc63bdb1-3141-09d8-827e-3f8922a22df5.png)

出ました。特に設定していないのに、`Hello VuePress` や `前提` というリンクテキストになっているので、ファイルの中の `h1` を自動で読み取ってるみたいです。

変なリンクテキストになってしまいましたが、ファイルの中身を書き換えてあげればOKなので、これも楽で良いですね。

## 自動でサイドバーを設定する

とはいえ、手動で毎回設定するのはめんどくさいのでディレクトリ内のファイルを自動で読み取るようにしたいです。

検索したところ、やはり同じように思っている人がいたので参考にしてみました。

https://qiita.com/jacoyutorius/items/ad769d5e303d222f215a

※ `dev` だとうまく動いたのですが、`build` がうまく動きませんでした。
書き方が悪かったのかもしれないので、引き続き調査してみようと思います。

あと、VuePressのサイドバーでは2階層以上は表示されないようです。

# タイトルを入れる

サイトタイトルを設定してみます。
これも設定ファイルに書くだけ。

```config.js
module.exports = {
    title: '技術メモ',
    …
}
```

# 検索を試す

デフォルトの検索だと、タイトルと見出しだけ引っかかるようでした。

全文検索をしたいのであれば、[algolia](https://www.algolia.com/)とかを使えばできそうですが、今回はデフォルトのままでやりました。

# herokuにアップしてみる

サイト化したものをherokuでアップしました。
細かくカスタマイズしてみたいところですが、形になったので一旦上げてみます。
これでどこからでも見れるし、Git管理も出来るので一石二鳥です。

[公式のherokuのデプロイ設定](https://vuepress.vuejs.org/guide/deploy.html#heroku)を見てみるとローカルでビルドしたものをアップするような感じになっていますが、 デプロイした時に `build` までしてもらいたいのでカスタマイズします。

nodeのbuildpackを入れて、 `package.json` の `heroku-postbuild` に実行したいコマンドを入れてあげればOKです。

```package.json
"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "heroku-postbuild": "npm run build"
},
```

## Expressを使って生成したページを表示する

これで静的ファイルが生成されるので、それを表示させるためにExpressでサーバーを立ててみます。

```bash
npm install express --save
```

インストールして `index.js` にexpressの設定を書きます。
`express.static` にVuePressで生成されるファイルのパスを設定してあげます

```index.js
const express = require('express');
const app = express();

app.set('port', (process.env.PORT || 5000));
app.use('/', express.static('docs/.vuepress/dist'));
app.listen(app.get('port'), function() {
    console.log("Node app is running at localhost:" + app.get('port'))
});
```

そして、 `Procfile` を作って、以下のように書いてあげればOkです

```
web: node index
```

## Basic認証を追加

個人のメモなので、一応Basic認証を追加します。`basic-auth-connect` を使います。

```bash
npm install basic-auth-connect --save
```

```index.js
const express = require('express');
const app = express();
const basicAuth = require('basic-auth-connect');

app.set('port', (process.env.PORT || 5000));
app.use(basicAuth('id', 'password'));
app.use('/', express.static('docs/.vuepress/dist'));
app.listen(app.get('port'), function() {
    console.log("Node app is running at localhost:" + app.get('port'))
});
```
Basic認証が出ればOKです！

# 感想

VuePress、導入が簡単ですし色々な使い方ができそうなので、他の場面でも使っていきたいです。