Astro介紹
最近我在各種地方聽到很多關於Astro的討論,於是我決定去瞭解一下。
我有一個困擾:我討厭伺服器。我討厭管理伺服器,我討厭建立伺服器,我討厭必須擔心伺服器。安全性、維護、升級,這些都不是我喜歡的事情,除非是必需的。
這就是為什麼我喜歡使用像Netlify和Vercel這樣的平臺。我使用了很多靜態網站生成器,如Hugo、Next.js、SvelteKit和傳統的簡單HTML網站。
Astro看起來很有趣,因為它朝著這個方向前進,但有著不同的觀點。
以下是Astro對我來說主要的賣點:
- 它生成靜態網站,對我來說這是一大優點,因為我不想管理伺服器,而且我愛靜態網站。
- 它不依賴於特定的框架,這讓我在使用不同框架的不同網站時更靈活。
- 它似乎非常簡單,我喜歡簡單的東西。
- 它致力於盡可能少地將JavaScript發送到客戶端。
你知道,我看到自十多年來不斷有新的JavaScript框架出現,必須有一些顯著的不同才能出現。
我所看到的第一件事是,Astro是一個不依賴於框架的工具。在這個領域,它在JavaScript相關的領域是獨一無二的。Next.js和Gatsby是建立在React上的,SvelteKit是建立在Svelte上的,Nuxt是建立在Vue上的。
我可以使用Astro來創建一個使用React的網站,然後在另一個網站中使用Svelte或Vue,但可以重用我的Astro專業知識。如果需要,你還可以將不同框架混合使用在網站的不同部分。這並不是我在我的網站中想要做的事情,但對於各種場景來說可能很有用。
最終生成的是一個靜態的HTML網站。在瀏覽器中運行時不需要任何JavaScript庫,除非明確需要。
這是一種稱為以HTML為先,僅在需要時使用JavaScript的方法。
這很酷。我們使用JavaScript構建網站,但大部分工作在構建時完成。
它似乎使用了很多組合的概念,重用我們用其他庫(React/Vue/Svelte/*)構建的東西。
它還借用了其他項目中出現的一些好的想法,比如frontmatter、內置的MDX支持、作用域CSS和基於文件系統的路由。
Astro在2021年6月正式推出,自那時以來引起了很大的熱議。
讓我們來看看它到底是什麼。
我要使用Astro安裝幾個不同的Astro網站,這樣我們就可以看到不同的網站是如何構建的,從非常簡單的網站開始,然後逐步變得更複雜。
創建一個空文件夾,然後運行:
1 | npm init astro |
這將提示您選擇一個起始模板:
選擇Minimal。等它完成後,運行:
1 | npm install |
然後運行:
1 | npm run dev |
在http://localhost:3000/上啟動本地開發伺服器。
選擇Minimal模板將生成一個非常簡單的網站。
現在讓我們創建另一個網站,選擇Blog模板。
以下是Finder中的項目結構:
所有模板默認使用Preact,它是類似React的庫,只是更快、更小。您可以使用Starter Kit選項來選擇其他框架。作為第二步,您可以選擇React、Solid、Svelte或Vue:
讓我們按下空格選擇Svelte(注意,您可以選擇多個框架)。這將生成一個簡單的單頁網站:
注意底部的小部件,帶有+和-按鈕的數字。這是一個Svelte組件。
現在讓我們來看看生成這三個網站的代碼。在查看代碼之前,請在VS Code中安裝Astro擴展:
這將對您的.astro
文件應用正確的語法突出顯示。
我有說過.astro
文件嗎?是的,因為這是任何Astro項目的構建塊。
我們有兩種不同類型的.astro
文件:頁面和組件。
頁面是任何與路由相關的內容,例如/
或/blog
或/blog/hello-world
。
組件是頁面使用的任何代碼,用於抽象或提取公共代碼。
我們將頁面放在src/pages
中,將組件放在src/components
中。與往常一樣,我們有一個public
文件夾,用於存放需要直接訪問的任何文件,例如圖像或其他資源。
在.astro
文件中,組織方式有點新穎,但我不想洩露太多,我們將在下一篇博文中看到,因為這是Astro簡短系列的開端。
以下是Astro系列中的文章:
tags: [“Astro”, “JavaScript”, “靜態網站”, “框架”, “HTML”, “路由”, “Astro擴展”]