Gatsby.js + Contentful + Netlifyで構築する安全かつ高速なブログ

更新機能を持ったwebサイト制作にあたるとき何を選択肢にとるでしょうか。
多くがWordPressといったCMSを組み込むということを考えるでしょう。
手軽にコンテンツを更新・管理・活用し、世界中に情報発信を行うことができます。

だがしかし、
簡単に情報発信できるツールとの引き換えに考えなければいけないことはたくさんあるし、導入のハードルは実は高い！

「まてまて、そのサーバースペックじゃWordPressインストールできないよ…」
「スペック上げられますか？」

「コンテンツが増えれば増えるほど表示速度は遅くなるけど…」
「表示速くするのでお時間いただけますか？」

「セキュリティもやっぱり気になりますよねぇ」
「動的システムやデータベース抱えてるから絶対安全とは言い切れないけど…」
「セキュリティ強固にしますのでご予算的にいかがでしょうか？」
・
・
・

どうしよう！いっぱいお金もらえるけど、作るのちょー大変だ！！！！
頑張ったのに結局更新しないお客さんがいるのも実は知ってる！
努力が無意味になっちまう、うわーーーー！！！

闇堕ち寸前、そんなあなたに「Gatsby」
デートの前には髪型決めるぜ「GATSBY」
自分自身に気合を入れよう「Guts Me!」

サーバー関連、表示速度、セキュリティ、、、すべてを一発解決してくれる
静的サイトジェネレーター[Gatsby.js]の全体像をさくっとご紹介。
(もしかしたらいつの日か環境構築編、開発編、公開編とそのうち分けて詳しくご紹介するかも、、、。)

Gatsby.jsとは

React製の静的サイトジェネレーターです。
静的サイトジェネレーターという名の通り、基本的には静的ページの生成を行います。
データベースや動的システムを抱えるCMSと比較してセキュリティリスクは遥かに低いとされています。
今回のフロントエンド係

なんでサーバーが不必要？

Netlifyなどホスティングサービスを使うから。
サーバー無料、メンテ不要と楽ちんです。
※ ただしホスティングサービスが落ちる可能性あり

なんで速いの？

cmsのようにアクセスがあってから、データベースにデータを取りに行ってブラウザに描画という流れではなく
ビルド時点でhtmlを生成し、それをサーバーに置いてあるのでアクセスがあった時点ですぐに描画できるから速いのです。

なんでセキュリティリスクが低いの？

データベースにアクセスする必要がない！= 悪いスクリプトがデータベースに流し込まれる心配がないからです。

Contentfulとは

Headless CMSの一つでコンテンツ管理担当です。
ここで書いた記事をAPIで配信してくれます。
このデータをGatsby.jsが読み込んでファイルを生成してくれます。
今回のバックエンド係

Netlifyとは

ホスティングする場所です。
githubと紐付けを行えばプッシュするたびに勝手にデプロイしてくれます。
今回のサーバー係

こいつら3つを使って制作も速度も爆速なブログをさくっと作ってみましょう！

開発環境の準備

まずは以下の環境の用意。
・Node.js
・yarn
・git
※ あらかじめgithubでリポジトリを作っておいてください。

Gatsby CLIのインストール

$ npm install -g gatsby-CLI

入力が完了したら動作確認で以下を入力。

$ gatsby -v

バージョンが表示されればOK

スターターのダウンロード

$ gatsby new

と入力し、さくさく初期設定を進めていきましょう。

プロジェクト名はお好きなように。今回は「myblog」としました。

スターターの選択をします。
今回はgatsby-startter-blogを選択します。

これでほぼ完了！このまま使うことも可能です。
※ インストール中にyarnとnpmの選択確認が表示されることがあります。
このときは「yarn」を選択してください。

開発環境・サーバーの確認

まずはプロジェクトフォルダへ移動

$ cd myblog

下記で開発サーバーを起動してください。

$ gatsby develop

成功したら https://localhost:8000/ でブラウザ確認

スターター[gatsby-startter-blog]なら以下が表示されていれば
セットアップは完了です。

自分好みにスタイル調整をしていきましょう。

Contentfulとの連携

Contentfulに登録し、記事を書きましょう。こんな感じ

記事が書けたらAPIキーの取得をします。
Space IDとContent Delivery API – access tokenをメモっといてください。

Gatsbyでデータ取得

まずはContentful使うためのパッケージのインストール

$ yarn add gatsby-source-contentful

イントールしたらしたら
gatsby-config.jsにAPIキーを下記みたいな感じで追加します。

{
  resolve: "gatsby-source-contentful",
  options: {
    spaceId: 'Space IDを入力',
    accessToken: 'access tokenを入力',
  },
}

これで記事データが取得できます。
あとはGatsbyの記事テンプレートにデータを渡してあげて
必要箇所に表示するだけです。簡単！

Netlifyとの連携

[New site from Git]からgithubの連携を許可します。
(もちろんBitbucketも可)

対象のリポジトリを選択し、ブランチなどを確認。
あとはDeploy siteを押すだけ。簡単！

そしたら所謂初期ドメインが発行されるので
そいつにアクセスして確認してみましょう。

今回サンプルで作ったのここ。
https://zen-booth-278121.netlify.app/

終わりに

今回のサンプルはGatsbyスターターを使用したので
Gatsbyインストール → サイト構築 → Contentful連携 → Netlify連携まで約1.5時間くらいです。

ContentfulとNetlifyも連携しているので新しい記事が書かれたら
もちろんサイトにも記事が追加されます。

簡単に速く安全に使えるサイトが制作できるのは素晴らしいですね。

欧米ではwordpressからGatsbyでの制作に移行しているところ多く存在しているみたいです。
Contentfulではなくてデータ管理のみ既存のwordpressを使用し、
表側はGatsbyで改修などの事例もあるみたいです。

日本ではじわじわ話題になり始めている感じなので今のうちから扱えるようになっておくと、数年後にでかい顔ができるとかできないとか。

今回は以上！それではまたいつか。

———————————————————-

以下、今回参考にさせていただいた文献とサービスたちです。
▽ 参考文献
Webサイト高速化のための 静的サイトジェネレーター活用入門
▽ サービス
Gatsby
Contentful
Netlify