1.この記事で達成したいこと
- 独自ドメインのHugoプロジェクトのブログを作ってみたい
- そのブログがこれ! –> https://gkzz.dev
- ブログはHugo + Firebase Hostingで構成し、デプロイはGithub Actionsで自動化したい
- これまでローカルからデプロイという運用対処としていた、、
※Hugoのインストール手順はこちらに書いてあるのでどうぞ。
2.前提
- HugoのテーマはPaperMod
- Firebase HostingとGoogle Domainsで購入したカスタムドメインを接続する方法は以下のとおり実施している
- Firebase HostingとGoogle Domainsで購入したカスタムドメインを接続する | gkzz.dev
- ドメインはgkzz.devとする
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の導入
- 以下のPaperModのインストール手順を参考に進める
- https://github.com/adityatelange/hugo-PaperMod/wiki/Installation#method-2
- ※
https://github.com/adityatelange/hugo-PaperMod
をサブモジュールとする点がミソ! - 「6.GitHub Actionsの設定ファイル(.github/workflows/*.yml)を用意」で活きてくる!
$ 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のインストールと初期設定
- 以下のFirebase CLIのインストール手順を参考に進める
$ 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
6.GitHub Actionsの設定ファイル(.github/workflows/*.yml)を用意
- 以下の記事を参考に進める
- 使っているActionsは以下の3つ
$ 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
- peaceiris/actions-hugo@v2 で紹介されているサンプルコードはデプロイ先をGithub Pagesとなっている
- デプロイ先は本記事と同様、Firebase Hostingを使ったウェブサイトである場合、併せて以下の書き方も参考に書いてほしい
以上で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}
参考
- sh0e1 | Hugo + Firebase HostingでGitHub Actionsを使ったCI/CD
- Installation · adityatelange/hugo-PaperMod Wiki
- actions/checkout@v2
- peaceiris/actions-hugo@v2
- FirebaseExtended/action-hosting-deploy@v0
- 最新のHugoをインストールする方法とHugoの設定ファイルをtomlフォーマット以外にする方法 | gkzz.dev
- Firebase HostingとGoogle Domainsで購入したカスタムドメインを接続する | gkzz.dev