Gatsby + Contentful + Netlifyでブログを作る

Gatsbyとは

GatsbyはReactベースの静的サイトジェネレータ（SSG）です。 事前にビルドで生成した静的コンテンツをホスティングサービスにアップするだけで良いので、アプリケーションサーバー等の設定を行う必要がありません。 私自身何度かVue.jsやNuxt.jsでサイトを作成したことがあり、AWS LambdaやApi Gatewayなどの設定と比べるとかなり楽にサイトの公開まで辿り着けた印象です。 ContentfulのようなHeadlessCMSとも相性が良いので、ブログのようなコンテンツベースのサイトを作るにはかなりおすすめです。

Gatsbyの導入とプロジェクトの作成

以降Mac環境による実装です。 まず、Gatsbyのコマンドを扱うためのCLIツールをインストールします。

$ npm install -g gatsby-cli

次にGatsbyプロジェクトを作成します。 Gatsbyではスターターライブラリというものが存在します。 Contentfulのスターターライブラリも存在していますが、今回は学習の意味も込めて、必要最低限の機能のgatsby-starter-hello-worldで進めていきたいと思います。

$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-hello-world

上記コマンド実行後、blogディレクトリが作成されます。構成は以下のようになっています。