All Articles

Gatsby.js + Netlify によるブログ構築手順 (後編)

Gatsby.js という React ベースの静的サイトジェネレータを利用してブログを作成する手順を記載します。 本ブログも Gatsbyjs + Netlify + GitHub で構築しています。

website-design

本記事のゴール

  • Gatsby.js を GitHub リポジトリに push できる
  • Netlify へのデプロイが成功する

5. GitHub への push

ブログのディレクトリにて、順に git コマンドを実行していきます。

git init
git add .
git commit -m "Initial Commit"

git remote add origin https://github.com/your-github-name/your-repository.git (※1)
git push -u origin master (※2)

(※1) 自身の GitHub リポジトリの URL に合わせて変更してください。 (※2) push 時に以下のエラーが発生する場合があります。

To https://github.com/xxxx/xxxxx.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/xxxx/xxxxx.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

おそらく次のうちのどれかで解消すると思われます。

  • git fetch origin, git merge origin/master を順に実行
  • それでもエラーなら、git merge --allow-unrelated-histories origin/master を実行
  • (もしかして) README.md のコンフリクト

無事、push まで終わった場合は次のステップに進みます。

6. GitHub と Netlify の連携

Netlify にログインし、[New site from Git] をクリックします。

netlify-new-site

GitHub を選択します。

netlify-connect-to-git

認証後、自分の管理するリポジトリが表示されるので、前段手順で push したリポジトリを選択します。 [Owner] の設定はデフォルトのままで、その他の設定を画像のように行います。

netlify-build-config

[Deploy Site] ボタンを押すと、初回デプロイが行われます。

デフォルトの設定で、GitHub の master ブランチに push したタイミングで自動デプロイが行われるようになっています。 2回目以降のデプロイ作業が非常に楽になりますね。

(寄り道1)

他のテーマの設定や構造がどうなっているか詳しくは分かりませんが、私は netlify.toml ファイルの設定が Netlify 上で行ったビルド設定を上書きしてしまい、デプロイに失敗しました。

Error running command: Build script returned non-zero exit code: 127

というエラーログが表示されている場合は、まずビルド設定を疑いましょう。

(寄り道2)

yarn 関連のジョブに失敗している場合があります。 その場合は、ブログのディレクトリにて下記コマンドを実行します。

yarn install

なお、インストール中に時間がかかると簡単にタイムアウトを起こしてしまいます。

error An unexpected error occurred: "https://registry.yarnpkg.com/date-fns/-/date-fns-2.12.0.tgz: ESOCKETTI
MEDOUT".

ESOCKETTIMEDOUT エラーが生じた場合は同じディレクトリ上に .yarnrc ファイルを作成し、

network-timeout 600000

と記述し、無理やりタイムアウト時間を伸ばして再実行してみましょう。

7. サイトにアクセス

Deploy に成功したらサイトにアクセスしてみましょう。 デフォルトでは、*********.netlify.app という形式でドメインが割り当てられるようです。

この ********* の部分は [Settings] タブ - [Site information] - [Change Site name] から変更できるので、 自分の好きなサイト名に変更してみてはいかがでしょう。

(おまけ) Netlify について

Netlify とは、高機能な静的ホスティングサービスで、フロントエンドのビルド、デプロイ、ホスティングの全てを担保してくれる優れものです。もちろん世の中には様々なホスティングサービスがありますが、無料枠の内容が非常に優秀なため個人的におすすめできます。

  • 無料SSL
  • チームメンバー数 : 1人
  • 同時ビルド可能数 : 1
  • 帯域幅/月 : 100 GB
  • ビルド合計時間 : 300分 / 月
  • アクセス可能数 : 500 request / 分 (2020/05/06 時点)

と、個人ブログの運用には何ら支障のない範囲だと思います。

  • α が必要な場合は 料金表 をご参照ください。

　おわりに

最初こそ設定はそこそこ (それでもWordpressと比べると天と地の差ですが) 必要ですが、慣れてしまえばあっという間に Webサイトを構築でき、記事の追加も楽々できてしまいます。 Gatsbyjs はブログ作成以外にも、様々な可能性があると思うので今後も利用用途を探ってみたいなと思います。

最後までお読みくださり、ありがとうございました。

(関連) 前編 の記事

Published 6 May 2020

しばいぬ好きエンジニア