Astro でブログを作り直した

軽量さと表示速度に定評のある静的サイトジェネレーターである Astro を選び、ブログを作り直した。 ホスティング先も firebase から Cloudflare Pages に変更した。

なぜ Astro を採用したのか

表示速度を追求しつつ、ブログで表現できる幅を広げたかったため。

元は SPA 開発の練習や手慣らしを兼ねて React と MUI を使って作成した。 これは練習としては良かったものの、ブログとしては分不相応にbundleのサイズが肥大化してレスポンス速度が気になり始めた。 また別のプライベートなプロジェクトで PWA を開発することになり、SPA 開発の手慣らしはそちらで行うことにした。

作り直す前の Lighthouse ツリーマップ

まず作り直す前の treemap を確認する。

1.2 MB もダウンロードしなくてはいけない。 一目瞭然で $\KaTeX$, react-dom, MUI などのライブラリが重い。react-dom や MUI は今回の作り直しで消える。

$\KaTeX$ は ”A Random Walk Proof of Kirchhoff’s Matrix Tree Theorem” の記事でしか利用していないため、$\KaTeX$ を利用しているページだけ CSS などをロードするよう実装する。

Astro で作り直した後の Lighthouse ツリーマップ

作り直した後の treemap は以下のようになった。もはや何もない。19.46 KB となりました。

$\KaTeX$ を使っている記事のページをロードすると以下のようになります。161.58 KB。これも大幅に軽量になりました。

MDX (Markdown + JSX)

MDX を使ってみた。Markdown に JSX を埋め込める。これは面白い。試しに旅行写真を表示するコンポーネントを React でで作成して MDX の中に埋め込んでみました。

• バルセロナの写真
• 沖縄の写真

リンクの Open Graph メタデータをカード形式に展開する

ブログから外部へのリンクを貼る際に OG 画像を使いカード表示するためにはひと工夫必要であった。コンポーネントを表示するために用いるタイトルやOG画像を取得してJSONファイルとしてキャッシュするコードを用意した。

Github の場合は以下のように表示する。

arxiv の場合は以下のように表示する。

Cloudflare Pages

導入が非常に楽であった。Github 連携して使っているフレームワークやビルドコマンド、ビルド先のディレクトリを指定するだけで完了する。すべて GUI で数回クリックするだけで完了。これで Github の main に push されたタイミングでデプロイされる。PR を作成すると preview をデプロイして bot が Github で URL を通知してくれる。

---