因為會忘,所以要寫下來

為什麼會選 Astro

1 minutes to read

基於本身是純前端開發者,偶然看到了 Astro 的特性,被深深吸引,雖然現在有許多靜態網站的產生器,但裡面參雜著各種語言,想要客製化樣式的時後也不好改,且也繁複。而 Astro 採用了一種獨特的結構,將 HTML、CSS 和 JS 整合在一個單一檔案中。這讓程式碼可以更加簡潔和清晰。 對我而言,學習曲線低就是讚!

ASTRO 吸引我的點如下:

單一檔案元件

HTMLJSCSS 整合在單一檔案中,稱為一個元件。這種結構帶來多項優勢:首先,可讀性和維護性提升,相關程式碼在同一檔案中,更易理解和修改。其次,模組化開發成為可能,元件被分解為較小單位,方便重複使用。再者,樣式、腳本和模板之間的封裝較好,避免全局污染和命名衝突。此外,開發效率提升,使用單一檔案元件可更快速地編寫和測試元件。最後,許多前端框架和工具都支援此結構,例如 Vue.jsReactAngular 等,使其更具彈性和適用性。綜合而言,Astro 的單一檔案元件提供了更優雅、高效的開發方式,使前端開發更加便捷和可持續。

Markdown 渲染

它引入了集合概念,通過定義 frontmatter 字段,確保所有資料都被包括且與預期相符。藉由靜態頁面生成,Astro 可為每篇文章創建靜態頁面,提升性能和 SEO 效果。集合引用讓數據複用變得容易,例如在多個頁面中使用同一作者的數據。Astro 的靈巧功能能快速報錯,幫助開發者找到前提資料錯誤。這種方式簡潔、高效,讓前端開發更便捷且易讀,使數據和內容結合更為強大,讓開發者專注於網站功能和性能。

Astro Island

將網頁視為由靜態和互動式的 UI 組件組成的集合,每個 Island 都是獨立渲染的,就像坐落在靜態 HTML 海面上的島嶼。這種設計使得網站性能得到極大提升,同時也提供了更靈活的開發方式,我可以明確告訴 Astro 哪些 Islands 需要在瀏覽器上執行,並根據需要進行整合。

在未來 30 天裡將會以初學者的角度與各位從認識 Astro 到建置個人 Blog,與大家分享。

本系列文適合有 HTMLCSSJS 基礎的人觀看,會著重於 Astro 的介紹。 且將會使用 Tailwind CSS 來處理網站樣式。


後記

就在前幾天(8/30),Astro 推出了 v3 版本,它的更新速度快得驚人!所以,這次將直接介紹最新版的 v3!

對這篇文章有什麼想法嗎?

Copyright © 2023 Mandy. All rights reserved. Build with Astro