はじめに
はじめまして、バックエンドエンジニアのK（@k_urtica）です。
今回、Vue.js製の静的サイトジェネレータであるGridsomeを使ってマークダウンブログ（本ブログ）を構築しました。
実は今までにもブログは作っていて、前のブログではヘッドレスCMSのPrismic.ioとNuxt.jsで構築した、いわゆるJAMStack構成のブログを作っていました（更新はあまり出来ていませんでしたが。。）
そのブログでは記事およびメディア（画像等）をPrismic上で執筆・管理し、それをNuxt側でAPIを使い取得してSSGしたものをホスティングして公開するというような構成でした。
ヘッドレスCMSはデータの管理やAPIでデータを取得できることによる取り回しのしやすさなど良い面も多くあったのですが、やはりそのサービスにロックインされてしまうというのが気になって、今回CMSを使わない構成でブログを作り直しました。
また、これはPrismicの話ですが、Prismicはエディタにマークダウンを使えなかったのも理由のひとつです。当初はマークダウン使えなくてもいーだろと思っていたんですが、マークダウンの書きやすさを考えると無理でした。。
なぜGridsomeか？
というわけでGridsomeを使ってブログを作ったわけですが、なぜGatsbyではないかというと私が普段個人開発でよく使うのがVue/Nuxtだからです。React入門も兼ねてGatsbyに触れてみたのですがやはりReactまわりの学習コストがそれなりにかかるのでGridsomeを選択しました。
Gridsomeはこの記事執筆時点でまだVer.1にもなっていないのですが、Gatsbyにインスパイアされているだけあって問題なく使えるレベルに仕上がっています。
Gatsbyと同様に、GraphQL層があり、リンクのプリフェッチや画像圧縮・遅延ロードなどとにかく高速、いや爆速です。デフォルトで爆速な仕組みとともにVueのSFCで開発することができます。
NuxtのSSGはどうか？
静的ページのジェネレートだとNuxtでも同様のことが可能です。実際に前のブログはNuxtで作っていました。
ただ、現状のNuxtの場合、静的ページ生成後のクライアントサイドでもAPIが実行されるという仕様があり、完全な静的ページではないです。
そのため、ブログのような生成後に動的な変更がないようなページでも都度APIが実行されてしまうというような無駄な処理が行われていました。
また、Nuxtの場合ヘッドレスCMS等から必要なデータ分API用意してコンテンツを取得する必要があり、このAPI（処理）がだんだん肥大化していってしまうというような問題がありました。
その点、GridsomeだとGraphQLなのでかなりすっきりしたコードになります。
例えばブログの場合タグやカテゴリーといったものが必要なのでそれを実装するために、複数のAPIを実装したり、場合によってはマッピング用のjsonファイル等も用意したりして実装していました。これがGraphQLだとリレーションを張るだけで一瞬でそれらの機能が作れちゃいます。
正直Gridsomeを使う前はNuxt＋マークダウンでSSGの構成でいこうとしていたんですが、Gridsomeに触れた今は少なくともブログ用途でNuxtはないなっていう感じです。
なぜマークダウンブログか？
これは冒頭にも書いたのですが、単純に文章を書くならやっぱりマークダウンでサクサク書きたいという思いが湧いてきたことと、ヘッドレスCMSサービスにロックインされたくなかったからです。
マークダウンだけであれば例えばヘッドレスCMSのContentfulを使えば、マークダウンに対応しているのでマークダウンで書けます。ただContentfulは無料枠がありますがもちろん制限もあります。制限が近づいてきたとき、あるいは別の理由でいざ別のCMSに乗り換えようとしたときに簡単にはデータを移行できないことがほとんどです。
こういったそのサービスにロックインされるのがちょっとうーん、といった感じだったので、今回は記事のマークダウンファイルや画像をローカルに持ってしまいすべてGit管理する構成にしました。
またマークダウンファイルを作れさえすれば良いので、好きなマークダウンエディタで書けるっていうのも理由のひとつです。
ブログとして実現できていること
基本的なブログレイアウトのほかに現状以下の機能を実装できています。
- カテゴリー機能
- タグ機能
- コードブロックのシンタックスハイライト
- 前後記事のリンク
- サイトマップ出力
- Google analytics連携
ブログ本文のレイアウトはとりあえずとしてGithub-markdown-cssをあてています。
これから実現すること
- 埋め込みコンテンツ対応（oEmbed）
- PWA化
- ページネーション
- サイト内検索
- ブログ全体スタイル調整
Gatsbyには及ばないですが、Gridsomeもプラグインがたくさんあり、PWA化などプラグインですぐに対応できるものがありますがぼちぼちやっていきたいと思います。
おわりに
とりあえず何度目かのブログはできたので、、自分のペースでちゃんと更新していきます。