+++

GitHub側にテーマや記事データの保管場所（倉庫）を作成する準備が整ったら、次はいよいよビルド済みのHTMLファイルを実際に配信する「インターネット空間の公開場所（Webサーバー）」を確保します。
今回は数あるサービスの中から、Googleが提供している強力なホスティング基盤 「Firebase Hosting（ファイアベース・ホスティング）」 を採用して進めます。

なぜFirebase？

  • 爆速: Googleの強力なCDN（コンテンツ配信ネットワーク）を使えるので、世界中どこからでも速い。
  • 無料: 個人開発レベルなら余裕で無料枠に収まります。
  • SSL対応: 面倒な設定なしで、最初から https:// で安全に公開できます。

1. Firebaseプロジェクトの作成

まずは「プロジェクト」という器（うつわ）を作ります。

  1. Firebase Console にアクセスし、Googleアカウントでログインします。

    【注意】MFA警告が出たら？
    画面に「多要素認証（MFA）を有効にする必要があります」というメッセージが表示されることがあります。
    その場合は、 Googleアカウントのセキュリティ設定 で 「2段階認証プロセス」 をONにしてから、再度アクセスしてください。

  2. 「プロジェクトを追加」 （初めての場合は 「Firebase プロジェクトを設定して開始」）をクリック。

  3. プロジェクト名 を入力（例: my-hugo-blog）。

  4. Googleアナリティクス は、とりあえず「無効」でOKです（後からでも設定できます）。

  5. 「プロジェクトを作成」 をクリックして、完了を待ちます。

これでクラウド側の準備は完了です！

2. ツール (Firebase CLI) のインストール

パソコンからFirebaseを操作するための「黒い画面用のツール」を入れます。
これには Node.js というソフトが必要です。

手順

  1. まだ入っていない人は、 Node.js公式サイト から「LTS版（推奨版）」をダウンロードしてインストールしてください。
  2. ターミナルを開き、以下のコマンドを入力します。
    npm install -g firebase-tools
    （Mac/Linuxでエラーが出る場合は sudo npm install -g firebase-tools を試してください）

3. ログインと初期設定

インストールできたら、あなたのパソコンとGoogleアカウントを紐付けます。

  1. ログイン:

    firebase login

    ブラウザが開くので、Googleアカウントを選択して許可してください。

  2. 初期設定:
    プロジェクトのフォルダ（hugo.toml がある場所）で実行します。

    firebase init

    ここから質問攻めに合いますが、落ち着いて以下のように答えてください。
    （矢印キーで移動、Spaceで選択、Enterで決定です）

    • Which Firebase features…?:
      Hosting: Configure files for Firebase Hosting... を選択（Spaceキー）してEnter。

    • Please select an option:
      Use an existing project を選択。
      さっき作ったプロジェクト（my-hugo-blogなど）を選びます。

    • What do you want to use as your public directory?:
      public と入力してEnter（重要！ Hugoの出力先と同じにします）。

    • File public/404.html already exists. Overwrite?
      No (Nを入力してEnter)。

    • Configure as a single-page app (rewrite all urls to /index.html)?:
      No (Nを入力してEnter)。Hugoは静的サイトなので不要です。

    • Set up automatic builds and deploys with GitHub?:
      No (Nを入力してEnter)。※これは次の記事で手動設定するので、今はNoにしておきます。

    • File public/index.html already exists. Overwrite?:
      No (Nを入力してEnter)。せっかく作ったトップページが消えないように！

    Firebase initialization complete! と出たら成功です！

4. 手動デプロイしてみよう！

準備は整いました。いよいよ世界に向けて発信です。

  1. Hugoでサイトを生成（ビルド）:

    hugo

    （public フォルダの中身が最新版になります）

  2. Firebaseへ送信（デプロイ）:

    firebase deploy

成功すると Hosting URL: https://... というURLが表示されます。
そこにアクセスしてみてください。あなたのサイトが表示されましたか？
おめでとうございます！🎉

高速なFirebase環境で手動公開を成功させよう

表示された https://***.web.app/ のURLにアクセスし、ローカル環境と同じように自分のサイトが表示されれば、手動デプロイは大成功です！🎉
Googleの強固なグローバルCDNのおかげで、表示速度も非常に高速になっているはずです。

今はまだ「コマンドを打ってビルドして、アップロードコマンドを打つ」という少し面倒な手動作業が残っていますが、次回はいよいよこの作業を完全に省き、「GitHubにプッシュするだけでFirebaseのサイトが自動的に全自動で更新される（Actions）」というモダンな運用環境の構築へと進みます！