Astro × microCMS × Cloudflareで構築する！モダンJamstackポートフォリオ

Jamstackは、「JavaScript」「API」「Markup（マークアップ）」の頭文字を取ったアーキテクチャ思想です。
Webサイトを「ビルド時に静的生成」し、「API経由で動的データを取得」することで、
従来のサーバーレンダリング型よりも 速く、安全なサイトを実現します。

今回紹介する構成では、以下の役割分担で構築しています。

• Astro.js … フロントエンドの静的サイト生成
• microCMS … ヘッドレスCMSとしてのコンテンツ管理
• Cloudflare … CDN・ホスティング・セキュリティを担当

ポートフォリオサイトの多くは、動的な機能よりもコンテンツの見せ方とパフォーマンスが重視されます。
Astroはこの用途に非常にマッチしています。

他のフレームワーク（Next.js、Nuxtなど）はSSRやCSRに強い一方で、Astroは静的サイト生成（SSG）を中心に設計されており、不要なJavaScriptを極力減らす構成になっています。

結果として、HTML中心の軽量なサイトを構築でき、読み込み速度が圧倒的に速くなります。

パフォーマンス最適化と静的サイト生成の強み

Astroのコンセプト「Island Architecture」では、インタラクティブな部分のみを動的にし、それ以外を静的に出力します。
これにより、Lighthouseスコアも自然と高くなり、SEOにも好影響です。

また、ビルド後は静的ファイル一式として出力されるため、CDNでの配信にも相性抜群です。

コンポーネント指向で柔軟なUI構築が可能

AstroはReact、Vue、Svelteなどのコンポーネントを同時に利用できる点も大きな魅力です。
既存のUIライブラリや過去のコード資産を活かしながら、柔軟にデザインを組み立てられます。
一部の画面だけ、一部の要素だけをSPAライクな動きにしたいなどの要望にも対応できます。

ノーコードで管理しやすいヘッドレスCMS

ポートフォリオに新しい作品を追加したいとき、いちいちコードを編集するのは面倒です。
microCMSを導入すれば、管理画面上からテキストや画像を入力するだけで簡単に更新できます。

しかも、APIベースのヘッドレスCMSなので、Astro側ではfetchでデータを取得するだけ。
開発者にとっても扱いやすい仕組みです。

ポートフォリオ更新の手間を削減

microCMSの管理画面は直感的で、非エンジニアでも操作できます。
ブログ記事、制作実績、プロフィールなど、コンテンツを分離して管理できるため、運用フェーズが圧倒的に楽になります。

API連携で柔軟にデータを取得

REST APIやGraphQL経由でデータを取得できるため、Astro内でのデータ構造を自由にカスタマイズできます。
カテゴリーやタグ機能も柔軟に実装可能です。

グローバルCDNによる圧倒的な表示速度

Cloudflare Pagesを使えば、世界中のユーザーに最寄りのサーバーからコンテンツを配信できます。
Astroの静的出力との相性は抜群で、超高速レスポンスを実現します。

無料SSLとDDoS対策でセキュリティも安心

Cloudflareでは、無料のSSL証明書を自動で発行してくれるため、HTTPS対応がすぐに完了します。
また、DDoS攻撃やBotアクセスの防御機能も標準で搭載されており、個人開発でも安心です。
管理画面上から簡単にアクセス制限の設定も行えるので、例えば国外アクセスを除外することなども簡単です。

Cloudflare Pagesとの相性の良さ

GitHub連携を設定しておけば、git pushするだけで自動デプロイ。
Astroのビルドプロセスも自動で実行されるため、CI/CD環境を手軽に構築できます。
WebHookを使用してmicroCMSと連携させれば、microCMSの投稿も即座に反映されます。

amstack的アプローチで保守性・拡張性が高い

Astro（静的生成）＋ microCMS（ヘッドレスCMS）＋ Cloudflare（CDN）は、まさにJamstack構成の恩恵を受けられるモダンな構成です。
ビルド時にAPIからデータを取得して静的化するため、表示時の負荷が極めて低く、障害にも強い構成になります。

開発・デプロイのフローがシンプル

• コンテンツをmicroCMSで編集⇒コンテンツを即座に配信
• GitHubにpush⇒コード修正を即座に反映
• Cloudflareが自動ビルド・公開

というシンプルなフローで保守・運用ができます。

コストを抑えながら高品質な運用が可能

Astro、microCMS（無料枠あり）、Cloudflare Pagesはどれも無料プランで十分な機能を持っています。
個人ポートフォリオとしては、ほぼゼロコストで高品質なサイト運用ができます。