構成デモ

Astro × ヘッドレスWordPress
構成デモ

表面は Astro が静的HTML として高速・安全に配信し、
お知らせや固定ページの内容は WordPress（ヘッドレス）から取得する構成です。
GitHub の dev / main ブランチへのプッシュで Vercel に自動デプロイされます。

各ページを確認する

お知らせ一覧

WordPress で管理する投稿一覧

WordPress の投稿をWPGraphQL経由で取得し、ビルド時に静的HTMLとして生成します。 管理画面から記事を追加・編集するだけで本番に反映されます。

お知らせ一覧を見る →

会社概要

ACFカスタムフィールドの取得

固定ページに設定したACF（Advanced Custom Fields）の値をWPGraphQLで取得して表示します。 見出し・リード文など細かい文言もWordPressから管理できます。

会社概要を見る →

プレビュー（SSR）

下書き確認の実演ページ

このページだけビルド時生成ではなく、毎回WordPressから直接取得するSSRモードで動作します。 公開前の下書き記事もリアルタイムに確認できます。

プレビューを見る →

この構成の特長

  • 速い（静的HTML配信）

    Astro がビルド時にHTMLを生成するため、ブラウザへの配信はすべて静的ファイルです。 サーバーサイド処理がなく、表示速度が高速で安定しています。

  • 安全（WordPress が表に出ない）

    WordPress はデータ取得専用のバックエンドとして動作し、公開URLには一切登場しません。 直接アクセスされるリスクを大幅に低減できます。

  • 更新は管理画面から

    お知らせの追加・編集・固定ページの文言変更は、すべてWordPressの管理画面から行えます。 コードを触らずにコンテンツを更新できます。

  • GitHub → Vercel 自動デプロイ

    dev ブランチへのプッシュでプレビュー環境に、 main ブランチへのマージで本番環境に自動デプロイされます。 手動のFTP作業は不要です。

技術スタック：Astro / WordPress（ヘッドレス） / WPGraphQL / Vercel / TypeScript