Astro + CloudflarePages で静的サイト作成

以下の構成でサイト構築を試してみました。

• 静的サイトジェネレータ: Astro
• サイトホスティング: Cloudflare Pages

Cloudflareから Create an application に進み、Pages を選択します。

Connect to Git でGitHub の Private Repositoryを選択しました。

Build configurationsは以下の通りです。Freamework presetとして Astroを選択するのみです。Astroのdefault設定から変更していません。

環境変数も設定していません。Hugoを使ってCloudflare Pagesでサイトをホスティングしようとしていた時には、HUGOのバージョンとYARNのバージョンの設定をしなければいけなかったので、この辺り楽でとても体験が良かったです。

GitHubの方では、CloudflareからConnectしていたことによって、PullRequestを作成した時に自動的にCIが走ってPreview Pageが表示されるようになっています。

ブログテンプレートを使用したのでAstro自体はそんなに編集したところはないです。

デフォルトでは、Home Blog Aboutの3つしかヘッダーに設定されていなかったので、Policy Organization Inquiry という３項目を新たに追加しました。これは、 /src/components/Header.astroのinternal-linksというclassの中にHeaderLinkを追加することで実現できます。

ルーディングは、/src/pages/<name>.astro を作成すると静的ページのルーティングができます。<name> の部分は、HeaderLinkのhrefで設定したpathの名前です。

こんな感じでサイトを作成できました。