Hugo で作った静的サイトをサーバレス公開 #

このページの意義 #

主目的は自分用の備忘録です。あちこちに参考サイトはたくさんあるけど、自分用にまとめておきたかったので。^{1 2}

このサイトのシステム構成概要 #

• サーバの面倒見るの疲れたので、静的サイトを安価にサーバレスで
• 記事は markdown で記述
• Git で記事管理して、commit → push したら公開されるようにする

の 3 点を満たすサイトを

Hugo + Google Cloud Source Repositories + Cloud Build + Firebase Hosting

で構築してます。誰か一人くらいの役に立つかもしれないので、公開サイトとして。

Google 縛りでやってる理由は

• AWS や GitHub は詳しい人が職場にたくさんいて、教えてもらったら一瞬で終わるから
• Azure は触りたくない
• Jamstack とか SSG とかに特化したサービスに囲いこまれたくない

くらいで、強い思い入れがあるわけではないです。

graph TB me((ワシ)) -.- |プレビュー| Hugo subgraph A[ローカル] me --"commit"--> gl["Git (local)"] gl --"pre-commit
(最終更新日挿入)
(HTML 生成)"--> Hugo Hugo --"add
(生成された公開用ファイル)"--> gl end subgraph B[リモート] me --push--> gr["Git (remote)"] gr --更新トリガ--> cb[Cloud Build] cb --deploy--> fh[Firebase Hosting] end

構築手順 #

以下、どんな手順でやってもまぁ大丈夫だけど、自分がやった手順をそのまま記載
Gmail アカウント 1 個あれば大丈夫ですが、クレジットカード登録は必要です。

最初に必要なものいれとく #

普段使いの MacBook にいれておくもの。。。なんだけど、Hugo 以外は元々いれてたし、他にもなんか必要かもなんで、それぞれ本家のドキュメント見てくださいな

firebase #

https://firebase.google.com/docs/cli

$ brew install npm
$ npm i -g npx
$ npm i -g firebase-tools
$ firebase login

Google Cloud SDK #

https://cloud.google.com/sdk/docs/downloads-interactive

$ curl https://sdk.cloud.google.com | bash
$ gcloud init
$ gcloud config list

Hugo #

https://gohugo.io/getting-started/installing/

$ brew install hugo
$ hugo version
hugo v0.86.0+extended darwin/amd64 BuildDate=unknown

push したら deploy な仕組み #

1. GCP のプロジェクト作成 #

<WEB コンソールで操作>
プロジェクト作る。ドットやアンスコ使えないので d3-haro-jp にする。以降、全部このプロジェクトで操作する

2. Google Cloud Source Repositories #

サイトのコンテンツをいれておくリポジトリを用意する

<WEB コンソールで操作>
Google Cloud Platform に用意された Git。リポジトリ名はドットも使えるので d3.haro.jp にする

<Terminal で操作>
自分の端末に clone

git clone ssh://<yourname>@gmail.com@source.developers.google.com:2022/p/d3-haro-jp/r/d3.haro.jp

3. Firebase Hosting #

<Terminal で操作>
公開する Firebase Hosting 用意する。公開用ディレクトリは public のままでよい³

$ cd /path/to/d3.haro.jp
$ firebase init

$ ls -1AF
.firebaserc
.gitignore
firebase.json
public/

$ ls -1F public/
404.html
index.html

試しにデプロイしてみる
https://d3-haro-jp.web.app

$ firebase deploy

<WEB コンソールで操作>

1. Firebase Hosting の画面で「カスタムドメインを追加」
2. 20〜30分で SSL サーバ証明書も準備される
   • コモンネームが一致しない？　謎

4. Cloud Build #

Firebase Hosting へのデプロイを自動化するために、Cloud Build から Firegbase にデプロイするよう設定する。本家入門ガイド の通りにやっておけば OK

<WEB コンソールで操作>

1. API 有効にする
2. IAM で @cloudbuild.gserviceaccount.com に下記ロール付与
   • Cloud Build Service Account (ついてるはず)
   • Firebase Admin
   • API Keys Admin

<Terminal で操作>
プロジェクトを選択し、Cloud Build から firebase コマンドを呼び出すためのイメージをビルドする

$ gcloud config list
$ gcloud config set project d3-haro-jp

$ git clone https://github.com/GoogleCloudPlatform/cloud-builders-community.git
$ cd cloud-builders-community/firebase
$ gcloud builds submit .
$ cd ../..
$ rm -rf cloud-builders-community/

Firebase にデプロイするためのビルド構成ファイルを作成する

$ vim cloudbuild.yaml
steps:
- name: gcr.io/d3-haro-jp/firebase
  args: ['deploy', '--project=d3-haro-jp', '--only=hosting']

$ gcloud builds submit --config cloudbuild.yaml .

$ ls -1AF
.firebaserc
cloudbuild.yaml
firebase.json
public/

<WEB コンソールで操作>
Google Cloud Console の Cloud Buildの「トリガー」で新規トリガーとして「リポジトリ d3.haro.jp のブランチ ^master$ に push」イベントトリガを作成する

これで、public/ 以下のファイルを更新して push したらサイトが更新されるようになった

Hugo でサイト作成 #

1. サイト作成 #

すでにディレクトリがあるとエラーになるので、force でいれてしまう

$ cd /path/to/d3.haro.p/
$ hugo new site . --force

$ ls -1AF
.firebase/
.firebaserc
.git/
.gitignore
archetypes/
cloudbuild.yaml
config.toml
content/
data/
firebase.json
layouts/
public/
static/
themes/

2. テーマ導入 #

テーマは git のサブモジュールとして追加

$ git submodule add https://github.com/alex-shpak/hugo-book themes/book
$ echo 'theme = ["book"]' >> config.toml

git submodule について

テーマ変更などでサブモジュール削除する時は

$ git submodule deinit -f themes/book
$ git rm -f themes/book
$ rm -rf .git/modules/themes/book

サブモジュールがあるリポジトリを clone する時は

$ git clone --recurse-submodules --depth 1 https://gitlab.com/user/test.git

やり忘れたら、後で

$ git submodule status
$ git submodule update --init --recursive

3. .gitignore に追記 #

$ vim .gitignore
#os
.DS_Store
Thumbs.db

#emacs
*~
\#*\#
\.\#*

#vim
[._]*.s[a-w][a-z]
[._]s[a-w][a-z]

4. 記事作成 #

記事ファイルは content/ 以下に作成。単に .md ファイル設置だけでもいいけど、hugo コマンド使うと、Front matter (tags とか date とか draft とか Hugo で使う色んな属性) あらかじめ書き込んだファイル生成してくれる。あとは好きなエディタでゴリゴリ書く

$ hugo new content/docs/my-first-post.md
$ cat content/docs/my-first-post.md

---
title: "My First Post"
date: 2021-08-10T23:13:50+09:00
lastmod: 2021-08-13T15:19:35+09:00
tags: []
archives: ["2021/08"]
description:
draft: true
---

hugo でサーバ起動して、ローカルでプレビュー可能。プレビューは .html 生成する前で OK。-D つけると、draft: true のファイルも含まれる。http://localhost:1313/ で参照可能

$ hugo server -D

静的ファイル生成。ファイルは public/ 以下に生成される。元の .md ファイル削除したら .html も削除して欲しいので、オプションつける

$ hugo --cleanDestinationDir

後は git push すれば、1〜2分で勝手に deploy される