何年も前から全く更新せずに放置していた会社のブログを新しくリニューアルしました。
今まではWordpressを利用していたのですが、せっかくなので最近流行りのHeadlessCMSと静的サイトジェネレータを使ってナウいサイトを作ろう！と意気込んで早半年。2019年5月の10連休GWを利用した自宅でのぶっ通しコーディングの末、なんとか公開できるまでになりました。
せっかくなので、どんな技術を使って作ったのかというのをメモも兼ねて紹介したいと思います。
ヘッドレスCMS
CMS界において圧倒的なシェアを誇るWordpressですが、最近はwp-jsonなどを使ってAPIサーバとして動作させるケースも増えてきた気がします。僕自身もモバイルアプリ開発のバックエンドにWordpressを使用したプロジェクトを進めていますが、APIサーバとして使うのであればもっと軽量で使いやすいCMSがあるはず、と思い色々調べてみるとヘッドレスCMSなるものを発見しました。
どうやらすでに沢山の種類があるものの、現状はまだデファクトスタンダードと言えるものはなく、どれを採用すべきか悩ましいところ。
色々と検証した結果、オープンソースでかつGithubのスターが一番多い「Strapi」をとりあえず使ってみることにしました。
静的サイトジェネレータ
さて、次に考えるべきことはフロントエンドをどうやって構築するかということです。普通にreact.jsやvue.jsを使ってSPAにするという選択肢もありましたが、ブログはSEOやらSNSシェアのことを考えなければならずSSR（サーバサイドレンダリング）が割と必須というのもあり、これまた色々悩みながら構築事例を調べてみると「静的サイトジェネレータ」というタイプのフレームワークを使うのが良いとのこと。
この静的サイトジェネレータというのは、あらかじめCMSから全てのデータを取得し、全ページ分の静的なhtmlファイルを生成してくれるというものです。何年か前に流行ったMovable Typeと近いイメージですね。この静的htmlをwebサーバにアップすれば、完全にブラウザのみで動作するセキュアなサイトが構築できるというわけです。
僕が利用したのはGatsby.jsというフレークワークですが、これは静的サイトジェネレータとしては結構広く使われているっぽいというのと、Strapi公式サイトでGatsbyを利用したブログ構築のチュートリアルがあったのでなんとかなりそうだったというのが理由です。
構築開始
技術選定が完了したら、あとは簡単、構築するだけ！という訳にもいかず、自分の知識不足のせいで行ったり来たりで半年もかかってしまいました。
多言語対応や画像の取り扱いなどやっぱりWordpressは便利だなと思いつつも、いい加減Wordpressに飽き飽きしているエンジニアの方々向けに具体的な構築手順を記事にしていこうと思います。
以下に、参考にさせていただいたブログを紹介します。
Headless CMSと静的サイトジェネレータ「Gatsby」を使ったサイトの構築
GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ