SPAブログを作るための各サービス（Nuxt.js + Contentful + Netlify）解説

8/11/2019

このブログの構成について

本ブログは Nuxt.js + Contentful で作成して Netlify でdeployしています。

自分は普通にブログやるならWordpressでいい派なのですが、この構成だと無料ホスティングで独自ドメインも使えてカスタマイズ性も高く、Nuxt.jsを使ったことがないから勉強になるかなと思い挑戦してみることに。

全体的な流れは以下のQiitaが非常に参考になりましたので、こちらの記事では各サービスの概要についてまとめてみたいと思います。

Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションの作成に使用できます。

本質的に汎用性があり、さまざまなターゲット（サーバー、サーバーレス、または静的）をサポートし、サーバーサイドのレンダリングは切り替えることができます。

詳しくは公式に書かれていますが、Vue.jsで動作してSSR(サーバーサイドレンダリング)も可能なフレームワークです。

ページの構成を変えたい場合はローカルでvueファイルを設定して、都度deployしていく形になります。

ContentfulはHeadless CMSです。一度使わないとイメージが沸きにくいのですが、フロントエンドを一切提供しないCMSです。主に記事の本文を書いていくのに使います。

Contentful上で記事を更新すると、Netlifyで自動deployが走り記事を更新してくれる設定があるので、一回設定しておくと後々便利です。
ちなみにローカルにも自動で同期されます。

Wordpressをゴリゴリ使おうとするとphpをいじりますが、Contentfulは欲しいコンテンツがあったらぽちぽち追加していけるのでカスタマイズ性が高くて便利です。

5000レコードまで無料で、1記事1レコード、1画像1レコードです。1つの記事に4つ画像があれば5レコードなので、1000記事まで無料で使えます。

1日1記事でも大変なので、1000記事ってかなり多いです。これだけあれば充分使い倒せるかと思います。

あとはGit環境が無いところからも記事を投稿出来るのが地味に便利です。Nuxtにvue-markdown入れて記事書いてdeployとかする必要がない。

Netlifyは管理画面からGitレポジトリを選んでブランチ指定などの設定を行うだけで、以後指定したブランチにコミットがあるたび自動デプロイしてくれます。SSLも無料。

データベースを使いたい場合はFirebaseの方が使い勝手が良さそうですが、Netlifyは無料で出来ることが多いです。

ドキュメントがほぼ英語ですが、独自ドメインを使う場合以外は半永久的に無料で使うことが出来るので、エンジニアのポートフォリオとしてブログ以外のアプリ等をdeployしてみるのも良さそうです。

今後は、フロントも学びつつ技術特化型の記事を充実させていけたらいいなと思っています。