GitHub CodespacesでAstro静的サイトプロジェクトを初期化・構築する完全手順

高速な静的サイト構築フレームワーク「Astro」を導入しようとした際、ローカルの Mac OS や Node.js のバージョンが古く、環境構築でエラーに突き当たることがあります。こうした悩みを一掃してくれるのが、クラウド型開発環境「GitHub Codespaces」です。

Codespaces を利用すれば、ブラウザ上で本物の VS Code と Linux ターミナルが即座に起動し、PCのスペックやOSバージョンに縛られることなく、いつでもどこからでもWeb開発を進めることができます。

🚀 Codespaces で Astro プロジェクトを初期化する手順

ステップ 1：Codespaces 環境の起動

前提条件：

• GitHub アカウントを所持していること。
• Astro 用のリポジトリが作成済みであること（例：Mountos/web）。

Codespace の作成：

1. GitHub で対象のリポジトリページ（https://github.com/Mountos/web）を開きます。
2. 緑色の「< > Code」ボタンをクリックします。
3. ドロップダウン内の「Codespaces」タブを選択します。
4. 「Create codespace on main」をクリックします。

クラウド上で数分以内に専用の Linux 開発コンテナが立ち上がります。

GitHub リポジトリから Codespaces を起動する画面

起動が完了すると、ブラウザ上にフル機能の VS Code 画面が表示され、画面下部に操作用ターミナル（Terminal）が用意されます。

ステップ 2：Astro プロジェクトの初期化

Codespaces には Node.js、npm、Git が最初からセットアップされているため、すぐにセットアップコマンドを実行できます。

リポジトリのルートディレクトリにいることを確認します：

cd /workspaces/web # または各自のリポジトリ名

Astro 公式のインストーラーを実行します（カレントディレクトリに展開するため末尾に . を指定）：

npm create astro@latest .

Codespaces のターミナルで初期化コマンドを実行

対話式プロンプトの選択例：

• Where should we create your new project?：.（現在のディレクトリ）
• How would you like to start your new project?：Blog（ブログ用テンプレートを選択）
• Include sample files?：Yes
• Install dependencies?：Yes
• Initialize a new git repository?：No（すでにGitリポジトリが存在するため）

(任意) Decap CMS 等のヘッドレスCMSを組み合わせる場合は React を追加：

npx astro add react

ステップ 3：Codespaces 上でのリアルタイムプレビュー

Codespaces はポートフォワーディングを自動処理するため、面倒なネットワーク設定は不要です。

開発サーバーを立ち上げます：

npm run dev

サーバーが 4321 ポートで待機すると、画面右下に「Open in Browser」というポップアップ通知が現れます。これをクリックすると別タブで Astro サイトのリアルタイムプレビュー画面が表示されます。

ステップ 4：GitHub へコミット＆プッシュ

1. VS Code 左側の「ソース管理（Source Control）」アイコンを開きます。
2. 自動生成されたファイル群（package.json, astro.config.mjs, src/ 等）を確認します。
3. コミットメッセージ（例：feat: Initial Astro project setup in Codespaces）を入力します。
4. 「Commit & Push」を実行します。

これでリポジトリ上に Astro プロジェクトが完全に反映されました。あとは Cloudflare Pages と連携させれば、自動デプロイパイプラインの完成です。