最近在學習一套建置靜態網站的框架 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 虛擬機。這可能需要幾分鐘。
啟動後，您將在瀏覽器中看到一個完整的 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 .
提示選項：
- 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 內容管理介面，方便管理網站和撰寫文章。
發佈留言