Gatsby + Firebase Hostingでプロフィールサイトを構築する

GatsbyとFirebase Hostingを使って自分のプロフィールサイトを構築したのでそのメモ。

前提

サイトの中身はGitHubリポジトリで管理
https://github.com/santosfrancisco/gatsby-starter-cvがプロフィールサイト向けだったのでこれを使った
GitHub Actionsでmasterブランチにpushされたら自動的にFirebase Hostingに反映されるようにした
今回は一つのGitHubリポジトリで複数のサイトをホスティングしたかったので、サブディレクトリを作成した。以下のような構成になっている。
- lampetty-net-sites (リポジトリルート)
  - www (今回構築するプロフィールサイト)
  - xyz (別のサイト)

準備

GitHubリポジトリを作っておく
NodeJSをインストールしておく

Quick Start | Gatsbyに沿って以下を実行する。

(on repository root)
npm install -g gatsby-cli
gatsby new www https://github.com/santosfrancisco/gatsby-starter-cv

これで www ディレクトリ配下にサイトの静的ファイルが生成される。次にこれをFirebase Hostingにデプロイする。

Firebase Hostingのセットアップ

プロジェクト作成する
Firebase Hosting の設定を行う
- 公式ドキュメントに沿ってやればOK

(on repository root)
npm install -g firebase-tools
firebase login
firebase init

今回は一つのリポジトリと一つのFirebaseプロジェクトで複数のサイトのファイルをホスティングしたかったので、以下のファイルを作成した。

https://firebase.google.com/docs/hosting/multisites に沿ってFirebaseの設定を行い、以下のようなファイルを作成した。

firebase target:apply hosting www lampetty-net-sites

firebase.json

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

.firebaserc

{
  "projects": {
    "default": "<PROJECT_NAME>"
  },
  "targets": {
    "<RESOURCE_NAME>": {
      "hosting": {
        "www": [
          "<RESOURCE_NAME>"
        ]
      }
    }
  }
}