在Netlify上托管靜態網站的教程

發現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，讓您可以預覽該分支的網站版本。

tags: [“Netlify”, “靜態網站”, “托管服務”, “Hugo”, “部署”]