🐙

Hugoで作ってる静的WebサイトをGitHub ActionsでFirebase Hostingにデプロイした

に公開
GitHub Actions
Hugo
Firebase Hosting
tech

Firebase のプロジェクトを作成

  1. コンソールから Firebase のプロジェクトを作成
  2. コンソールから Firebase Hosting を有効化

ローカル

  1. Hugo で作っている静的 Web サイトの root で firebase init
  2. firebase init hosting:github で Firebase Hosting と GitHub のリポジトリを連携[1]
    1. GitHub Actions のワークフローの生成、GitHub の secrets への登録が自動で完了する
    2. PR 作成時にプレビュー可能な URL を発行してくれるワークフローと、マージ時にデプロイするワークフローが生成される

ドメイン

  1. txt に Firebase Hosting で指定されるキーを入力して認証
    1. このキーは認証完了後も消さないようにする
  2. 認証が完了したら、Firebase Hosting の指定どおりに A レコードを設定

GitHub Actions のワークフローを修正

  1. Firebase Hosting はデフォルトで root 直下の public を公開する。Hugo の公開ディレクトリが public じゃなければ、Firebase Hosting か Hugo のどちらかをまたは両方を修正
    1. 自分は両方 public だったので問題なし
  2. Firebase Hosting のデプロイ前に public に Hugo で静的 Web サイトを生成
    1. 自分はこちらのアクションを使ってます
      1. https://github.com/peaceiris/actions-hugo

GitHub Pages の削除

  1. GitHub Pages の時に使っていたワークフローやブランチや設定を削除
脚注

  1. 自分はここでちょっとハマりました。 firebase-tools をアップデートした後、Firebase CLI の認証がおかしくなったので firebase logout した後にもう一度 firebase login をやり直す。 firebase-tools が 8.7.0 までしかアップデートできず、 hosting:github ができなかったので（Node.js 周りの環境構築がおかしかったっぽい。普段使ってないので最初適当にセットアップしたくさい）、 curl -sL firebase.tools | upgrade=true bash で直接最新バージョンをインストール。これで hosting:github が使えるようになった。 ↩︎

Discussion