blog.comame.xyz

ブログシステムを新しくした (Blogger からの移行)

新しいブログシステムを作成して、Blogger から移行した。今は静的ファイルとして静的ファイルサーバから配信している。GitHub でソースコードを公開した。comame/blog.comame.xyz

モチベーション

仕組み

記事の管理

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 したときにビルドが走るようにした。

今後やりたいこと

共有 Twitter で共有 Facebook で共有 URL をコピー