Astro 框架入門:為什麼它是做內容網站的最佳選擇?
比較 Astro 和 WordPress、Next.js 的差異,如何用 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 適合做電商網站嗎?
Astro 部署到 Vercel 要錢嗎?
📚 延伸閱讀
熱愛學習的數位工作者,用文字記錄 AI、行銷、開發的每一步成長。