Hugo + Cloud Source Repositories + Cloud Build + Firebase Hosting

· ·

概要 🔗

既存の Hugo で運営しているウェブサイトはそのまま放置しつつ、Qwiklabsを参考にしながら CI/CD 運用に変更したい。個人で運用する弱小ウェブサイトなら無料のままある程度までは成長できるでしょうという目算。

※まさか Qwiklabs にコースがあるとは思わなくて普通にネットで調べていた…

手順 🔗

Qwiklabs のコースそのままやればサクッと作れるとは思うけど、自分が再度環境を構築する時などもあると思うので。

  1. Firebase 側からプロジェクトを生成
  2. 作成したプロジェクトを課金設定
  3. local 環境で gcloud auth、gloud config list project あたりで設定を確認
  4. Cloud Repository 作成と clone
1
2
3

cd ~
gcloud source repos create [REPOSITORY_NAME]
gcloud source repos clone [REPOSITORY_NAME]
  1. local 環境へ hugo install。Cloud Source Registries から clone した段階でディレクトリが作成されているので force 指定する
1
2

cd ~
hugo new site [REPOSITORY_NAME] --force
  1. Hugo theme 設定(参考 : hugo 公式サイト)
1

echo 'theme = "ananke"' >> config.toml
  1. firebase 設定
1
2
3

firebase login --no-localhost
firebase init
firebase deploy

ここで firebase tool を入れなくても大丈夫ですが、このステップを入れることで

  • .firebaserc
  • firebase.json

が生成されます。この 2 ファイルを置いておけば構築できます。

■ .firebaserc

1
2
3
4
5

{
  "projects": {
    "default": "[--project id--]"
  }
}

■ firebase.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
  1. Cloud Build 設定。hugo の TOP ディレクトリに cloudbuild.yaml ファイルを作成し、次のコードを保存
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

steps:
- name: 'gcr.io/cloud-builders/wget'
  args:
  - '--quiet'
  - '-O'
steps:
- name: 'gcr.io/cloud-builders/wget'
  args:
  - '--quiet'
  - '-O'
  - 'firebase'
  - 'https://firebase.tools/bin/linux/latest'

- name: 'gcr.io/cloud-builders/wget'
  args:
  - '--quiet'
  - '-O'
  - 'hugo.tar.gz'
  - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz'
  waitFor: ['-']

- name: 'ubuntu:18.04'
  args:
  - 'bash'
  - '-c'
  - |
    mv hugo.tar.gz /tmp
    tar -C /tmp -xzf /tmp/hugo.tar.gz
    mv firebase /tmp
    chmod 755 /tmp/firebase
    /tmp/hugo
    /tmp/firebase deploy --project ${_FIREBASE_PROJECT_NAME} --non-interactive --only hosting -m "Build ${BUILD_ID}"

substitutions:
  _HUGO_VERSION: 0.79.1
  1. Cloud Source Repositories へのコミット
1
2
3
4
5
6
7

echo "public" >> .gitignore
echo "resources" >> .gitignore
git config --global user.name "[GIT_NAME]"
git config --global user.email "[GIT_EMAIL]"
git add .
git commit -m "First Commit"
git push -u origin master
  1. Cloud Build API を有効化
  2. Cloud Build Trigger 設定
項目 設定
イベント ブランチに push する
ソース ^master$
ビルド構成 cloudbuild.yaml
代入変数 : _FIREBASE_PROJECT_NAME Firebase のプロジェクト名
  1. IAM 設定変更。IAM の cloudbuild.gserviceaccount.com を含むアカウントに [Firebase プロダクト] > [Firebase Hosting 管理者] を追加する。

もし cloudbuild.gserviceaccount.com を含むアカウントが存在しない場合は API で以下を許可する必要がある

  • Cloud Build
  • Cloud Source Repositories
  1. 設定完了なので、テストで cloud source repositories へ push してみる

トラブルシューティングメモ 🔗

  1. CloudBuild で HTML 生成に伴う layout エラーが発生した場合

テキストエディタの自動フォーマットが悪影響を及ぼしている可能性があります。

それでも解決できない場合は、themes ディレクトリ配下の layouts フォルダの中身を hugo の TOP ディレクトリにある layouts フォルダにコピーしてみてください。

コピーした場合は themes 内の layouts フォルダは .gitignore で指定してしまって大丈夫です。

  1. css がうまく適用されない

themes フォルダ内の static フォルダデータを hugo の TOP ディレクトリにある static フォルダへコピーし config.toml ファイルで custom css を適用するのと同様に params 指定をしてみてください。

コピーした場合は themes 内の static フォルダは .gitignore で指定してしまって大丈夫です。

1
2

[params]
customCSS = ["/css/style.css"]

参考 🔗

gcp hugo firebase
comments powered by Disqus