zennからの移行先として、個人用の技術ブログ unagi を作りました。今回はその初記事です。

リポジトリ: SouichiroTsujimoto/unagi

これを作るにあたって、まずフルスタックGoテンプレートunigoを作りました。ワンバイナリで完結するWebアプリを開発するためのテンプレートです。

動機

Goで書いたwebサーバをNanosでユニカーネル化してみたいと思い、goのワンバイナリwebサーバテンプレートを作り始めました。途中からTemplやis-land,preact,daisyUIなんかも足し始めて、緩いモジュラーモノリス的なフルスタックテンプレートになったのが、unigo-templateです。

そんなunigoを使って作ってみたのがこのブログです。

記事一件だと寂しいので、zennにあげていた記事をいくつか持ってきました。今後はもっと書いていきます。

名前

最初は素直にblog.wuhu1s.landにしようと思っていましたが、ブログの枠にとらわれず今後も拡張していくだろうと思い、テンプレートのunigo(うに)にちなんでunagi(うなぎ)にしました。

開発

構成

ユーザ体験・開発体験・コストの三軸で選びました。

• Go / Echo / templ: ルーティングとHTML
• is-land + Preact/htm: Islands Architecture
• Tailwind CSS + daisyUI: 見た目
• Supabase: Postgres / Auth(X OAuth) / Storage
• Vercel Go Runtime: ドメイン、TLS終端、CDNキャッシュ

supabaseとvercelを使うことでインフラ代はタダ。いわば無料枠駆動開発です。

学生の趣味開発では、無料枠が利用できることが優先されて、どうしてもNext.js/Honoなどを使ったVercel/Cloudflareホスティングが選ばれがちだと思いますが、Goでも十分無料インフラに乗っかれるぜ、ということを示せたんじゃないでしょうか。

(当たり前ですが、TSスタックより優れているとは主張しません、一通り作ってみて、Cloudflareは趣味開発者が欲しいものを全て揃えててすげえと改めて実感しました。)

紆余曲折

最初はユニカーネルにしてgceで動かしてみたのですが、Always Freeの条件ではusリージョンしか選択できず、レイテンシが大きかったので実用するのは辞めました。

冷静になって考えると、auth、DB、オブジェクトストレージ、certまで全部担って真のワンバイナリにする必要はないか、と思い直してsupabaseを使用する構成に変更しました。デプロイ先もVercelへ移しました。

Islands Architecture

内容が静的な記事中心なので、Astroを参考にIslands Architectureを取り入れました。11tyのis-landを使って、island内部はpreactで書いています。

ランタイムにもビルドにもNode.jsは挟ませねえぜという謎の意志があったので、islandの依存(is-land、Preact、htm、preact-custom-element)はunpkgから取ったESMをそのままstatic/vendor/へ置いてgo:embedしています。パッケージ名の解決はimportmapに書いているので、bundlerも不使用です。

CSSもTailwindのStandalone CLIなので、ここでもNodeは使いません。

開発時のTUI

これはunagiというよりunigoの工夫ですが、just runでlocalhostを立ち上がる時にリッチなTUIが立ち上がるようになってます。

ファイル更新を監視してリビルドを走らせるair(https://github.com/air-verse/air)を用いてホットリロードを実現しています。

airの情報で気になるのは直近のビルド成否だけなので、TUIではairのログとサーバのログが分離して表示されるようになっています。(airの部分はビルド度にリフレッシュ)

ターミナルのサイズが小さかったらペイン切り替え表示に変わったり、起動時にTUI、ロゴのON/OFFを切り替えたりできるようになってます。

charm(https://charm.land/)系スタックを使っています。

記事用リポジトリ

記事(Markdown)と画像は別リポジトリ(unagi-content)で管理しています。

最初は簡易的なエディタを管理画面に載せていましたが、エディタで編集・git(or jj)で管理が一番だなと思い、編集機能は外しました。ミニマルでいい感じです。

github actionsで、全ての記事を署名付きでunagi側のエンドポイントに投げます。画像はsupabase storageに直接PUTです。

デザイン

Braille

このサムネのような、Nvimのスタート画面にascii art(braille art?)を表示している画像を見て、かっこいいなと思って真似しました。

UIデザインはadhd skillで練りました。(i-have-adhd skillとは別物、むしろ真逆の方向性のものです。)

記事ごとのパターンは、slugをhashしたseedから決定的に生成しています。

ステッカー

工夫のひとつとして、記事へのリアクション用にステッカーボードを用意しました。コメント欄と一緒に、記事の終わりに配置されます。

絵文字のステッカーは誰でも貼れるようになっていて、Xでログインするとアカウントのアイコンも貼れるようになります。

おわりに

ぜひステッカー貼ってみて下さい。面白いと思ったら共有もお願いします。