新しいブログシステムを作成して、Blogger から移行した。今は静的ファイルとして静的ファイルサーバから配信している。GitHub でソースコードを公開した。comame/blog.comame.xyz
モチベーション
- 自分が制御可能な形でデータを置きたかった
- 自分の慣れているエディタで HTML を書きたかった
- Blogger は読み込み速度が少し遅かった
仕組み
記事の管理
archives/ 配下にすべての記事データを置いている。タイトルやタグ、日付などのメタデータは archives/entries.json に記載する。
ページの生成
JavaScript で archives/entries.json を読み、記事データを展開している。これらは assets/js/app.js で処理している。History API を使って動的に URL を書き換えているため、Apache や Nginx で URL のリライトが必要。
静的ビルド
ユーザーが閲覧する環境で毎回スクリプトでページを生成するのは筋が悪いため、手元で静的ファイルとしてビルドを行う。ページは JavaScript を使って生成するため、Puppeteer でクロールしてスクリプト実行後の HTML を静的ファイルとして保存している。画像ファイルなどのアセットは、/assets に置いておけば /build/assets にそのままコピーされる。ビルド用のスクリプトは build.js である。
今後の運用
VSCode で記事を書き、手元でビルドし、GitHub にアップする。あとはビルド済みの静的ファイルを適当に配信すればよい。今回は GitHub Pages で公開することにした。自分の開発環境で記事をかけるため、かなり書きやすくなった。一方で、ビルドをするためだけにローカルサーバを立てなければいけないのは結構面倒くさい。
[追記] Git の post-commit フックを使って、自動的にビルドを走らせるようにしてみた。本当は GitHub Actions を使いたかったが、ビルド用のサーバを立てて、Puppeteer を起動して...とするのは厄介そうだったので妥協策ではある。post-commit フックは post-commit に置いておく。
[追記] GitHub Actions で push したときにビルドが走るようにした。
今後やりたいこと
- Markdown で記事を書けるようにする
- WebP などの画像フォーマットに自動的に変換できるようにする
- OGP に対応
- [DONE] RSS フィードを生成できるようにする
