在 GitHub Codespaces 中初始化 Astro 靜态网站项目

最近在学習一套建置靜态网站的框架 Astro，剛好遇到 MacOS 一直沒更新导致版本太舊，無法正常安裝的問题。因此试著改从 GitHub Codespaces 来学習使用。

实際使用後发现这套系统确实是一个好的解決方案，能夠立即开始 Astro 项目，同时解決所有 macOS 版本過舊和 Node.js 环境的問题。

而且 Codespaces 提供了在瀏览器中运行的完整的 VS Code 和 Linux 終端机环境，方便我可以在任何平台、任何时间、任何地点控制整个网站系统。

🚀 在 Codespaces 中初始化 Astro 项目

步驟 1：啟动 Codespaces 环境

1.1 前提條件

• 您有一个 GitHub 帳號。
• 您的 Astro 项目的倉庫必須已经存在 (例如 Mountos/web)。

1.2 创建 Codespace

• 登入 GitHub，导航到您的项目倉庫頁面（https://github.com/Mountos/web）。
• 点击綠色的 < > Code 按鈕（參考下图）。
• 在下拉選单中選擇 “Codespaces” 分頁。
• 点击 “Create codespace on main”。

Codespaces 將在云端为您啟动一个预配置的 Linux 虛擬机。这可能需要幾分鐘。

透過 GitHub 倉庫开啟 Codespaces

啟动後，您將在瀏览器中看到一个完整的 VS Code 界面，底部会有一个可用的「終端机 (Terminal)」。

步驟 2：初始化 Astro 项目 (在 Codespaces 終端机中)

由於 Codespaces 已经预裝了 Node.js、npm 和 Git，您现在可以像在任何 Linux 或 Mac 环境中一样运行命令。

确保您在倉庫的根目錄：

cd /workspaces/web #或您自订的倉庫名稱

執行 Astro CLI 精靈：

使用 npm create 运行 Astro 的安裝嚮导（如下图）。由於您可能已经在本地试图创建過，我们使用 . 确保在當前目錄下初始化。

npm create astro@latest .

Codespaces Terminal 終端机輸入指令

提示選項：

• 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’，因为倉庫已经存在)

• 安裝 React 整合 (为 Decap CMS 準備):npx astro add react

步驟 3：在 Codespaces 中即时预览 (Dev Server)

Codespaces 会自动处理网络轉发，無需手动设定防火牆！

运行 Astro 开发服務器：npm run dev

• Codespaces 会检测到服務器在 4321 端口上运行。

打开预览：

• 在 VS Code 界面的右下角，您会看到一个彈出通知，詢問您是否要在瀏览器中「Open in Browser」。
• 点击它，Codespaces 会打开一个新的瀏览器分頁，顯示您的 Astro 网站的即时预览！

步驟 4：將初始化結果推送到 GitHub

• 在 VS Code 左側，切換到「Source Control (源代碼控制)」图标。
• 您会看到所有新创建的 Astro 文件 (如 package.json, astro.config.mjs, src/) 被列为待提交的更改。
• 在頂部輸入提交讯息 (例如: “feat: Initial Astro project setup in Codespaces”)。
• 点击 Commit & Push 按鈕。

一旦您成功執行了步驟 4，您的 GitHub 倉庫就会有完整的 Astro 项目結構。接下来，我们就能在 Cloudflare Pages 中自动检测並成功部署了！

下一步路线图指引：安裝 Decap CMS 內容管理界面，方便管理网站和撰寫文章。