HugoプロジェクトをFirebase Hostingに自動デプロイするGitHub Actionsを設定してみた

2020.02.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

$git pushをトリガにHugoプロジェクトをビルドしてFirebase Hostingにデプロイするまでを自動化するGitHub Actionsワークフローを設定してみました。

Hugoのサンプルプロジェクトを作成する手順も記述していますが、必要なければスキップしてください。

作成したもの

サンプルプロジェクトを作成（Optional）

rootディレクトリ下にサブディレクトリを作成し、新規Hugoプロジェクトを作成します。

mkdir develop
cd develop/
hugo new site sampleWeb

Congratulations! Your new Hugo site is created in /develop/sampleWeb.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

見た目をよくするためThemeを追加します。
利用したのはAnanke Gohugo Themeです。

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Cloning into '/develop/themes/ananke'...
remote: Enumerating objects: 48, done.
remote: Counting objects: 100% (48/48), done.
remote: Compressing objects: 100% (37/37), done.
remote: Total 1591 (delta 21), reused 25 (delta 11), pack-reused 1543
Receiving objects: 100% (1591/1591), 4.22 MiB | 628.00 KiB/s, done.
Resolving deltas: 100% (867/867), done.

config.tomlを更新します。　　

title = "Notre-Dame de Paris"
theme = "ananke"
publishDir = "../public"

[params]
  # choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
  background_color_class = "bg-black"
  featured_image = "/images/gohugo-default-sample-hero-image.jpg"

hugo server -D コマンドでページを確認してみましょう。

こんな感じでページが表示されればOKです。

config.tomlにpublishDir = "../public"を設定することでビルドされたプロジェクトがpublic下に作成されますが、このコードが最終的にFirebaseへデプロイされます。

firebase.json

Firebase Hostingへデプロイする際にfirebase.jsonファイルが必要なのでfirebase initコマンドもしくは手動で作成します。

コマンドで作成する場合、.gitignore、publicフォルダや.firebasercファイルも生成してくれますが、publicフォルダはHugoプロジェクトをビルドする際に生成されるので無くても問題ありません。.firebasercファイルはプロジェクトをmain.yml内で指定する場合は必要ありません。

GitHub Actionsを設定する

ymlファイルを丸ごと置いておきます。.github/workflowsに置いてレポジトリへPushするか、GitHubのコンソールからファイルを作成してください。

## main.yml
name: hugo_firebase_demo
on:
    push:
      branches:
        - develop # 任意のブランチを設定

jobs:
    build:
        name: build hugo projects
        runs-on: ubuntu-latest
        steps:
            - name: Checkout Repo
              uses: actions/checkout@v1
              with:
                submodules: true
            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                hugo-version: 'latest'
            - name: build hugo pages
              run: |
                cd develop/sampleWeb && hugo #Hugoプロジェクトパスへ移動＆ビルド
            - name: Archive Production Artifact
              uses: actions/upload-artifact@master
              with:
                name: public
                path: public
    deploy:
        name: Deploy
        needs: build
        runs-on: ubuntu-latest
        steps:
            - name: Checkout Repo
              uses: actions/checkout@master
            - name: Download Artifact
              uses: actions/download-artifact@master
              with:
                name: public
            - name: Deploy to Firebase
              uses: w9jds/firebase-action@master
              with:
                args: deploy --only hosting
              env:
                FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
                PROJECT_ID: <デプロイ先のFirebase ProjectID > # ここで指定をしない場合は.firebasercファイルが必要

利用したGitHub Actions

設定の詳細などはそれぞれのレポジトリを参考にしてください。

ブランチのチェックアウト：actions/checkout@v1
HugoをGitHub Actionsの仮装マシンにインストール：peaceiris/actions-hugo@v2
Firebase CliをWorkflowから利用する：GitHub Action for Firebase

Firebase tokenを登録

最後にGitHub SecretsにFirebase tokenを登録します。

Firebase Tokenを取得

firebase login:ciをターミナルから実行します。

firebase login:ci

Visit this URL on any device to log in:
https://****

Waiting for authentication...

ブラウザウインドウが立ち上がるのでアカウントを選択して進みます。

✔  Success! Use this token to login on a CI server:

1//****

Example: firebase deploy --token "$FIREBASE_TOKEN"

ログインに成功するとTokenが発行されます。

GitHub SectretにTokenを登録

レポジトリのメニューからSettings > Secretsを選択し、先ほど取得したTokenをFIREBASE_TOKENとして登録します。

$git pushしてみる

GitHub Actionsの設定は以上です。

実行されたWorkflowはレポジトリのActionsタブから確認できます。

レポジトリ全体のファイル構成はこうなりました。

.
├── README.md
├── .github
│   └── workflows
│       └── main.yml
├── develop
│   └── sampleWeb #サンプルHugoプロジェクト
│       ├── archetypes
│       │   └── default.md
│       ├── config.toml
│       ├── content
│       ├── data
│       ├── layouts
│       ├── static
|       ├── themes/ananke #omit
└── firebase.json

少しでも参考になれれば嬉しいです。