Astroで個人サイトを作り上げる

無職になったということは、社会から半ば隔絶された状態に置かれたということで、定期的に存在をアピールしておかないと生きてるんだか死んでるんだかわからない状態になるわけです。
とりあえず存在を世界にアピールしておく必要（それとまとまった文章を書く練習をする必要）を感じたので、立場も変わったし心機一転ということで静的サイトジェネレータを使って個人サイトを構築してみます。

静的サイトジェネレータといえばGitHub PagesでもおなじみのJekyllやHugo、Gatsbyあたりが有名ですが、今回はAstroを利用することにしました。 AstroはJavaScript製のWebフレームワークで、コンポーネントをベースにしたアーキテクチャ（Island Architectureとドキュメントには書かれています）によってリッチなWebサイトを高速なレンダリングで提供することが特徴のようです。
他の静的サイトジェネレータを使うのもいいんですが、どうやらイケてるっぽいので使ってみることにしました。

Astroのセットアップ

Astroを使うには手元にNodejsの実行環境とパッケージマネージャが必要です。これらがセットアップされてることを確認して、公式のチュートリアルにあるコマンドを実行してみます。個人的な趣味でpnpmを使っていますが、このあたりは使っているパッケージマネージャに置き換えてください。

1
$ pnpm create astro@latest

実行するとプロンプトで

プロジェクトディレクトリの名前
依存パッケージのインストール有無
Gitリポジトリの初期化有無

が聞かれるので、それぞれ望みの値を入力します。

1
 astro   Launch sequence initiated.
2

3
   dir   Where should we create your new project?
4
         ./receptive-remnant
5

6
  deps   Install dependencies?
7
         Yes
8

9
   git   Initialize a new git repository?
10
         Yes
11

12
      ✔  Project initialized!
13
         ■ Template copied
14
         ■ Dependencies installed
15
         ■ Git initialized

--template 引数を利用するとAstroの公式サイトで紹介されている様々なテーマが利用できます。今回はテーマ一覧を眺めていて気になったAstro Yiテンプレートを使ってみます。

1
$ pnpm create astro@latest --template cirry/astro-yi

Astro Yiテンプレートを利用してセットアップすると、セットアップすると次のようなディレクトリツリーがプロジェクトディレクトリ内に展開されます。このテンプレートはブログを作成するために作られているのでsrc/content/blogというディレクトリが存在しています。

1
+ public/
2
+ src/
3
|   + components/
4
|   + content/
5
|   |    + blog/
6
|   |    + config.ts
7
|   + layouts/
8
|   + pages/
9
|   + styles/
10
|   + utils/
11
|   + consts.ts
12
|   + env.d.ts
13
+ astro.config.js
14
+ package.json
15
+ README.md
2 collapsed lines
16
+ tailwind.config.js
17
+ vercel.json

ブログ記事として投稿したい文書をsrc/content/blogの下に置くことで、Astroによってブログ記事のHTMLページが生成されるという仕組みです。

Astroを使ってHTMLを生成し、内容を確認するにはpnpm run devコマンドを実行します。このコマンドを実行するとsrc/pages内のテンプレートを利用してMarkdownドキュメントがHTMLに変換され、ローカルWebサーバーが4321ポートをリッスンする形で起動します。ブラウザを開いてアドレス欄にlocalhost:4321と入力してアクセスすると、生成されたHTMLが確認できます。 pnpm run devコマンドはファイルの変更を監視しているので、ファイルを更新するたびに新しいHTMLが生成されブラウザから変更をすぐに確認できるのが大変便利です。

Astroで色々とカスタマイズしたWebサイトを作るには、Astroのアーキテクチャやテンプレートで利用されるフレームワークの知識などが必要ですが、テンプレートを使ってサイトを作るだけならかなり手軽に行えることがわかります。

CloudFlare Pagesを利用したホスティング

Astroで生成されたHTMLやCSS、JavaScriptのファイルを公開する方法としてCloudflare Pagesを利用してみます。 Astroを利用したWebサイトをCloudflare Pagesを使って公開するやり方はAstroのドキュメントとCloudflare Pagesのドキュメントの両方で説明されていることもあり、どうやら一般的なユースケースの一つであることがうかがえます。

Cloudflare PagesはCloudflareが提供するホスティングサービスでHTMLやCSS、JavaScriptをCloudflareのインフラを利用してインターネットに公開できるサービスです。 Cloudflare Pagesは無料プランでもリクエスト数と帯域幅に上限がなく、1ファイル当たりの容量が25MB以内に収まっていれば20,000ファイルまで扱えるというかなり太っ腹な設定になっています。そしてサイトはCloudflareが世界各地に持っているCDNエッジサーバーの適切な箇所からユーザーに配信されるという特徴もあり、世界どこからでも高速に閲覧可能なページをデプロイできるサービスです。

個人サイトをとりあえずデプロイするという点で見れば十分すぎる能力を持っており、しかもそれが無料で利用できるとなれば使わない手はありません。 Cloudflare PagesでAstroによって構築されたWebサイトをデプロイするというのは、よくあることのようでCloudflare上でいくつかクリックするだけで簡単にデプロイできます。

まずはじめにCloudflareのアカウントを作って、コンソールにログインできる状態にしておきます。 CloudflareのコンソールのサイドメニューからCloudflare Pagesを選択すると次のような画面が表示されます。

この画面でPagesを選択して「既存のGitリポジトリをインポートする」を選択すると、GitHubとの連携画面に移動します。「GitHubに接続」ボタンをクリックするとGitHubとのOAuthによる連携ページが表示されるので、ここでCloudflareにGitHubリポジトリへのアクセス権を与えます。

あとはCloudflareの画面に戻り、Cloudflare Pagesでデプロイしたいプロジェクトを選択します。

AstroはCloudflarePagesがサポートしているフレームワークのため、プロジェクトを接続し利用するフレームワークから「Astro」を選べば、CI/CDパイプラインが自動で構築され、Cloudflare Pagesへのデプロイ処理が行われます。

ビルドに成功すると次の画面が表示されます。どうやらCloudflareは宇宙レベルで物事を考える企業のようです。ともあれこれで個人サイトをCloudflare Pagesを使ってデプロイできました。

まとめ

AstroとCloudflare Pagesを組み合わせることでそれなりの個人ブログが簡単にホスティングできました。言うほど簡単だったか？と言われると、画像の取り扱いで半日頭を悩ませるなどがあったので、とてつもなく簡単というわけではないですが、多少プログラミングをかじったことがあってGitに慣れていればものの半日もあれば個人サイトを構築できそうでした。 2025年の巨人の肩ってやつは広くて大きいことに感謝して、これから適当に記事を書いていこうと思います。