Hugo を Firebase Hosting で公開した

Hugo で静的サイトを作成し、Firebase Hosting で公開してみましたので手順を書いておきます。

ホスティング方法を Firebase Hosting にしたのは、なるべく簡単にページ公開ができて適当に運用できるようにしたかったからで、GitHub Actions を用いたデプロイパイプラインを初期設定ですることができると聞いていたので、それを使えば楽に運用できるのでは？と思ったから選択してみました。

では、早速公開までの手順を書いてみます。
console に残ってたやつを貼り付けてるので間違ってたらすみません。

Firebase Hosting の設定

ちなみに、Firebase へのログイン・プロジェクト作成は事前に済ませています。

プロジェクトの初期化

firebase init hosting

すると、インタラクティブに初期設定を進めることができます。

? Please select an option:
? Select a default Firebase project for this directory:

Firebase のプロジェクトはどれにするか？と聞かれるので、自分は事前に作成しておいたプロジェクトを選択しました。

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public

公開する directory が聞かれたので public にしました。

? Configure as a single-page app (rewrite all urls to /index.html)? No

SPA かどうか聞かれたので　No と答えました。

? Set up automatic builds and deploys with GitHub? Yes

GitHub で自動デプロイするかと聞かれたので、もちろん Yes としました。

? File public/404.html already exists. Overwrite? Yes

public/404.html 上書いていいかと聞かれたのでうっかり Yes としてしまいました (後で戻した) 。

i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?xxx

Waiting for authentication...

✔  Success! Logged into GitHub as bestinarix

secret に保存しないといけないので GitHub 認証しろと言われたので認証した。

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) bestinarix/xxx

workflow を設定するリポジトリを決めました。

i  You can manage your secrets at https://github.com/bestinarix/xxx/settings/secrets.

すると secrets に service account が保存されました。

? Set up the workflow to run a build script before every deploy? No

毎回 build script 走らせる？と聞かれたが間違って No にしてしまった。
Hugo の場合 build が必要なのでそれを設定しておくべきだった (後でやる) 。

? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? master

merge されたら自動デプロイする？するとしたら、どの branch ？と聞かれたので、master に merge したら deploy してと答えました。

✔  Firebase initialization complete!

終わり。めっちゃ簡単 (ちょいちょい間違ったけど) 。

あとは適当に build して master に push すれば CI が良しなにデプロイしてくれるのでとても快適です。
build も CI に任せておきたいところです。

ちなみに branch を切って PR を出すとプレビューのページを適当な URL で表示できるようにしてくれるのでめちゃくちゃいいです。
ただ Hugo に設定している bassURL とは別の URL なので CSS とかが軒並み読み込めなくなって死んでしまっている、、、
この辺り改善策があるはずなので、追々対応していこうと思います。

Firebase Hosting は最高だ。