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

この記事は Vue.js #2 Advent Calendar 2018 の16日目の記事です。すごく遅れてすみません。

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

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

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

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

インストール

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

# 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 にアクセスしてみれば…

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

ページを作ってみる

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

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

サイドバーをつけてみる

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

config.js

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

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

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

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

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

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

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

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

タイトルを入れる

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

config.js

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

検索を試す

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

全文検索をしたいのであれば、algoliaとかを使えばできそうですが、今回はデフォルトのままでやりました。

herokuにアップしてみる

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

公式の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でサーバーを立ててみます。

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 を使います。

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、導入が簡単ですし色々な使い方ができそうなので、他の場面でも使っていきたいです。