📝 Vega Note
💻 開發 · Vega

Astro 框架入門:為什麼它是做內容網站的最佳選擇?

比較 Astro 和 WordPress、Next.js 的差異,如何用 Astro 快速建立高效能的靜態網站。

Astro 前端開發

為什麼我從 WordPress 搬到 Astro?

用了6-7年的 WordPress,我決定搬家了。原因很簡單:WordPress 太肥了,很多時候我想客製化時,卻總是做不出來。 一個簡單的部落格,載入速度要 3-4 秒,還要擔心外掛更新、安全漏洞,主機費用更是驚人。 前陣子有朋友的主機被駭客攻擊,必須要轉移每個網站的資料,他第一次跟我哀嚎到~他也很想轉出WP.

Vibe Coding+Astro 讓一切變得簡單:純靜態 HTML,載入速度不到 1 秒,部署在 Vercel 完全免費。

Astro 的核心優勢

1. 零 JavaScript by Default

Astro 預設不送任何 JavaScript 到瀏覽器,只有純 HTML 和 CSS。需要互動的地方再用「Islands」按需載入 React 或 Vue 元件。

2. Markdown 原生支援

文章用 Markdown 寫,放在專案裡就是一篇文章。版本控制、搜尋替換都超方便,不需要資料庫。

3. 部署超簡單

推到 GitHub,Vercel 自動部署。不需要設定伺服器、不需要 SSH、不需要 FTP。

5 分鐘建立第一個 Astro 網站

只需要三個指令就能跑起來,比泡一杯咖啡還快。

網站轉移主機

從開始下定決心開始轉移後,首先我先把掛在太貴的網域商的網域都轉移到Dynadot。 原本我認知的一些網域公司,費用應該不會太高,但當我看到Dynadot後, 不只介面親民,價格更是親民,所以把所有的網域都轉移過去。

開始製作網站

後來我的Vibe Coding都是用Claude來寫,他真非常強。 從原本的sonnet到現在的opus 4.6 一路用著,也一路看著他成長。 不用坊間的什麼專業術語,什麼規格~ 我們不就不會才需要Vibe Coding?還給他規格的話,乾脆請人寫好了~ 所以我的做法都是: 1.跟他討論我要什麼 2.把我的需求轉化成規劃書 3.規劃書放入專案 4.開始執行 5.不會的請他教我步驟部署 6.寫下剛剛的錯誤處理步驟,放入專案

就這樣,我的專案一個一個完成 網站一個一個建立並起順利搬家。

還是不相信那麼簡單?

朋友還是很不相信,覺得我是不是藏步 抱歉~真的很簡單。 簡單到要我去教,我都覺得不好意思~

標籤: Astro靜態網站Vercel前端開發

💬 常見問題

Astro 適合做電商網站嗎?
Astro 比較適合內容為主的網站。如果是需要大量動態互動的電商,建議用 Next.js 搭配後端。
Astro 部署到 Vercel 要錢嗎?
Vercel 的 Hobby Plan 是免費的,對個人網站和小型專案來說完全夠用。

📚 延伸閱讀

✍️
Vega

熱愛學習的數位工作者,用文字記錄 AI、行銷、開發的每一步成長。