ryo-suga.com

ブログをCloudflare pagesとAstro.jsで組んでみた

新年が明け、ブログを書こうと一年ぶりに思い立ったので、ネタ作りの一環としてブログの構成を一気に変更しました。

もともとの構成は下記


構成としては、ただ単にRustの練習としてサーバーを立てたかっただけで、もう満足したので次はSSGで更に管理しやすい構成を目指しました。

今の構成は下記

  • サーバーを撤廃
  • SSGに Astro を利用
  • CMSに microCMS を利用
  • CDNに Cloudflare を利用
  • Cloudflare の Pages をコンテンツ配信に利用


（地味にHerokuで課金していたので、月間 $7 のコスト削減になったのは嬉しかった）


Cloudflare Pages

CloudflareのPagesはGitHubのインテグレーションでデフォルトでビルドが走る環境だとNode.jsのバージョンが12なこと
Pagesでカスタムドメインを紐付けている場合にCloudflare側のCDNのキャッシュを飛ばしたいとき、そのタイミングを自動化できていないこと
の2点につまづきました。

Node.jsのバージョンに関しては(現時点でのLTS v18では動作しないので) 環境変数 NODE_VERSION に 16.19.0 を設定してあげてれば上手いことビルドが通りました。
CDNのキャッシュを飛ばすのをデプロイ後に自動化する方法は、Pagesのdeploy完了のhookが特に見つからなかったので諦めています。

Astro

最初はReact普段から書いてるしNext.jsやGastbyjsにしようかなと思っていたのですが、正直２つとも個人ブログを運用するには盛り盛りな機能で必要に感じなかったので、なにかないかなと探していたところ Astro に出会いました。
加えて、Astro は思想的に MPA (マルチページアプリケーション) となっていて、ブログにSPAの機能すごく too much だな、てかJavaScriptを動作させること自体 too much だと感じていた自分に刺さったので採用しました。

---
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

こんな感じで、.astro ファイルが多少癖はあるのですが、JSXな記法に慣れ親しんだ僕からするとそんなに悪くない書き心地でした。（拡張子が増えるのはしんどい）
むしろ、ブラウザで実行されるコードとそうでないコードが分別されて良いとすらうっすら感じました。



そんなこんなで、いろいろ変えたのですが
いまのところ「microCMS 良いぞ…！」とすごく感じていて、これは次のブログを書くモチベーションにもなりそうだなと思っています。