この記事は公開されてから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
少しでも参考になれれば嬉しいです。