はじめに

Astroという静的サイトジェネレーターを使って作ったブログをCloudflare Pagesでデプロイしてみました。このブログのことです。そこそこ開発体験がよいものでしたので、ここにその感想を書きます。

Astroについて

静的サイトジェネレーターについての説明はおそらく不要でしょう。Wordpressのような動的サイトジェネレーターが生成するサイトに対して、静的サイトにはいくつかのメリットが存在します。事前にビルドされたサイトが配信されるだけというシンプルさが、高速性や安全性や安定性をもらたすのです。

静的サイトジェネレーターとしてはすでにHugoが、これ以上ないほど有名です。Go言語によって作られたHugoは、シンプルかつパワフルな構文によって多くのニーズに応えることができます。構文の癖が強いというデメリットはあるものの、開発体験は悪くありません。Hugo自体が高速というのも嬉しいポイントです。

Next.jsも静的サイトジェネレーターとして数えられることもあります。ReactフレームワークであるNext.jsには静的サイトジェネレーターとして求められる機能も備わっており、Reactの膨大な資源を活用しつつ静的サイトにあるメリットも享受することができるということで、よいものです。

そして最近注目を集めている静的サイトジェネレーターとして、Astroがあります。これはJavaScriptやTypeScriptによって開発されている静的サイトジェネレーターですが、Next.jsとは異なりReact専用というわけではありません。ReactやVue、SolidやSvelteやLitなどもサポートした、より汎用的なフレームワークです。その使い勝手は、「JSXライクに書けるようにしたHugo」、「Hugoのように手軽なNext.js」というようなものだと個人的には感じました。そしてそれが、私のニーズとうまく噛み合っているように感じられました。

ちょっとしたブログを作ってみたいという私のニーズに対しHugoはよいものでした。しかし独自構文の癖が強く、ドキュメントにないようなことをしようとすると一気に難易度が高くなるように感じられました。対するNext.jsはすべてにおいて大仰で、私のReact自体の理解度がまだまだなこともあって扱いにくいものでした。そういうわけで、その2つの中間のような使い勝手をしているAstroはなかなかによいものだったのです。

ただ、JSXライクな構文ではありますが独自の構文を持っているため、開発に際し使うツールの対応状況はあまりよくありません。言語サーバの機能を使いまくる便利な開発はできそうにありませんでした。そこさえなんとかなればとてもよいものだと思うのですが……。

Astroでのブログの作り方

Astroには、ほとんどが日本語化されたドキュメントが存在します。私のこの記事を読むくらいならそちらを参照してください。

• Astroドキュメント

基本的には、.astroという拡張子のファイルにJSX的に書いていけばOKです。そこまで理解しにくい構造をしているわけではないので、すでに他の静的サイトジェネレーターを使ったことがあるのであれば簡単に理解できるでしょう。

TypeScriptを使ったり、Sassを使ったり、MarkdownやMDXを使ったりすることも簡単にできるようになっていますので、調べてみてください。

Cloudflare Pagesについて

Astroで作った静的サイトをデプロイする方法としてはいくつかありますが、ここでは、このブログがやっているように、Cloudflare Pagesでデプロイする方法をまとめます。

Cloudflare Pagesは静的サイトのデプロイをしてくれるよくあるサービスのひとつです。

• Pages | フロントエンド開発者のためのフルスタックプラットフォーム | Cloudflare

GitHubなどのアカウントと連携し、そこにあるリポジトリを監視し、変更があった場合は自動でデプロイしてくれます。Cloudflareによって提供されているので、Cloudflareの他のサービスとの親和性の高さにも期待できます。

AstroのプロジェクトをCloudflare Pagesでデプロイする方法

AstroのプロジェクトをCloudflare Pagesでデプロイする方法はすでに用意されています。必要なのは、簡単なセットアップ作業だけです。

• Deploy your Astro Site to Cloudflare Pages 🚀 Astro Documentation
• Deploy an Astro site · Cloudflare Pages docs

GitHub上で管理されている場合に必要になるセットアップ作業について、おおまかにまとめると次ようになります。

1. Cloudflareのダッシュボードの「Workers & Pages」からプロジェクトを作成する
2. GitHubのアカウントと連携する
3. GitHubのリポジトリを選択し、Astroのプロジェクトとして設定する
4. 一通り設定を終えると、設定したドメイン（example.pages.dev）としてデプロイされる
5. 必要に応じてカスタムドメインの設定をする

注意点として、現在のCloudflare PagesはNode.jsのLTSバージョンに対応していません。

追記（2023/01/30） 現在は任意のバージョンのNode.jsを使えるようになっています。

• Language support and tools · Cloudflare Pages docs

おわりに

Astroで作った静的サイトなブログのCloudflare Pagesでのデプロイについてまとめました。

このブログはGitHubのプライベートリポジトリで管理されてしまっているので、そのソースコードをAstroプロジェクトの例としてお見せすることはできず申し訳ありません。Astroに興味があればぜひ公式ドキュメントをご覧ください。

あとがき

比較的最近になって登場したAstroが、すでにCloudflare Pagesでデプロイできるようになっているのがとてもありがたかったです。その辺りのことを考えるのであれば、すでに大御所であるHugoを使うべきなのでしょうけれど、Hugoはナンモワカラン状態だったのです……。ちなみに少し調べてみたところ、Vercelでもデプロイできるようでした。よい時代ですねぇ。

実はmicroCMSを使ってコンテンツを管理することにも挑戦していたのですが、microCMSのリッチテキストエディターの使い勝手がよくなかったためrevertした過去があります。Twitterの公式アカウント曰く、新しいリッチテキストエディターをクローズドベータで開発中とのことですので、楽しみに待つことにします。