私が今まで書いた記事や、これから書く記事をまとめて置く場所として blog.anqou.net を立ち上げました。この blog.anqou.net を支えている技術について簡単に説明します。

#SSG: soupault

Static site generator (SSG) として soupault を採用しています。これは OCaml で実装されている SSG で、HTML タグをパーズし、Lua で好きに操作してから出力できるという特徴を持っています。この機能のおかげで、最終的に出力される HTML の a 要素の href を特定のルールで書き換えるとか、そういう操作が簡単にできます。

また、Markdown を HTML に変換する部分や、syntax highlight を当てる部分などは外部のコマンドを自由に起動して行うことができます。基本的に、標準入力から入力を受け取って標準出力から HTML を吐くようなソフトウェアと簡単に結合できるようになっています。

詳細は公式のチュートリアルや Blueprint などを参考にしてください。

#Markdown renderer: cmark-gfm

記事は全て Markdown で書いています。 Markdown を HTML に変換する部分には cmark-gfm を使っています。Pandoc を使っても良かったのですが、シンタックスハイライトの部分のかみ合わせが悪かったので諦めました。オリジナルの cmark には脚注のサポートがないので、似たような cmark-gfm を使っています。実のところ cmark-gfm にも完全には満足していないので、そのうち omd とかを使っていい感じにしたいなと思っています。

#CSS: sakura

メインのスタイルシートとして sakura を使っています。 soupault のチュートリアルで使用されていて知りました。“A minimal classless css framework/theme” をうたっていて、class を指定しなくてもいい感じにあたってくれます。 class を指定しなくてよいので、変えるのも楽そうです。sakura の他にも classless な css は色々あるようなので、気が変わったら他のものに変えようかなと思っています。

#数式: KaTeX

HTML を生成する際に katex コマンドを呼び出して数式も HTML に変換します。これは soupault 公式にも説明があります。普通に KaTeX をブラウザで動かすよりも動的に動く部分を少なくできるので良い感じです。

#シンタックスハイライト: tree-sitter

highlight コマンドを使っても良かったのですが tree-sitter のほうが正確にハイライトしてくれる気がするのでこちらを使いました。tree-sitter highlight コマンドを使うと ANSI escape sequences を使ってコードハイライトをしてくれるので、これを aha を使って HTML に変換しています。この方法はこちらのサイトを参考にしました。

tree-sitter highlight は微妙に使い勝手が悪いのですが、適当にシェルスクリプトをかませたり Dockerfile で環境を整えたりして、よしなにしました。

#デプロイ: GHA + Cloudflare Pages

デプロイは GitHub Actions で自動化しています。GitHub に push するといい感じに CI が走って Cloudflare Pages にデプロイされます。tree-sitter などの環境を整備するのが大変なので、 Dockerfile で一発で環境を立ち上げられるようにしておいて、これを CI でも使っています。

#その他

inotifywait を使ったシェルスクリプトを書いて、Markdown を書き換えると勝手に HTML ファイルが生成されるようにしています。その結果、横にブラウザを開いておいて更新すると、書き換えた部分が反映されます。本当はブラウザの更新も自動でやってほしいですが、これは WebSocket の通信を仕込んだりする必要があって面倒なので、今は諦めています。

#まとめ

最低限動くものをと思って環境構築していたのですが、意外と大掛かりになりました。まぁでも当分はこれでなんとかなるでしょう。

この記事は [LSSC1] METAL GEAR SOLID V:THE PHANTOM PAIN をみながら書きました。