GitHub Codespacesから記事を投稿するテスト

このブログの執筆環境を試行錯誤するシリーズ。
これまでは

• ローカルマシンでgit管理したmarkdownファイルをvimで編集してPushする
• Netlify CMSを導入してブラウザでmarkdownファイルを編集してPublishする

を試した。
今回はGitHub Codespacesを使ってブラウザからmarkdownファイルを編集しGUIでPushを行う方法を試す。

やること

Codespacesの有効化

このブログ記事を管理しているGitHubリポジトリでCodespacesを有効にする。
具体的には「Code」タブの「Code」ボタンからCodespacesを有効にする。

これだけで以下のようにVSCodeがブラウザで開く。

CodespacesではデフォルトでHugoがインストール済みなので気軽に使い始められる。
バージョンなどが自分の欲しいものと合っているかは要確認。

$ hugo version
hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d linux/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio

また、テーマをgit submoduleで使用している場合はsubmoduleをPullしておく。

$ git submodule update --init

これで環境自体は作れた。
早い。凄い。

デフォルトの記事ディレクトリ構成を変える

これまで記事はすべてHugoのルートディレクトリ直下のcontentディレクトリ内にmarkdownファイルが作成されていた。
マークダウンファイルは{ファイル作成日時}-{記事タイトル}.mdの形式で命名されている。

Netlify CMSも（少なくともデフォルトでは）この形式だったが、これだと記事ファイル以外の扱いが面倒。
例えば画像ファイルはstatic/img/xxx.pngのような形式で格納するのだが、この形式だと当然ファイル名の重複がNGになる。
じゃあstatic/img/{サブディレクトリ名}/xxx.pngの形式にすればよいかというと、今度はサブディレクトリ名をどうするか問題が出てくる。
記事ファイルと同名（＝記事タイトル）にするとディレクトリ名が冗長になって記事ファイルから参照するのがとても面倒。

![記事で使う画像](/img/20230119230534-GitHub\ Codespacesから記事を投稿するテスト/xxx.png)

少なくとも補完が聞かない限り使いたくない。
ついでに記事生成時に同名ディレクトリを作ってくれないと困るのでカスタマイズが必要そうでダルい。

要は記事と記事で使っている画像は同一ディレクトリに入っていてほしいし、記事から画像ファイルを参照するときは相対パスで指定したい。
ので、そういった構成になるようarchetypesディレクトリ内にファイルを作成する。

$ tree archetypes
archetypes
├── default.md
└── post          # 作る
    ├── images    # 作る
    │   └── .keep # 作る
    └── index.md  # 作る。default.mdのコピーでいい。

こうしておくと以下のようにpost/配下に記事を作成するコマンドを実行したときにpost/{記事タイトル}/index.mdファイルとpost/{記事タイトル}/images/ディレクトリを作成してくれる。

$ hugo new post/sample
Content dir "/workspaces/hugo-blog/content/post/sample" created
$ tree content/post/sample/
content/post/sample/
├── images
└── index.md

1 directory, 1 file

上記はHugoの機能（参考）。

この状態ならimagesディレクトリ内に画像ファイルを配置し、参照は以下のようにできる。

![記事で使う画像](./images/xxx.png)

Hugoで使えるFigure Shortcodeも相対パスに対応しているので使える。

{{< figure src="./images/xxx.png" >}}

記事ディレクトリを生成する

VSCodeのターミナルで記事を作成するhugoコマンドを実行する。
記事名ディレクトリに日時を含みたいので、今の所以下のようなコマンドを叩いている。

$ hugo new "post/`TZ=Asia/Tokyo date +%Y%m%d%H%M%S`-GitHub Codespacesから記事を投稿するテスト"

ダブルクォートで囲んでいるのはスペースを引数の区切りと認識させないため。

このコマンドで記事ディレクトリを生成すると記事のタイトルにも日時が入ってしまうので、生成されたindex.mdを編集する。
色々めんどくさいのでこの辺は適当なシェルスクリプトにしてしまったほうが良いかもしれない。
オレオレVSCode拡張とかにしてボタンを割り当てたらもっと幸せ…なのかもだけど道のりは遠そう。

記事を書く

VSCodeをマークダウンエディタとして利用して記事を書く。
デフォルトでオートセーブに対応している。

多分Hugoを使いやすくする拡張機能があるようなので、今後導入してみる。

便利機能

GitHub Codespacesはコンテナ環境でポート転送に対応している。
何を言っているかというと、hugo serverコマンドで立ち上げたサーバーにブラウザアクセスして、作成中の記事のプレビューが見れる。

ただしサーバーのbaseurlがGitHubから払い出されるものになるのでそれを指定して起動する。

$ hugo server --baseURL https://$CODESPACE_NAME-1313.githubpreview.dev

そうするとVSCodeのターミナルの隣の「ポート」タブにポート転送で利用できるURLが「ローカルアドレス」として出てくるので、これを⌘+左クリックで開くと開発サーバー画面にアクセスできる。

締め

GitHub Codespacesを使った記事投稿をやってみる。
使い勝手は悪くないので無料の範囲内でどこまでやれるかとワークフローの省力化（ボタン一発で記事生成とか）がどこまで進められるかかガギっぽい。