基於本身是純前端開發者,偶然看到了 Astro 的特性,被深深吸引,雖然現在有許多靜態網站的產生器,但裡面參雜著各種語言,想要客製化樣式的時後也不好改,且也繁複。而 Astro 採用了一種獨特的結構,將 HTML、CSS 和 JS 整合在一個單一檔案中。這讓程式碼可以更加簡潔和清晰。 對我而言,學習曲線低就是讚!
ASTRO 吸引我的點如下:
單一檔案元件
將 HTML
、JS
和 CSS
整合在單一檔案中,稱為一個元件。這種結構帶來多項優勢:首先,可讀性和維護性提升,相關程式碼在同一檔案中,更易理解和修改。其次,模組化開發成為可能,元件被分解為較小單位,方便重複使用。再者,樣式、腳本和模板之間的封裝較好,避免全局污染和命名衝突。此外,開發效率提升,使用單一檔案元件可更快速地編寫和測試元件。最後,許多前端框架和工具都支援此結構,例如 Vue.js
、React
、Angular
等,使其更具彈性和適用性。綜合而言,Astro 的單一檔案元件提供了更優雅、高效的開發方式,使前端開發更加便捷和可持續。
Markdown 渲染
它引入了集合概念,通過定義 frontmatter
字段,確保所有資料都被包括且與預期相符。藉由靜態頁面生成,Astro 可為每篇文章創建靜態頁面,提升性能和 SEO 效果。集合引用讓數據複用變得容易,例如在多個頁面中使用同一作者的數據。Astro 的靈巧功能能快速報錯,幫助開發者找到前提資料錯誤。這種方式簡潔、高效,讓前端開發更便捷且易讀,使數據和內容結合更為強大,讓開發者專注於網站功能和性能。
Astro Island
將網頁視為由靜態和互動式的 UI 組件組成的集合,每個 Island
都是獨立渲染的,就像坐落在靜態 HTML
海面上的島嶼。這種設計使得網站性能得到極大提升,同時也提供了更靈活的開發方式,我可以明確告訴 Astro
哪些 Islands
需要在瀏覽器上執行,並根據需要進行整合。
在未來 30 天裡將會以初學者的角度與各位從認識 Astro 到建置個人 Blog,與大家分享。
本系列文適合有 HTML
、CSS
、JS
基礎的人觀看,會著重於 Astro
的介紹。
且將會使用 Tailwind CSS
來處理網站樣式。
後記
就在前幾天(8/30),Astro 推出了 v3 版本,它的更新速度快得驚人!所以,這次將直接介紹最新版的 v3!