靜態網站

最近我在各種地方聽到很多關於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網站，這樣我們就可以看到不同的網站是如何構建的，從非常簡單的網站開始，然後逐步變得更複雜。 創建一個空文件夾，然後運行： npm init astro 這將提示您選擇一個起始模板： 選擇Minimal。等它完成後，運行： npm install 然後運行： 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系列中的文章： Astro組件 在Astro中構建可組合的佈局 Astro Props 將一個簡單的網站轉移到Astro 從網絡中提取數據在Astro

發現Netlify，一個非常適合靜態網站的優秀托管服務，它還有一個很好的免費計劃、免費CDN並且運行非常快速。 我把我的博客托管在Netlify上。 我一段時間前轉移，我的前一個托管服務遇到了一些問題，導致我的網站在幾個小時內無法訪問，所以在等待它恢復上線期間，我尋找了一個快速的方式將其還原，並在Netlify上創建了一個複本。 由於這個博客使用的是Hugo，它是一個靜態網站生成器，所以我不需要太多工作將博客遷移到新的托管服務上。我只需要一個可以提供HTML文件的地方，而這幾乎是地球上的任何一個托管服務都能做到的。 我開始尋找最適合靜態網站的平台，有一些平台在我眼中脫穎而出，但最終我選擇了Netlify，並且很高興我這麼做了。 介紹Netlify 在我嘗試之前，有一些讓我留下了極好印象的事情。 首先，免費計劃非常豐富，無論是免費還是商業項目都可以享有100GB的每月免費帶寬，對於一個只有一些圖片的靜態網站來說，這是一個非常寬敞的空間。 它們提供全球CDN，以確保速度不成問題，即使在遠離中央位置服務器的大陸上也是如此。 你可以將你的DNS nameserver 指向Netlify，他們會為你處理一切，並且提供一個非常漂亮的界面來設置高級需求。 它們當然支援自訂域名和HTTPS。 從Firebase過來，我期望能夠以一種對程序員友好的方式來管理部署，但我發現Netlify在處理每個靜態網站生成器方面甚至更好。 Netlify和Hugo 我使用的是Hugo，在本地我使用它內建的工具hugo server運行服務器，該工具會在每次更改時重新構建所有HTML文件，並且默認運行一個HTTP服務器，端口為1313。 為了生成靜態網站，我需要運行hugo，這會在public/文件夾中創建一系列的文件。 在Firebase的情況下，我採用了這個方法：我運行hugo來創建文件，然後運行firebase deploy，配置它將public/文件夾的內容推送到Google服務器。 然而，在Netlify的情況下，我將它連接到了我私有的GitHub存儲庫，並且每次我推送到我告訴Netlify同步的主分支時，Netlify都會啟動新的部署，變更將在幾秒鐘內生效。 提示：如果你在Netlify上使用Hugo，請確保在netlify.toml中設置HUGO_VERSION為最新的Hugo穩定版本，因為默認版本可能比較舊（截至目前為止）並且不支援最新的功能，例如後綴束。這是我的netlify.toml配置文件。 如果你覺得這不是什麼新鮮事，你是正確的，因為這在自己的服務器上並不難實現（我在其他沒有托管在Netlify上的網站上也這麼做），但這裡有一些新鮮事情：你可以預覽GitHub（或GitLab、或BitBucket）的任何分支/PR，同時你的主站點仍然運行並顯示“穩定”的內容。 另一個很酷的功能是可以在2個不同的Git分支上進行A/B測試。 Netlify為靜態網站提供的高級功能 靜態網站的顯而易見的限制是不能執行任何服務器端操作，這和你從傳統CMS（如WordPress）中期望的功能不一樣。 這既是一個優勢（因為安全問題較少），也是一個你可以實現的功能的限制。 一個博客並不復雜，你可以使用像Disqus或其他類似服務來添加評論功能。 或者，你可以通過嵌入第三方應用程序（如Wufoo或Google Forms）生成的表單來添加表單。 Netlify提供了一套工具來處理表單，驗證用戶，甚至部署和管理Lambda函數。 需要在發布之前對網站進行密碼保護？✅ 需要處理CORS？✅ 需要進行301重定向？✅ 需要為你的SPA進行預渲染？✅ 我只是觸及了Netlify提供的功能的表面，而沒有借助第三方服務，希望我給你提供了一個嘗試Netlify的理由。 預覽分支 GitHub的集成和拉取請求一起工作得很好。 每次你推送一個拉取請求，Netlify就會在一個特定的URL上部署該分支，你可以與你的團隊共享這個URL，或者與任何你想共享的人共享。 這裡，我提出了一個拉取請求，以預覽博客文章，但只在我的公共博客上不可用： Netlify立即捕捉到它，並自動部署它🎉 點擊鏈接會將您指向一個特殊的URL，讓您可以預覽該分支的網站版本。

這是我用來讓自己輕鬆一點的其中一個「技巧」。 有時候我會寫一些未來日期的文章，以便預定發佈。在像 WordPress 等平台上，這是內建功能。 但在靜態網站上，我們需要有些創意。 那些文章在發佈日期之前，是不會被發佈的，而這個日期是在文章元資料中設定的。 每個平台都允許你建立部署勾子。當達到該網址時，網站將會重新部署。 但它們都只接受 POST 請求。 所以我在我的網站上建立了一個隱藏頁面，其 URL 看起來十分奇怪。 當這個頁面在瀏覽器中載入時，一個腳本會向我的部署勾子發送 POST 請求，就像這樣： const deploy_hook_url = 'https://YOUR_DEPLOY_HOOK'; fetch(deploy_hook_url, { method: 'post', headers: { 'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8', }, })