個人ブログにVuePressを採用しようとした話 #Vue.js

Shinjuku.LT Advent Calendar 2018 19日目の記事です。

個人ブログにVuePressを採用しようとした話

結論を先に言いますと、個人ブログへの採用は一旦、見送りました。

背景

プログラミング以外のゆるい記事を掲載する媒体が欲しかった（プログラミング系記事は今後もqiita一択）
ブログ立ち上げる機運、しかし、はてなブログ、note、MediumなどのSaaSは、うーん・・
静的サイトジェネレーター使えばコスト抑えながら自分で運用できそう
どうせ個人ブログだし、技術検証もかねて新しめのやつにしたい

静的サイトジェネレータの選定

[StaticGen」(https://www.staticgen.com/) から、新しいっぽくて人気の高いツールを探す
Goの勉強がてらに「Hugo」も良さそうだが、時すでに遅し感が
「Gatsby」、ナウでおしゃれなサイトが作れそうだが、Reactはまだ自分には早い・・
「VuePress」が目につく

VuePress とは

Vue.jsの作者が作ったVue.jsの静的サイトジェネレーター
公式サイト
同じくVue.jsのフレームワークであるNuxt.jsとの差別ポイントは、VuePressはドキュメント作成に特化しているということ
2018年4月にできたばかりで、開発が活発

すごいスタイリッシュ！
VuePress に決めた！

触ってみた

活発に開発が進んでおり、1系がアルファ版で出ていますが、yarnやnpmでのインストールだとバージョンを指定しなければ0.x系がインストールされます。
仕様がところどころ異なりますので、ご自身がどのバージョンで開発をされているかはご確認することをおススメします。
1系バージョンのドキュメント：https://vuepress.vuejs.org/
0.x系バージョンのドキュメント：https://v0.vuepress.vuejs.org/

ドキュメントを読むと、1系は@vuepress/plugin-blogというプラグインが開発されており、これを使えばきっとブログが簡単に作れるんじゃないかと甘い期待を抱き、私は1系で開発を行うとします。
（ちなみに0.x系はブログに関してはTodoリストに入っていたので、残念ながら対応していないようです）

$ yarn add -D vuepress@1.0.0-alpha.30
$ mkdir src
$ echo '# Hello VuePress' > src/README.md

package.json

{
  "devDependencies": {
    "vuepress": "1.0.0-alpha.30"
  },
  "scripts": {
    "src:dev": "vuepress dev src",
    "src:build": "vuepress build src"
  }
}

$ yarn src:dev

success [00:42:06] Build feb74f finished in 3138 ms! 
> VuePress dev server listening at http://localhost:8081/

プロセスが起動し、http://localhost:8081/から画面を確認できます。

ここからブログの書き方です。まずプラグインのインストールから。

$ yarn add -D @vuepress/plugin-blog

./src/_postsディレクトリ内にyyyy-mm-dd-title.mdの形式でファイルを置きます。

├── src
│   ├── README.md
│   ├── .vuepress
│   └── _posts
│       └── 2018-12-10-first-post.md
├── package.json
├── yarn.lock
:

2018-12-10-first-post.md

---
title: 新しくブログはじめました
---

# 新しくブログはじめました

こんにちは。

http://localhost:8081/2018/12/10/first-post/にアクセスすると、画面が真っ白・・・
開発者ツールを確認するとtitleタグが反映されているので、./src/_postsディレクトリに置いたファイルは/yyyy/mm/dd/title/に変換はされたようです。

きっとレイアウトファイルを作成してFront Matterに指定するのかな、と思いつつどこにレイアウトファイルを配置するのかがわからず。
Ruby製のJekyllやMiddlemanだとなんとなく勘所が効いたのですが、Vue.jsは不勉強で手が止まってしまいます。
また、1系はアルファ版ということで、開発中に発生するエラーが自分のコードに起因するものなのかそうでないのかの判断がつかない可能性があります。
0.x系は1系で用意されているプラグインのようなものは存在しないから、自分で実装しないといけないし・・。

結論

1系は、自分のVue力（りょく）を考えると採用しないほうが良い
0.x系を採用するなら、もう少しブログを書くことに優しい他のツールを選択するかも
触ってみた感じ、開発者向けドキュメントに特化した機能が備わっている
- 開発者向けドキュメントは情報が多くなりがちなので、標準でナビゲーションバーやサイドバーが備わっているのは嬉しい
- このページをみて欲しい。コードにラインを強調できる機能、qiitaにも欲しい