Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その３ Gatsbyの設定）

はじめに

（ほぼ）無料で静的サイトを簡単に作れたらいいなと常々おもっていました。
最近は環境などそろってきたのでやってみます。

• Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その１独自ドメインの取り方）
• Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その２ Firebaseの設定）
• Gatsby+firebaseで独自ドメインのHTTPSサイトを作る（その３ Gatsbyの設定） ← 今回はここ

今回は「Gatsbyの設定」です。

前提条件

• Cloud9を使って作業
• お名前.comにアカウントあり
• Firebaseのアカウントあり

Gatsbyのインストール

nodeのツールのため、npmでインストールします。

npm install -g gatsby

Gatsbyプロジェクト作成

その２で作成したフォルダは利用せず、新しいフォルダにプロジェクトを作成します。
ブログのテンプレートを利用します。

cd ~/workspace
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

Gatsby動作確認

動作確認を行います。

cd blog
gatsby develop -H $IP -p $PORT

上記実行後、以下が表示されるため、クリックします。

  Local:            http://0.0.0.0:8080/

うまく英語のブログが表示されたらOKです。

ビルド

デプロイ用にビルドをします。

gatsby build

デプロイ

firebaseのファイルを設定します。

その２で作成したファイル２本をコピーします。

cp ../gatsby-test/.firebaserc .
cp ../gatsby-test/firebase.json .

firebase.jsonを修正します。
publicを"./"から"public"に修正
rewriteを削除

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

デプロイします。

firebase deploy

以上で完成です！！

作成したドメインにアクセスしてみてください。

なお、gatsbyはこちらを参考にしました。