ITエンジニアにとって、自身のスキルやプロジェクトを公開するポートフォリオサイトは重要な資産です。今回は、パフォーマンスに優れた静的サイトジェネレーターである Astro と、強力なエッジネットワークを持つ Cloudflare Pages を活用して、爆速で動作するモダンなポートフォリオを構築する手順を解説します。

なぜ Astro と Cloudflare Pages なのか？

• Astro: 必要なときだけ最小限のJavaScriptを送る「アイランドアーキテクチャ」により、極めて高速なページロードを実現します。
• Cloudflare Pages: Gitとの連携が容易で、無料枠が非常に強力です。また、Cloudflareのエッジネットワークにより世界中から低遅延でアクセス可能です。

---

1. Astroプロジェクトの作成

まずはローカル環境でAstroプロジェクトを作成します。

# プロジェクトの作成開始
npm create astro@latest

ウィザード形式で設定を聞かれるので、適宜選択します：

• Where would you like to create your new project?: ./my-portfolio
• How would you like to setup your new project?: Use blog template (今回はブログテンプレートを選択)
• Install dependencies?: Yes
• Do you plan to write TypeScript?: Yes
• Initialize a new git repository?: Yes

2. GitHubリポジトリへのプッシュ

Cloudflare Pagesと連携させるために、GitHubにリポジトリを作成し、作成したコードをプッシュします。

git remote add origin https://github.com/your-username/my-portfolio.git
git add .
git commit -m "Initial commit"
git push -u origin main

3. Cloudflare Pagesでのデプロイ設定

1. Cloudflare ダッシュボードにログインします。
2. 「Workers & Pages」 > 「Create application」 > 「Pages」 > 「Connect to Git」 をクリックします。
3. 先ほどプッシュしたGitHubリポジトリを選択します。
4. ビルド設定を行います：
   • Framework preset: Astro
   • Build command: npm run build
   • Build output directory: dist
   • Node.js version: 18以上を推奨（環境変数 NODE_VERSION で指定可能）

「Save and Deploy」 をクリックすると、ビルドとデプロイが開始されます。

4. デプロイの確認と調整

デプロイが完了すると、https://xxx.pages.dev というURLが発行されます。

環境変数の設定（必要に応じて）

Node.jsのバージョンや特定のAPIキーなどが必要な場合は、Cloudflare Pagesの設定画面の「Variables and Secrets」から追加できます。

カスタムドメインの設定

「Custom domains」タブから、自分の持っているドメインをサイトに紐付けることができます。Cloudflareでドメインを管理している場合は、数クリックで完了します。

まとめ

AstroとCloudflare Pagesを組み合わせることで、開発体験が良く、かつユーザーにとってもストレスのない高速なポートフォリオサイトを簡単に構築できます。 今後は、Astroの「Content Collections」機能を活用して、技術記事や実績紹介をさらに充実させていくのがおすすめです。

---

参考文献

• Astro Documentation
• Cloudflare Pages Documentation