VuePressを使ってリニューアルしました

  • その他

WordPressで構築してはや2年、このサイトもそろそろ別の環境に移したいと思い続けてきました。その上で技術をどうするか散々悩んだのですが、今回は勉強がてらVuePressで構築してみました。

技術選定

初めはもともと使用していたWordPressをそのままAPIサーバーとして残して、フロントのみをS3などに置いて配信するなどのことを考えていたのですが、WordPressで使っていたプラグインが4系依存だったのと、そこまで費用と労力をかけるか?と自問自答した結果、途中で断念しました。
次に考えたのが静的サイトジェネレータで、ReactベースのGatsbyにするか、Vue.jsベースのNuxt(静的化)、VuePress、Gridsomeにするかで悩み、結局VuePressにしました。
この中でVuePressを選んだ大きな理由はそんなになく、とりあえず仕事で使っているVue.jsベースで、かつ自分が触ったことないもの、という選定をした結果、そうなりました。

苦労したこと

  • Layoutsをまたぐと何度もroutingが走ってしまう
  • 思い描いたページ・ディレクトリ構成にできない
  • @vuepress/plugin-blog の問題
    • ステータスがWIPであり、そもそも本番で使用すべきではない?
    • 最新のバージョンにしようとしたら大きく変わりすぎていて互換性がなかった
    • ドキュメントの通りに config.js でオプションを設定しても反映されない

私がまだ理解できていないだけかもしれませんが、このあたりでかなり苦労しました。
特にブログの一覧ページで顕著に出ていて、本当はページネーションやカテゴリ・タグでのフィルタリング周りをURLのハッシュなどで実現したかったのですが、ルーティングでうまくいかず、SessionStorageで誤魔化すような実装になってしまっています。
さらに、 @vuepress/plugin-blog については開発者が作っているテーマが前提になっているということもあるようで、思い描いたように作りたければ自分で開発せざるを得なそうな印象を受けました。

結論として

今回はごり押しで構築しましたが、VuePressをブログで利用するのはあまりオススメはできなさそうです。
ただ、静的な単純なドキュメントサイトであれば、Vue.jsの知識と基本的なVuePressの仕様を把握しさえすればそんなに難しくなく開発できるので、用途次第という感じかもしれません。