先日、 GitHub Codespces の Beta 版が公開されましたので、静的サイトジェネレータである Hugo を使った開発方法をご紹介します。
(Beta 版は特に料金を請求される様子もないので今のところ無料でしょうか・・・)
Beta 版に登録する
こちらのリンクから Beta 版に登録します。
しばらくすると (30 分前後) 登録されたことを示すメールが届きます。
そうしたら Beta 版が使えるようになります。
Codespaces を作成する
Hugo で開発しているリポジトリの画面を開きます。
「Code」をクリックして「Codespaces」タブに切り替えます。
Create codespaces on {branch name} をクリックして環境します。
Connecting... などのメッセージの後に、ブラウザ上にエディタが表示されたら環境は完成しています。
ボタンを押してから環境が出来上がるまで実に 10 数秒・・・！
なお、この先は、ブラウザ上のエディタで作業することを想定しています。
ローカルの VSCode で作業する場合は、適宜コメントを付けます。
hugo をインストールする
hugo を動かすためにはもちろん hugo が必要なのですが、エディタ内のターミナルで試しに hugo version と入力すると
@noritakaIzumi ➜ /workspaces/SL-note (master) $ hugo version
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb+extended linux/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio
すでに hugo 入っているんですね。
でも記事執筆時点では v0.100.2 が最新のようです。
最新版を入れるには こちら からリンクを取得してダウンロードします。
Codespaces の OS が Ubuntu (debian) の x86_64 なので hugo_0.100.2_Linux-64bit.deb をダウンロードします。
wget https://github.com/gohugoio/hugo/releases/download/v0.100.2/hugo_0.100.2_Linux-64bit.deb
# or SASS を使っている場合等
# wget https://github.com/gohugoio/hugo/releases/download/v0.100.2/hugo_extended_0.100.2_Linux-64bit.deb
sudo dpkg -Ei hugo_0.100.2_Linux-64bit.deb
sudo もパスワード不要です。
hugo のバージョンが最新になっていることを確認します。
@noritakaIzumi ➜ /workspaces/SL-note (master ✗) $ hugo version
hugo v0.100.2-d25cb2943fd94ecf781412aeff9682d5dc62e284 linux/amd64 BuildDate=2022-06-08T10:25:57Z VendorInfo=gohugoio
git submodule のインストール
hugo ではテーマファイルを submodule で読み込む場合があると思いますが、 codespaces 上に用意された環境には submodule が読み込まれていません。
以下のコマンドで読み込みます。
git submodule update --init
サーバーを起動する
ブラウザ上では特定の URL が割り振られること、ライブリロードがうまく動作しないというのがありますので、以下のコマンドで起動します。
hugo server --baseURL https://$CODESPACE_NAME-1313.githubpreview.dev --appendPort=false --disableLiveReload
ローカルの VSCode で起動する場合は以下のコマンドで動きました。
hugo server
こんなエラーが表示される場合は、 hugo の拡張版をインストールし直してみてください。
Error: Error building site: TOCSS: failed to transform "scss/app.scss" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
ブラウザで確認する
エディタのターミナルのところで PORTS タブを開き、 Local Address に記載されているリンクを Ctrl を押しながらクリックすると、リンクが開きます。
ページが正常に表示され、動作確認ができました。
ローカルの VSCode で作業している場合も基本的には同様ですが、ライブリロードが動作するように 127.0.0.1 ではなく localhost という名前でアクセスする必要がありそうです。
ソースの変更を反映する
ライブリロードに支障はあるものの、コードを修正するとビルドが走りますので、プレビューしているページをリロードすれば変更が反映されます。
そのままコミットやプッシュをすることもできます。
この先やりたいこと
今回ご紹介した方法では、コマンドが手作業になっているため、できれば環境を立ち上げた際に hugo のインストールや submodule の反映を自動でできるようにしたいと思いました。
私が思う GitHub Codespaces のいいところ
私なりにまとめる GitHub Codespaces の良さがこちらです。
- 環境立ち上げまでのスピードが非常に速い
- 誰でも同じ環境をすぐに構築できるので、環境差異によるバグ等に悩まされることがなくなる
- 新規メンバーがプロジェクトに参入するまでの時間を大幅に短縮できる
- PC のメモリを圧迫しないので、その分情報収集を快適に行うことができるし、講演会などの配信を聴きながら作業する文化も今まで以上に浸透する？
- VSCode の LiveShare との併用でペアプログラミングがはかどる
みなさんもぜひ GitHub Codespaces を使ってみてください。