個人サイトを作った

ZolaというSSGでこのサイトを作った。

リポジトリはここ

動機

最近、 Twitter Xの迷走が続いている。なんならこれを書いている間に𝕏になった。以降、気にせずTwitterと呼ぶことにしよう。

そして、Twitterの雲行きが怪しくなっていくにつれ、インターネット・ライフを送る代替手段としてFediverseや TRUTH に加えて個人サイトが話題に上がっており、それをきっかけにそろそろ個人サイトを持つ歳かもな……という気持ちになった。もちろん、投稿のコストやら交流の発生やらを考えると個人サイトはTwitterの完全な代替にはならないわけだが ¹ 、せっかくの機会なのでいっちょやっていこう。

ツール選定

私にはweb周りの技術というものが全くわからない、人一倍なにかに敏感ということもない。Reactやらなんとか.jsやら目薬のロゴみたいなやつやら、あの辺のカッチョ良さそうなフレームワークは全くわからない。webフレームワークの使用経験といえばRust製のYewというフレームワークで極めてシンプルなwebアプリを作成したことがあるだけである。

そして、この手の活動は始めの足取りが重いと完成が絶望的になる。そういうわけで、個人サイトの範疇では十分であろうから、ある程度シンプルなSSGを使うことにした。しかし、単にSSGと言ってもそれはそれでいろいろなものがあるらしい、Hugoとかは聞いたことあるな。とりあえず、コンテンツの基本をMarkdownで書けさえすれば最低限の引っ越しにはそれほど困らないだろうから、その条件だけを考えることにする。で、どうやらRust製のZolaなるものがあるらしい。Rust製ならまぁプロジェクトが爆発したりしたときにも私の方で諸々融通が聞くし、Rust製であるというだけで興味が湧いてしまったので、これに決定。

作る

テーマを選ぶ

Zolaのサイトにはテーマを紹介しているページがある。そこに載っているテーマをザッピングしながらしばらく唸った後にPaperModを使用することにした。元はHugo向けのテーマらしい。

テーマをいじる

テーマは config.toml である程度カスタマイズ出来るのだが、それでも足りないことがある。ホームに表示する投稿の件数だとか、 /content 以下のディレクトリ名をサンプルから変更したのに対応させたりだとか。あと、ページネーションの結果が複数ページになったとき、それらの間を移動する方法がなかったので、それを実装した。Zolaのドキュメントにあったサンプルコードをコピペした ² だけなのにスタイルが適用されたときは驚いたが、元のHugoのテーマとしてのPaperModも同じ要素に pagination というクラス名を割り当てていたらしい。

あと、この記事を書いている途中でCSSをいじったりした、全体的な横幅を広げたのと、ダークモードを全体的に黒寄りのダークブルー系統の色にした ³ 。

脚注を作る

Zolaが生成する脚注が無駄にスペースを取ったり本文に戻れなかったりとあまり使い心地が良くなかった。Markdownがコンパイルされて生えたHTMLを後からいじくり回して解決しようとも考えたが、HTMLをいじる方法がわからなかったので、結局ショートコードで自前の脚注を実装した。ただ、この方法には欠点がある。というのも、先程の脚注で使用するタグ名は対応関係のみを指定するもので、コンパイルすると出現した順番で勝手にナンバリングしてくれる優しさがあるが、自前実装したものは index の値がそのまま脚注名になる。つまり、脚注が出現した順にナンバリングしたい時、途中への挿入に弱い。まぁおかげで数字以外の脚注を使えるという裏仕様 ^仕様？ もあるのだが。

デプロイ

ホスティングサービスについてもWebフレームワーク同様全くわからん。とりあえず、Cloudflare Registrarでドメインを登録していたので、Cloudflare Pagesが候補に上がった、静的サイトだしな。調べた感じ特にこれで問題なさそうだったのでCloudflare Pagesに決定。

さて、デプロイ、コケた。ログはこんな感じ

(snip)

2023-07-18T19:07:02.228596Z	Success: Finished cloning repository files
2023-07-18T19:07:02.855166Z	Detected the following tools from environment: 
2023-07-18T19:07:02.855975Z	Executing user command: zola build
2023-07-18T19:07:02.865481Z	/bin/sh: 1: zola: not found
2023-07-18T19:07:02.866947Z	Failed: Error while executing user command. Exited with error code: 127
2023-07-18T19:07:02.874295Z	Failed: build command exited with code: 1
2023-07-18T19:07:03.82236Z	Failed: error occurred while running build command

ググったところ ZOLA_VERSION を設定していなくてコケている例が見つかったが、今回の場合 ZOLA_VERSION はちゃんと設定している。しばらく唸った結果ビルドシステムとしてv2を使用しているのが原因であることが分かった。Cloudflareのドキュメントを見るとv2はZolaをサポートしていないらしい。使用するビルドシステムをv1にしたらあっさり成功した。めでたい。

おわり

そんなこんなでこのサイトが完成した。SSGと格闘するのは初めてだったが、意外となんとかなった。

---