Hugo を Cloud Shell 上に導入

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 エディタなりで記事作るだけなんだけど、プレビューだけちょっと説明

hugo_on_cloud_shell_00

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 だとそれなりに使えそう

  1. 詳細はオフィシャル 参照 ↩︎

See Also

Copyright © 髭。/ Hugo + hugo-book