Deno + Astro + Cloudflare Pageでブログをリニューアルしました

前環境からのアップデート

以前は以下に示す環境で静的ブログを構築していました。AstroはStatic Site Generationに使っている感じです。

• NodeJS↗
• AstroJS↗
• Netlify↗: 無料枠利用

今回、Astroのメジャーバージョンアップデートに合わせて、以前から気になっていた環境を試してみることにしました。

それが Deno と Cloudflare Pages で、Denoはnpm対応が進んでいるのと公式にもAstro対応が行われており、Cloudflare PagesはCDNが効いていて非常に高速と聞いたことがあったので今回のトライアルに選んだ感じです。 また、このドメインはCloudflareで管理していることもあり、一緒にCloudflareで管理できた方が楽かと考えたのもあります。

今回の環境は以下となります。

• Deno↗: 2.6.4
• AstroJS↗: 5.16
• Cloudflare Pages↗: 無料枠利用

リニューアルに際してのメモ

Deno

今回NodeJS→Denoに変更しましたが、細々とした設定ファイルがなくなったのが非常に楽だと感じました。

一方で、ホスティングサービスによってはDenoに対応していないことも多く、その点は今後の発展に期待でしょうか。

Astro

今回、ブログのサムネイルをasset以下に配置してImageタグから読み込む形式に変えています。これで表示サイズに応じたWebp変換と最適化を行ってくれるようです。

一方で現在300件超の記事がある状況なので、ビルド時間が遅くなるかと危惧していましたが思ったほどは遅くならなかったです。Cloudflare Pages上では3分程度でビルドが完了しているようで、あまり気にしなくてよさそうでした。

Cloudflare Pages

Pagesの設定がわかりにくい点だけ注意です。静的サイトであればWorkersは必要なく、Pagesだけでどうにかなります。具体的には以下の手順で行います。

1. アカウントホーム→コンピューティングとAI→Workers&Pagesを選択
2. 右上の「追加」からPagesを選択
3. 既存のGitリポジトリをインポートする

Cloudflare Pagesのビルド設定はLumeのドキュメント↗を参考にして記述しました。

• フレームワークプリセット: 「なし」
• ビルドコマンドは以下

curl -fsSL https://deno.land/install.sh | sh && /opt/buildhome/.deno/bin/deno task build

• ビルド出力ディレクトリ: /dist
• ビルド システムのバージョン: 3(最新)

CloudflareのビルドイメージにはDenoが含まれていないため、ビルドコマンドではDenoのインストールとDenoによるビルドを実行している形になります。

インストール含めて3分程度で終わるのでこのブログの更新頻度では十分かと思います。

なお、本ブログは370記事程度の時点で、ビルドで生成されるアセット数は4000程度ありました。

Cloudflare Pagesのファイル数が20000らしいので、記事数が多い人はこれを超える可能性があることには注意です。Imageタグによる画像最適化を多用する場合はファイル数も嵩んでいくかもしれないので注意した方がよさそうです。

Netlify → Cloudflare Pagesへの移行

Cloudflare Pagesからカスタムドメインを割り当てる際に、Cloudflareでドメインを管理していればお任せでドメイン設定が追加されました。

ただ、Netlify向けのレコードは消えていなかったので、このレコードは別途削除する必要がありました。

感想

思った以上にあっさりと移行ができてよかったです。

Cloudflare Pagesに変えて心なしか表示速度も上がったようで、満足しています。

これでドメイン管理とまとめてサイトの管理も行えるので楽になりました。

Denoでの静的サイト構築にはまだハードル高いかと思っていたのですが、意外と実用レベルでどうにかなりそうというのも収穫でした。