VuePressで自身のポートフォリオ兼ブログサイトを作りました
2020/07/16
#web #vuejs #vuepress
ポートフォリオ&Markdownで書けるブログをVuePressで作る

これがこのブログの初投稿になります。今回はこのteastatを作った経緯と、そこで使われている技術について語りたいと思います。VuePressで具体的にどうやってサイトを作るかについてはまた別記事で紹介したいです。

経緯

元々自分のブログはBloggerを使って作ったものがあったのですが、そこでは次のような不便を感じていました。

  • 手元にあるMarkdownのドキュメントをそのままブログ記事にしたい
  • 数式(LaTeX)が扱いづらい
  • Web上のエディタで入力するのが嫌で、vscodeとかvimとか使いたい

また、自分でブログを一から作ってみたいという思いもあったので、今回Bloggerを捨てて一から新しいブログを作ることにしました。

理想の形

新しくブログを作るにあたって、次のことが行えたら良いなと思っていました。

  1. 記事はMarkdownで管理する
  2. 既存のポートフォリオサイトをブログに組み込み、一本化する
  3. 記事とサイトデザインを分離する

Markdownは書きやすさと文章に構造を持たせることのバランスが優れています。その上、GFM拡張やその他プラグインの導入によってシンタックスハイライト付きのコード表示、グラフの表示もできたりと、文章とそれに関連する情報を同時に記述することが出来て嬉しいです。また、普段の生活ではMarkdownを用いてドキュメント管理することが多いため、それらをそのまま記事にしたいという思いもあります。

2番目は自身の情報を集約することで、興味を持ってくれた方がより自分について知れるようにするという狙いがあります。例えば就活で自身のウェブサイトを教えて下さいという時は基本的に1つのウェブサイトしか教えられないので、ポートフォリオサイトとブログが別になってしまっていると片方しか見られなくて残念です。また、サイトを更新する側が管理しやすくなるというメリットもあります。

3番目は別のフレームワークを使ってサイトを作り直したくなった時でも簡単に記事移行できるようにするという狙いです。

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

今回ブログを作るにあたってVuePressという静的サイトジェネレーターを使っています。静的サイトジェネレーターとは簡単に言ってしまうとGithub Pagesでホスティングできるようなサイトをビルドしてくれるものです。記事自体はMarkdownで記述するので、それらをHTMLやCSSに変換するのにビルドという過程が入ります。

静的サイトジェネレーターは最近流行っていて、VuePress以外にも次のようなものがあります。

これらはどれも静的サイトジェネレーターとしての役割を果たしてくれますが、ベースとなっている記述言語や自由度の高さに違いがあります。私はVue.jsに触れたことがあるので、Vue.jsでサイトを記述できるNuxt.jsとVuePressが候補になりました。

ではなぜNuxt.jsではなくVuePressを選んだかと言うと、VuePressの方がMarkdownで静的なサイトを記述するという目的で作られていて、Nuxt.jsを扱うより目的の機能を素早く実装できそうだと思ったからです。これはVuePress公式でも触れられていて、次のように書いてあります。

Nuxt is capable of doing what VuePress does, but it’s designed for building applications. VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.

VuePressについて

VuePressは次のような特徴があります。

  1. MarkdownとVue.jsを組み合わせて記事を書ける
  2. デザイン周りはVue.jsを使って記述できる
  3. ブログに必要なプラグインが最初から幾つかある

Vue.jsを組み合わせることができるというのはとても嬉しいです。例えばvue-routerを使えば勝手にSPAになってくれます。

MarkdownについてはMarkdown中にVue.jsのコンポーネントが書ける点が特徴的です。拡張Markdown的なものが自分で作れます。また、Markdownのパース自体はmarkdown-itを使って行っているので、markdown-itのプラグインを導入すれば色々と拡張もできます。例えばmarkdown-it-katexを導入すればLaTeXが記述できるようになります。こんな感じです。

Ωf(ω)dσ(ω)\int_{\Omega} f(\vec{\omega})d\sigma(\vec{\omega})

他にもシンタックスハイライト付きのコードなんかも載せられます。markdown-itの設定をいじれば好きなHighlighterを設定できます。

int f(int x, int y) {
  return x + y;
}

プラグインにはブログで役に立ちそうなvuepress-blog-pluginというものがあります。これはタグ付け機能や記事の分類、外部連携とのコメント機能を提供してくれます。例えば同一タグを持つ記事の一覧や、この記事の一番下にあるコメント欄でこのプラグインの機能が使われています。

デザインについて

VuePressは必要最低限の機能だけを提供しているゆえに、デザインの自由度はかなり高いです。デザイン周りをVue.jsで記述できる(つまりVue.jsのコンポーネントベースの作り方ができる)のが嬉しいです。

私はCSSはあまり得意ではないので、Vuetifyに頼ることにしました。モダンな感じのブログが手っ取り早く実装できてしまいました。

デザインを自分で作らずに、既存のテーマを使う方法もあります。ただ、数は少ないです。テーマ一覧はawesome-vuepressで見ることができます。その中にはブログ向けのテーマもあったのですが、個人的にあまり気に入らなかったので、一からテーマを作ることにしました。

感想

VuePressはMarkdownを記事にするという目的の中で必要最低限の機能しか提供していないので、デザイン周りの自由度が高いなと思いました。Vue.jsを使って手っ取り早くブログを構成したいが、デザインにもこだわりたいという方におすすめです。

デザインを追求しようとするとVue.jsをゴリゴリ書いたり、CSS周りを整えたりする必要が出てきますが、VuePress自体がうまく作られているので割りとスムーズに機能を実装できました。ただ、何かで詰まった時にVuePressユーザーが少ないゆえか、情報が全然なかったのでその点は苦労します。