Netlify + Netlify CMS + GatsbyJSでブログを構築した
もう三ヶ月も前の話だけど、元々Conoha VPS(Ubuntu) + WordPressで運用してたブログの構成を、Netlify + Netlify CMS + GatsbyJSに置き換えた。
同じような構成を検討してる人に向け、各サービス・ツール毎の利点、欠点など忘れないうちに記しておこうと思う。
Netlify
静的サイトのホスティングサービス。GitHubリポジトリと連携し、pushしたタイミングでサイトを自動デプロイしてくれる。
利点
維持コストがかからない
Netlifyは先述の通り静的サイト向けのホスティングサービスだが、Headless CMSと静的サイトジェネレータを組み合わせればブログを構築して公開することができる。更新頻度やデータ量が多すぎなければ無料のStandardプランでも十分実用に耐えるものが作れると思う。
まったく更新してないブログのVPS維持費に月1000円弱かかっててかなり辛かったが、ドメイン料以外一切かからなくなった。
サーバー管理が不要
静的サイトとして公開する最大のメリットはこれだと思う。
自分でサーバー管理するのに比べてセキュリティ的に考慮すべき箇所が少ないので気楽だし、設定段階でハマり続けることも無いのでサイトそのものの構築に集中できる。
欠点
無料プランの機能制限
Netlifyには無料プランだと使えない機能も多い。
(Plans and Pricing | Netlify)
基本的にはなくても事足りたが、basic認証が使えないのは痛かった。サイトの公開前や、ステージング環境を別途用意したい時など、自分しか見られないよう認証をかけたい場合に一手間かける必要がある。
僕の場合はNetlifyの環境変数にパスワードを設定し、ビルド時に吐き出されるhtmlファイルを全てStaticryptで暗号化するようにして、認証機能っぽいものを実装した。
Netlify CMS
https://www.netlifycms.org/
Netlifyが作ってるHeadless CMSの一種。
(コンテンツ管理のみに特化したCMS、取得機能はAPIで提供する)
利点
Netlifyとの連携が楽
Netlify公式のHeadless CMSなので、スムーズに連携して試すことができた。
Markdownで書ける
リッチテキストエディタでポチポチ文字装飾するのがクソ嫌いなので、標準でMarkdown記法に対応してるのはうれしい。
gitでコンテンツ管理できる
Netlify CMSで管理するコンテンツはMarkdownファイルとして吐き出され、gitリポジトリの管理対象になる。
欠点
遅い
これはGitHubのリポジトリと連携する都合上仕方ないんだけど、コンテンツの追加・更新の度にcommit, pushが発生するので、待ち時間がわりと長くてイライラする。
自由度が低い
管理画面操作の自由度が低い。シンプルでわかりやすいのだが、痒い所に手が届かない。コレクションを階層化できない・一覧をソートできない・特定の単一ディレクトリにしか画像を保存できない等。サイトの規模に比例して管理がつらくなっていく予感がする。
エディタの操作性が悪い
しばらく使ってるうちに気付いた致命的な欠点として、エディタが普通に使いづらいしバグも多い。アップデートで改善されつつはあるっぽいけど、まだまだ課題は多そう。
フロントエンドとコンテンツ管理を完全に分離できない
作り方次第なところもありそうだけど、普通にドキュメントに従って作ると、フロントエンドのソースとコンテンツファイルを管理するリポジトリが同じになってしまう。
そのため、管理画面からコンテンツを更新した後にフロントエンドの変更を行う場合は、予め最新のコンテンツファイルをpullしておかないとコンフリクトが発生して怒られる。フロントエンド構築とCMSの役割を明確に分離できるのがHeadless CMSの良さなのに、互いが密に結合した作りになってしまう。
これを避ける為には
- CMS部分だけを別ドメイン・別リポジトリで管理
- コンテンツを追加・更新タイミングでWebhook機能を使ってサイト側に通知
- サイト側で通知を受け、最新のコンテンツファイルをpullしてビルド
という構成にするのがよさそうだけど、面倒なので試してはいない。誰かやってみて下さい。
GatsbyJS
Reactベースの静的サイトジェネレータ。
利点
最新のフロントエンド技術が使える
Reactベースのフレームワークなので、最新のフロントエンド技術に慣れ親しんだ人であればかなり扱いやすい。
あまり馴染みのない場合も公式チュートリアルが充実してるので、一通り実践すれば何となくわかってくるはず。見た目にこだわりが無ければ、Starter Library（初期テンプレートみたいなやつ）を適当に入れて、あとはドキュメントを元に適宜調整するだけでも十分それっぽくなると思う。
僕自身フロントエンド開発に弱く、仕事でたまにVue.jsを使う程度でReactは未経験だったので、勉強を兼ねてフルスクラッチでテンプレートを作ってみた。お陰で完成までにかなり時間を要したが、それなりに知見も得られた。
速い
このサイトを触ってもらえばわかるが、とにかく速い。
プラグインが豊富
公式プラグインが充実しているので、目的に合致したものがあればすぐサイトに実装できる。
欠点
学習コストが高め
チュートリアルを触れば何となくわかるとは言ったが、それでもやはり未経験者にとっては学習コストが高めだと思う。ES6の記法と何らかの仮想DOMフレームワーク(Vue.jsかReact)に予め慣れておくとよさそう。
今後の課題
察したと思うがNetlify CMSにだけ不満があるので、CMSをContentfulへ乗り換えようかと思っている。
あと、GatsbyJSはTypeScriptにも対応してるので、そのうち移行したい。
それ以前に、もっと定期的に記事書きたい。
