Nuxt × Contentful × Netlifyを使って無料でブログを構築した話

2020年3月現在、このブログはNuxt × Contentful × Netlifyで構成されています。以前はWordpressで作っていましたが、時勢の流れに合わせてJAM Stack構成に変更しました。（そのためすべての記事をリライトしました）

ここでは細かい実装の話ではなく、アーキテクチャや構成といったおおまかな話をします。これからNuxt × Contentful × Netlifyでブログを作ろうという方や、もう少し広くJAM Stack構成のブログを作ろうという人のためになればと思います。

JAM StackとヘッドレスCMS

JAM StackとはJavaScript APIs Markupの頭文字をとったもので、ざっくりというとサーバーAPIを通じてJavaScriptで動的にコンテンツを生成しつつ、静的なHTMLを生成している構成です。WordPressはサーバー側で生成しているのでJAM Stackではありません。

JAM Stackとセットで出てくることもあるヘッドレスCMSとは、表示機能のないCMSです。コンテンツの作成や管理はしますが、Webページとして表示する機能は持ち合わせていません。その代わりその情報をAPIとして配信しています。JAM StackのAPI部分を担当します。

今回の構成だと、NuxtがJavaScriptの部分、ContentfulがヘッドレスCMSになります。

ホスティング環境

ホスティング環境としてNetlifyを利用しています。いわゆるWordPressブログでいうところのレンタルサーバーになります。さくらインターネットやロリポップなどとは違い、Netlifyは静的サイトのみホスティングになります。WordPressのようなサーバーサイドプログラムを実行することはできません。

その代わり、CDNサービス、IPv6、SSL、HTTP2.0などのレンタルサーバーに比べ高性能で、さらにホビーユースレベルであれば無料で利用できます。JAM Stackなブログなら基本的に静的になるので、手軽にこれらの高機能を享受できます。

Nuxt × Contentful × Netlifyのメリット

Nuxt × Contentful × Netlifyで構築したメリットは表示スピードの速さ、そして低コストで運用できる点です。またCMSとサイトが分離し、サイトは静的なページなので、セキュリティ面でも比較的高くなります。

表示スピード面では、PHPのようなサーバーサイドプログラムが表示に介在しないので、サーバー性能に表示スピードが依存しません。Nuxtには表示スピードを改善するベストプラクティス的手法が組み込まれているので実装者は特に意識せず実現できます。（最速を目指すのであればより細かいチューニングは必要です。）

SEOの面ではWordPressと遜色ないでしょう。

NetlifyはSSL×HTTP2.0の設定が可能でCDNも用意されているので、この辺りも速度改善に寄与してくれます。

CMSとサイトが分離していることでサイトのフレームワークを変えることも可能です。現在はNuxtを使っていますが、将来的により高性能な（そして流行りの）フレームワークに換えることも容易です。逆に別の（ヘッドレス）CMSへ移行するハードルも低いです。

Netlifyには、本来サーバーサイドの構築が必要な、お問い合わせフォーム機能が用意されているのも便利です。

Nuxt × Contentful × Netlifyのデメリット

Nuxt × Contentful × Netlifyで構築するデメリットですが、Nuxtで作成する手間がかかります。APIのモデルはサイトによって変わってくるので、WordPressのようなテンプレートはありません。そのため、サイトに合わせて構築する必要があります。（全く同じAPIモデルを作ればテンプレート化もできなくはないと思いますが。）WordPressテーマを1から作成するコストとはそれほど変わらないと思うのでオリジナルテンプレートを作るのであれば差は少ないです。

また、ContetfulもNetlifyもサイトも英語ですし、ドキュメントももちろん英語なので一定程度の英語力が必要になります。また、WordPressに比べれば情報が少なく（これまた英語の情報の方が充実している）、自己解決能力は必要になります。この点は今後利用者が増えてくればノウハウも増えてくるのかと思います。他にもMicroCMSという日本製ヘッドレスCMSも登場しているので、それを利用するのもありでしょう。

ContetfulとNetlifyの無料枠

ContetfulとNetlifyは無料で利用できますが、一定以上の規模・利用だと無料枠には収まらなくなってしまいます。無料枠の特徴としていずれのサービスも、

メンバーが少人数
月当り帯域・利用上限がある
サポートが乏しい

詳しい料金体系などは下記に書かれています。
Pracing | Contentful
Plans and Pracing | Netlify

Contetfulで少し注意したいのが、無料枠だと1アカウントにつきコンテンツが5000個までとなっています。記事1つでも1カウントですし、画像1つでも1カウントになります。画像が多いようなブログだとこの上限に触れてくるかもしれません。

フロントエンドエンジニアが作るなら十分ありえる選択肢

全般的にまだ実装・運用者に求められるリテラシーが高く、一般の人が（WordPressのように）簡単に導入できそうにない印象です。しかし、フロントエンドエンジニアが作成するのであればその辺りはクリアでき、なおかつ無料で高品質な環境を手に入れられます。

個人用のブログではなく、プロユースのメディアとして利用も十分ありえます。小規模なメディアでない限り無料枠では収まらないと思いますが、表示スピードの速さ・セキュリティ面、スケーラビリティなどを考えると有料プランを払う価値はあるのではないでしょうか。

自分もWordPressから乗り換えてこの環境に満足しています。