前言

Astro 是一個現代化的靜態網站生成器，支援多種前端框架，且效能優異。本文將詳細介紹如何在 VSCode 編輯 Astro 網站，並將專案連結至 GitHub，適合初學者及有經驗的開發者參考。

準備工作

在開始之前，請確認你已具備以下條件：

一台可正常運作的電腦（Windows、macOS 或 Linux）
穩定的網路連線
基本的程式操作能力

安裝 VSCode

VSCode 是微軟推出的免費、開源程式編輯器，支援多種語言與擴充套件。

步驟一：下載 VSCode

前往 VSCode 官方網站。
點擊「Download」按鈕，選擇適合你作業系統的版本（Windows、macOS 或 Linux）。

步驟二：安裝 VSCode

下載完成後，執行安裝檔案。
按照安裝精靈指示完成安裝。

安裝 Node.js

Astro 需要 Node.js 環境。

步驟一：下載 Node.js

前往 Node.js 官方網站。
建議下載「LTS」版本。

步驟二：安裝 Node.js

執行下載的安裝檔。
按照指示完成安裝。

步驟三：確認安裝

打開終端機（Windows 可用 PowerShell），輸入以下指令：

node -v
npm -v

若顯示版本號，表示安裝成功。

建立 Astro 專案

步驟一：開啟終端機

在你想建立專案的資料夾內，右鍵選擇「在此處開啟終端機」或使用 VSCode 內建終端機。

步驟二：建立 Astro 專案

輸入以下指令：

npm create astro@latest

根據提示選擇專案名稱、模板等。

步驟三：安裝依賴

進入專案資料夾：

cd 專案名稱
npm install

在 VSCode 編輯 Astro 專案

步驟一：用 VSCode 開啟專案

在 VSCode 中選擇「檔案」>「開啟資料夾」。
選擇剛建立的 Astro 專案資料夾。

步驟二：專案結構介紹

Astro 專案結構大致如下：

├── src/
│   ├── pages/
│   └── components/
├── public/
├── package.json
└── astro.config.mjs

src/pages/：放置網頁檔案
src/components/：放置元件
public/：靜態資源
package.json：專案設定
astro.config.mjs：Astro 設定

步驟三：啟動開發伺服器

在終端機輸入：

npm run dev

瀏覽器會自動開啟 http://localhost:4321，即可預覽網站。

安裝 VSCode 擴充套件

為提升開發效率，建議安裝以下擴充套件：

Astro 官方擴充套件
搜尋「Astro」並安裝。
ESLint
幫助維持程式碼品質。
Prettier
自動格式化程式碼。
GitLens
增強 Git 操作體驗。

將專案上傳至 GitHub

步驟一：建立 GitHub 帳號

前往 GitHub 註冊帳號。

步驟二：建立新倉庫

登入 GitHub。
點擊右上角「+」>「New repository」。
輸入倉庫名稱，選擇「Public」或「Private」，點擊「Create repository」。

步驟三：初始化 Git

在 VSCode 終端機輸入：

git init
git add .
git commit -m "Initial commit"

步驟四：連結遠端倉庫

複製 GitHub 倉庫網址，輸入：

git remote add origin 倉庫網址
git branch -M main
git push -u origin main

步驟五：確認上傳

前往 GitHub 倉庫頁面，確認檔案已成功上傳。

常見問題與解決方法

問題一：無法啟動 Astro 開發伺服器

檢查 Node.js 是否安裝正確
確認已執行 npm install
檢查 package.json 是否有錯誤

問題二：Git Push 失敗

檢查遠端倉庫網址是否正確
檢查網路連線
若遇到權限問題，請設定 SSH Key 或使用 HTTPS

問題三：VSCode 無法辨識 Astro 檔案

確認已安裝 Astro 擴充套件
重新啟動 VSCode

結語

本文詳細介紹了如何使用 VSCode 建置 Astro 網站並連結至 GitHub，從環境安裝、專案建立、編輯、到版本控管，皆有完整步驟與圖片說明。希望能幫助你順利開始 Astro 網站開發之旅！

參考資源：

Astro 官方文件

VSCode 官方網站

GitHub 官方教學

# 用 VSCode 快速打造 Astro 網站並串接 GitHub：新手到高手完整攻略

前言

目錄