このサイトを構成する技術スタック¶

このページでは、このWebサイトを運用するにあたって利用している技術に関してあれこれ纏めている。

基盤系¶

デプロイ先として利用している。無料プラン。

少し前にFQNDを https://www.attakei.net/ とwwwありに変更したのと、今のところは同一FQDNで動的処理をさせる気がないため、シンプルな使い方で十分だったりする。

一応、ログ取りに使ってる。

ソースコード管理にリポジトリを使いつつ、ワークフローの管理実行にも利用している。

他のCI/CDプロセスと統合管理するために、デプロイもCloudflare側ではなくGitHub Actions側で実行している。

Python製のドキュメントビルダー。素直にHTMLビルドを実行している。

基本的に静的サイトとしてとしか運用していないため、このFQDN配下で出力されるコンテンツはSphinxの技術で実現できる。プラグインを用いた機能拡張がかなり自由で、多くの機能を自作を含めたSphinx拡張で追加している。

Sphinx拡張の一つで、ブログ機能を追加する。 Blog 配下のページでは、記事以外にもカテゴリやタグごとの記事一覧が表示されているが、それはこの拡張が提供する機能である。

いわゆる、「CSSフレームワーク」の一つ。同時期で同目的に製作されたものの中では、JavaScriptを必須としないのが特徴。

Sphinxは基本的に静的サイトの生成が前提になるため、CSSフレームワークとの相性が比較的良い。過去にBulmaを利用したHTMLテーマがあったのだが、メンテナンスがされていない等の理由でテーマごと自作している。

Webフロントエンドのライブラリ。

SPA向けのインタラクティブ処理を実現するためのツールなのだが、Ajax的な機能はほとんど使っていない。使っているのは、 hx-boost と preload を組み合わせたページの早期ロードで、通常のSphinx製サイト比較すると体感のレスポンス速度が若干速いはず。

SVGファイルをPNGに変換するツール。

もともとは、ブログをはじめとしたページ単位のOGP画像を生成するために用意したのだが、現在は調整不足で汎用OGP画像の生成だけにとどめている。

ビルド時の作業コストが発生するが、PNGをバイナリ管理せずに済んでいる。

reStructuredTextのLanguage Server。単純なreSTの文法補助が効くだけではなく、Sphinx環境に対応したロールやディレクティブをきちんと候補に出してくれる。

一昔前と比べるとこのあたりの環境が整備されたため、軽量マークアップ言語として格段に使いやすくなった印象がある。

JavaScript製の、自然言語系のテキスト校正ツール。 Markdownがメインターゲットだが、プラグイン機構を備えており、reStructuredTextにも検査が可能となっている。

reSTの校正のためにはJS側とPython側に追加の拡張が必要で、有志の手によってプラグインが公開されている。両サイドともPublic Archiveになっていたので、フォークしたうえで追加改修したものを利用している。