Hugo を Cloud Shell 上に導入 #
「Hugo で作った静的サイトをサーバレス公開 」で構築した環境を、Cloud Shell 上に作ってみる
目的 #
ウェブブラウザだけあれば Hugo で作ったサイトを更新可能な環境
Google Cloud Shell って？ #
ウェブブラウザ上で使う、オンライン開発・運用環境？ かな。Google アカウントでログインして、Chrome 上で対話型シェルを使える環境です。Cloud Shell 上でテスト用ウェブサーバ起動して、それにアクセスするのも OK（hugo server で起動した環境にアクセスできる！）
構築手順 #
- 基本は macOS 上に構築する時と同じ
- linuxbrew という便利なものがあるので、それを使えば macOS とほぼ同じ
- Cloud Shell は $HOME 以外は時間がたつと消えるので、linuxbrew も $HOME 以下に導入
- Google さんの環境なんで、firebase とか gcloud とかは入ってる
- 入ってるし、macOS 上で作った cloudbuild.yaml とかがそのまま使えるので、特に何もすることなし
1. Cloud Shell #
-
GCP のコンソール にアクセスし、プロジェクト選択後、右上の こんなアイコンで、Cloud Shell をアクティブにする
-
Cloud Source Repositories にアクセスするために、ssh 鍵作って登録しておく
-
TimeZone を JST (+0900) にしたいので、.bashrc に追記
export LANG=ja_JP.UTF-8
export TZ="Asia/Tokyo"
2. Linuxbrew #
正しくは「Homebrew on Linux
」なのかな？
macOS と手が揃って嬉しい。
Cloud Shell は永続的なのが $HOME だけなので、全部 $HOME 以下で準備する
オフィシャルの「Alternative Installation
」に書かれていることやるだけ
$ git clone https://github.com/Homebrew/brew ~/.linuxbrew/Homebrew
$ mkdir ~/.linuxbrew/bin
$ ln -s ~/.linuxbrew/Homebrew/bin/brew ~/.linuxbrew/bin/
$ eval $(~/.linuxbrew/bin/brew shellenv)
$ echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
3. Hugo #
Linuxbrew でインストール。ちゃんと $HOME 以下に入ります。Hugo の設定とかは、Git からとってくるので何もしない
$ brew install hugo
-- snip --
$ which hugo
/home/higemaru/.linuxbrew/bin/hugo
4. Git clone #
運用中のプロジェクトのリポジトリを clone する。テーマをサブモジュールとして追加してるので、こんな感じ
$ git clone --recurse-submodules --depth 1 ssh://<yourname>@gmail.com@source.developers.google.com:2022/p/<Project Name>/r/<Repository>
5. プレビュー #
あとは macOS でやってるのと全く同じなんで、vim なり Cloud Shell エディタなりで記事作るだけなんだけど、プレビューだけちょっと説明
Cloud Shell のこのアイコンクリックで、port 指定でプレビューできる1んだけど、指定できる port の範囲が 2000～65000。
hugo のデフォの 1313 は範囲外なんで、hugo の側を Cloud Shell のデフォの 8080 に合わせる
$ hugo server -D --port 8080
前述のアイコンクリックすると https://8080-xxxxxxxxx.cloudshell.dev/ という URL がウェブブラウザの別タブで開く
完成 #
はい。ウェブブラウザ上で完結するようになりました
- これで WordPress とかと同じじゃね？（暴言）
- macOS の Safari だとつながってもキー入力できなかった。Chrome だとさすがにちゃんと動く
- iOS は Safari も使えたけど、画面サイズ的に無理。Cloud Console アプリならなんとかなる。iPad だとそれなりに使えそう