今話題の静的サイトジェネレーターでブログを作る！！②

📅 July 08, 2019

•

⏱️7 min read

# 前回までのあらすじ

前回記事はこちら

  1. 各種アカウントの作成
  2. Contentfulの設定（API keys）取得
  3. Blogの作成と初期化（サンプルコンテンツをContentful上に作成）
  4. ローカル環境で確認

ココまでは問題ないでしょうか？
出来ていない方は、前回記事を読んでローカル環境まで作った状態にしておいてくださいmm

# Github上でリポジトリの作成

## なぜGithubを使う？

Netlifyへコンテンツをデプロイする場合、
Githubを通さずともローカルでビルドしてCLIでデプロイ出来ます。

ですが、これだと記事を更新するたびにローカルでの操作が必要で、
僕がめんどくさがってた記事のコミットと変わらない状態になってしまいます。

Github上に置いて＋Netlifyから参照できるようにしておけば、
Netlify側に「ビルドよろ～」とお願いするだけで
ブログの更新が出来ます！！！（Netlifyスゴイ）

## リポジトリを作る

Githubのアカウントにログイン後、
リポジトリの作成を行いましょう。

createblog-repo_create

  • Owner: 自分
  • Repository name: sample_blog（任意）
  • Description: 未入力（任意）
  • Private（リポジトリ自体Publicでも問題ないです）
  • 他項目: チェックなしもしくはNoneでOK

これで、リポジトリ作成ができました。

リポジトリURL: https://github.com/{アカウント名}/{ブログ名}.git

## リポジトリへPush！

前回作成したプロジェクトをCommitして、Pushしておきましょう。
※何も変更してないなら、CommitまではGatsbyJSがやってくれているはず。

今回はPushだけします。
プロジェクトのあるディレクトリで以下のコマンドを実行しましょう！

$ git remote add origin {リポジトリURL}
$ git push origin master

createblog-repo_show

ブラウザ上で、リポジトリを覗いてみてください。 上がってますかね...??

上がっていなかったら、、、ググって頑張ってくださいｗ

# Netlifyでの設定

Github上に資産がある状態まできたら、
Netlifyの設定に入ります～。

## NetlifyとGithubの連携

作成していたアカウントでログイン後、
New site from Gitからサイト作成に進みます。

先程上げておいたリポジトリ、およびmasterブランチを選択してサイトを作成しましょう！！

ビルド設定は、
buildeコマンドはgatsby buildです。
publish directoryはpublic/です。
branch deploysは、allを選択しておけば全てのpushで自動デプロイしてくれます。

createblog-netlify_buildsetting

。。。以上！簡単すぎる！！！

が、このままではAPIkeysが未設定なので、
ビルドエラーとなります。

## 環境変数の設定

ローカル環境構築の際は、setupを叩くことで
gitignoreされたkeyファイルが生成されていました。

セキュリティ的にkeyファイルをリポジトリで
管理するわけにはいかないので、
Netlify上では環境変数へ設定するようにしましょう！

createblog-netlify_env

Environment variablesに以下の内容を設定します。
（設定のbuilde&deploy配下にあるはず）

  • ACCESS_TOKEN: Content Delivery API key
  • SPACE_ID: Space Id

設定できたら、Trigger deployからリビルドしてみましょう！
※今回GoogleAnalyticsは省略でOKです

これで、ホストされましたか？？

URLはNetlifyの画面上ら辺に書いてるのでアクセスしてみてください！

ちなみに、サイト名は変えることが可能です。
変えることで https://サイト名.netlify.com
とURL変更もできます。

## 残る課題の解決

今回設定した自動デプロイは、
リポジトリが更新された場合のみ動きます。

記事が更新された場合は手動でデプロイする必要がありますね、、、

# ContentfulからNetlifyのビルドを動かす

## webhookの設定

Contentful上で記事のpublishが行われた場合に自動デプロイするには、
Netlifyのwebhookを使うことで解決します。

Netlify上の設定からadd builde hookで設定を追加して、
URLの取得を行いましょう。

次に、Contentfulのスペースを開き、
Setting → webhookから先程取得したURLを設定します。

Triggersはデフォルトで問題ないでしょう。

## ためす

Contentful上のサンプル記事のタイトルを更新して、publishしてみてください。

すぐにNetlify上でビルドが始まるはずです。

ビルド完了を待ってサイトへ飛んでみましょう！

# 完成！！！

これにで目標であった、
GatsbyJS+Contentful+Netlifyの構成でブログ作成が完了しました！

後はサイト名やfavicon等を変えるためにGit管理している設定ファイルを少し弄ったりするだけですね。（今回は説明しません）

Contentful上に初期化で作成された記事を削除、
新規作成してオリジナルのものに変えていきましょう！

ちなみに、、、
全部消すとデータなしでビルドエラーになると思います。

# 最後にやってみた感想を。。。

## よかったこと

  • やり方を知っていれば作るのが超簡単
  • 無料で広告なし！（制限はあるけど）
  • 無料なのにレスポンシブだし、pwa対応あり！（スターターキットのおかげ）
  • 記事のコミットが不要なので、書くことに集中できる

## 気をつけたいこと

  • 違う端末から書くために、Git cloneしてきて、setup流したら大変な目にあったw（contentful上も初期化というか、、、サンプルデータが再作成されます）
  • リンクされたコンテンツ（例えばページに埋め込んでた画像を消すとか）が削除されているとビルドエラー。当たり前ですねwでも、これで何度もコケました。。。

以上！！
久々のブログで見づらいかもしれませんが、
参考にしてくれると嬉しいです！！

← Prev PostNext Post →