1.この記事で達成したいこと

  • 独自ドメインのHugoプロジェクトのブログを作ってみたい
  • ブログはHugo + Firebase Hostingで構成し、デプロイはGithub Actionsで自動化したい
    • これまでローカルからデプロイという運用対処としていた、、

※Hugoのインストール手順はこちらに書いてあるのでどうぞ。

2.前提

3.環境情報

$ grep Ubuntu /etc/os-release 
NAME="Ubuntu"
PRETTY_NAME="Ubuntu 20.04.2 LTS"
$ hugo version
hugo v0.87.0-B0C541E4 linux/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio
$

4.PaperModの導入

$ hugo new site ${BLOG_DIR} -f yml
$ cd ${BLOG_DIR}
$ git init
$ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
  • config.ymlのbaseURLにFirebase Hostingでホストしているカスタムドメインを指定
$ vi config.yml

# https://github.com/adityatelange/hugo-PaperMod/wiki/Installation
baseURL: https://gkzz.dev/
#languageCode: en-us
title: gkzz.dev
paginate: 5
theme: PaperMod
  • 記事を書いてローカルサーバーにデプロイしてみる
    • http://localhost:1313で接続できる
$ hugo new posts/<記事のファイル名>.md
$ hugo server -D

5.Firebaseのインストールと初期設定

$ curl -sL https://firebase.tools | bash
$ firebase login


Visit this URL on this device to log in:

********  <--- 表示されるURLからログイン認証を終える

Waiting for authentication...

✔  Success! Logged in as ********
  • Firebase CLIからGithubのログイン認証を終え、またfirebaseServiceAccountというサービスアカウントを作成
    • 対話形式で進んでいく
    • firebaseServiceAccountはGithub Actions上でFirebase CLIが使うもの
## 改めて設定し直したい場合
$ firebase init hosting:github
$ firebase init hosting
$ firebase init hosting
You're about to initialize a Firebase project in this directory:

  /path/to/${BLOG_DIR}


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
i  Using project ${GCP_PROJECT_ID}

=== Hosting Setup

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.


## ${BLOG_DIR}からみた相対パス。PaperModの場合、public
? What do you want to use as your public directory? public


## シングルページではないのでNo
? Configure as a single-page app (rewrite all urls to /index.html)? No


## Yes
? Set up automatic builds and deploys with GitHub? Yes
✔  Wrote public/404.html
✔  Wrote public/index.html
i  Detected a .git folder at /path/to/${BLOG_DIR}
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:
********  <--- 表示されるURLからFirebase CLIからGithubのログイン認証を終える

Waiting for authentication...

✔  Success! Logged into GitHub as ${GITHUB_USERNAME}


## ${GITHUB_USERNAME}/${BLOG_DIR}
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) ${GITHUB_USERNAME}/${BLOG_DIR}

✔  Created service account ******** with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret ********
i  You can manage your secrets at https://github.com/${GITHUB_USERNAME}/${BLOG_DIR}/settings/secrets.

## 後ほど自分で書くのでNo
? Set up the workflow to run a build script before every deploy? No

✔  Created workflow file /path/to/${BLOG_DIR}/.github/workflows/firebase-hosting-pull-request.yml


## Yes
? Set up automatic deployment to your site's live channel when a PR is merged? Yes


## main (Firebase Hostingへデプロイするときのブランチ)
? What is the name of the GitHub branch associated with your site's live channel? main

✔  Created workflow file /path/to/${BLOG_DIR}/.github/workflows/firebase-hosting-merge.yml

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
********
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

ここまでくると、Github Actions上でFirebase CLIが使うfirebaseServiceAccountというサービスアカウントがご自身のブログのリポジトリの「settings > secrets」のページから登録されていることが確認できる。

https://github.com/${GITHUB_USERNAME}/${BLOG_DIR}/settings/secrets.

2022/04/02更新

別の機会に同じ環境でfirebase init hosting など firebase-tools(Firebase CLI) を使おうとしたところ、以下のようなエラーに遭遇したことがあったのでそのトラブルシューティングについて更新しておく。

Error: Failed to list Firebase projects. See firebase-debug.log for more info.

原因の特定までできていないが、以下の記事を頼りにすると、 firebase-tools をアップグレードするとFirebaseとの認証トークンが無効化されてしまっていることが原因とされているらしい。

It looks like when you upgrade firebase-tools, that may invalidate your auth token. You just have to log out and log back in.

記事のとおり、再ログインをしてから firebase init hosting をしたら問題なくコマンドが使えたので原因は記事のとおりアップグレード起因による認証関係のトラブルと考えてよさそう。

$ firebase logout

$ firebase login

How do I solve: Error: Failed to list Firebase projects. See firebase-debug.log for more info - Stack Overflow


6.GitHub Actionsの設定ファイル(.github/workflows/*.yml)を用意

$ cat .github/workflows/firebase-hosting-merge.yml
# .github/workflows/firebase-hosting-merge.yml

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
    - name: checkout
      uses: actions/checkout@v2

      ## PaperModをサブモジュールとして使っているので
      with:
        submodules: true
        fetch-depth: 0
    
    - name: setup hugo
      uses: peaceiris/actions-hugo@v2
      with:
          hugo-version: 'latest'
    
    - name: build      
      run: hugo --minify

    - name: setup firebase and deploy
      uses: FirebaseExtended/action-hosting-deploy@v0
      with:
        ## Github Actionsがデフォルトで用意している
        repoToken: '${{ secrets.GITHUB_TOKEN }}'
        ## firebase init hostingを実行して生成される
        firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
        ## 本番サイトへデプロイしたい場合、"channelId: live"とする
        channelId: live
        projectId: <GCP_PROJECT_ID>
      env:
        FIREBASE_CLI_PREVIEWS: hostingchannels

注意点1

  • Hugoのテーマをサブモジュールとして扱っている場合、Github Actionsの設定ファイルでsubmodulesを読み込むように、submodules: true としておく
  • fetch-depth: 0 は、全てのブランチ、タグの履歴を追うということらしい
  • 参考: https://github.com/actions/checkout#usage
    - name: checkout
      uses: actions/checkout@v2
      with:
        submodules: true
        fetch-depth: 0

注意点2

以上でFirebase CLIとGithub Actionsの設定は完了。


7.jobを実行してみる

  • 以下のようなGithub Actionsの設定ファイルであれば、指定しているブランチに対してpushかmergeすれば、jobが実行され、Firebase Hostingへデプロイされることが確認できる。
    • Github Actionsの設定ファイルが以下の場合、指定しているブランチはmainブランチ
# .github/workflows/firebase-hosting-merge.yml

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main

おまけ.ローカルからFirebase Hostingへデプロイする

$ GCP_PROJECT_ID=your-project-id
$ hugo -D && firebase deploy --only hosting --project ${GCP_PROJECT_ID}

参考