Skip to content

Gatsby.js、Netlify、contentfulでモダンで爆速なブログを作成

  • Blog
  • Code

📅 April 04, 2020

•

⏱️7 min read

今まで、はてなブログやWordPressを使用して、ブログをさまざまなブログを書いてきましたが、「モダンで自作のブログを作りたい」との一心からGatsby.js、Netlify、Contentfulを使用してブログを作成しました。

（ご覧のブログが自作で作成したブログです。）

しかも、モダンで動作がとてつもなく早いブログなのに完全無料でブログ記事の管理からホスティングまでできてしまうとは…。サーバー代もかからず、ブログが作成、執筆ができるなんて、エンジニアは全員、この構成で自作ブログを作るべきなのでは？と感じるほどです（笑）

普段は主にPHPを扱うバックエンドエンジニアなので、Reactを使用する機会は少ないのですが、多くの参考ページがあったおかげで、難なく自作ブログを作ることができました。 主に参考にさせてもらったのが下記の2つ。

使用技術（Gatsby.js、Netlify、contentful）の説明

  • Gatsby.js: フロントエンド管理。Githubでソース管理しつつ、レイアウトの調整も自由。
  • Netlify: バックエンド管理。静的サイトのホスティングが完全無料。Formやお問い合わせの機能も。
  • Contentful: ブログ記事管理。Headless CMSとしてWeb APIでの記事管理ができる。

ざっと説明すると、使用技術は上記の通り。 完全にお初で使用したのは「Gatsby.js」のみだったので、一番苦労した（している）のはレイアウトの調整です。とは言っても、React.jsが基準となっており、さまざまなテンプレートが用意されているので、参考にしつつ調整することが可能です。

デザインに悩んだときも、Gatsby.jsの公式サイトにあるコレクションを参考にできるので特に心配はなし。むしろ良いデザインが多すぎて困ることの方が多いかもしれません（笑）

あと地味に嬉しいのが、Contentfulの自動保存機能。うっかりブラウザを閉じてしまったときも、ほとんどの確率で復元することができます。

実際のブログ作成手順

以下で実際に行ったブログの作成手順を紹介します。

  1. Gatsby.jsで新規プロジェクトを作成
  2. Contentfulの設定
  3. Gatsby.jsとContentfulの接続
  4. Netlifyでデプロイ

1.Gatsby.jsで新規プロジェクトを作成

Gatsbyは、さまざまなテンプレートが用意されていることは前述の通りです。 今回は、そんなStarter（テンプレート）の中から、gatsby-starter-gcnを使用します。 理由は、Netlify及びContentfulが使用できるテンプレートで、使い勝手が良さそうだったからです。（後から気がつきましたが、コードの修正などもしやすく、とても満足しています。）

Githubのソースコードに書かれている手順でサイトを構築していきます。

$ npm install -g gatsby-cli

まずは上記のコマンドで、Gatsbyのパッケージを追加。これがないとgatsbyのコマンドが打てません。

$ gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

npmにパッケージを追加できたら、実際のコードを複製していきます。 上記のコマンドで、ローカルにgatsbyのプロジェクトが作成されているはずです。

2.Contentfulの設定

①の設定が終了したら、Contentfulの設定を行います。Github、Google、Twitterなどのアカウントを使用してログインができるので、お好きなものを使用してください。

ログインが完了したら、「Create Space」からスペースを作成していきます。このスペースは無料プランだと2つまで作成することができます。

今回はデフォルトの設定を用いて下記のように設定をしていきます。

Contentful Space Setting

  • Space Name: Blog Post
  • 「Create an example space」を選択
  • 「Blog」タブを選択

以上の設定で使用するスペースの雛形が出来上がりました。

API token取得

Gatsby.jsで記事を読み込むためにトークンが必要となるので、このタイミングで作成、取得しておきます。

トップバーからSetting->API Keys->Add API keyの手順で発効が可能です。Nameが必須項目となっていますが、自分のわかりやすい名前にしておけば問題ありません。

Space ID、Content Delivery API - access token、Content Preview API - access tokenが発行されますので、メモしておきましょう。

3.Gatsby.jsとContentfulの接続

上記までの手順が終了したら、次はGatsby.jsとContentfulの設定を行いましょう。

とは言っても、ものすごく簡単で下記のコマンドを打ち、コマンドに従うだけです。

$ npm run setup

コマンドに従うと、ContentfulのAPIトークンが求められるので入力します。すると、Contentfulでブログを更新することで内容がサイト上で反映されるようになります。

ローカルでの内容確認方法は、Contentfulで記事更新後に

$ gatsby develop

のコマンドを実行することで可能になります。開発時に役に立つので覚えておきましょう。

4.Netlifyでデプロイ

ここまできたら残りは本番サーバーにアップデートするのみ。 Netlifyを使用して、Githubに保存されたコードをデプロイできるように設定しましょう。

（Githubにコードをアップしていない人は、必要なのでここでアップが必要。適当な名前で大丈夫なので、pushしておきましょう。）

デプロイ設定と環境変数の設定

Netlifyを開くと、様々なデプロイ方法が確認できます。その中から「New Site From Git」を選択し、手順にしたがってGitHubの対象レポジトリをデプロイします。

その際、「環境変数」の設定が必要となっています。（これが設定されていないとデプロイが失敗します。）

「Site settings>Build & deploy>Environment」から下記のように環境変数を設定します。

Netlify Environment

  • ACCESS_TOKEN: Contentfulで設定したトークン
  • SPACE_ID: Contentfulで設定したスペースID

上記の設定が終了したら、再度サイトのデプロイを試してみましょう。おそらくデプロイは数分で完了します。

感想

以上で基本的なブログ作成手順は終了です。ブログ記事更新時にWebhookなどを設定してあげると、自動的にデプロイが設定できるようになります（今後、追記予定）。 爆速で動くブログな上、カスタマイズも自由自在なので、自分好みのブログに仕上げていきましょう。ぼくもどんどんとカスタマイズして、愛着のあるブログに育てていくつもりです。

今後も技術ブログとしてこのような記事も上げていくので、ぜひご贔屓にお願いいたします！！ それでは良いエンジニアライフを！

← Prev

  • Gatsby Blog by Katsuhiro Shiraishi