Netlify

如何使用 Netlify Lambda 函数，为 JAMstack 网站添加动态处理功能 之前我在我的Netlify教程中写到了Netlify。我使用它来托管这个博客，而且效果非常好。 我还使用它来运行其他网站，而且所有的网站都是基于 Hugo 构建的 - 这使得我的堆栈100%基于JAMstack。 JAM 的有趣之处在于它不仅仅局限于静态和"哑"网站 - 你可以实现任何你想要的动态功能。 其中大部分的功能由“lambda 函数”实现。 你可以让你的网站上的 JavaScript (或纯 HTML 表单) 调用 URL 接口，当调用时执行一些预先确定的代码。不同的供应商支持不同的编程语言。Netlify 目前支持 Node.js 和 Go。 在本教程中，我们将专注于使用 Node.js 编写的 lambda 函数。 Netlify 给我们提供了一个慷慨的免费使用限额，每个月最多可以调用 125,000 次函数，并且总计运行时间为 100 小时。函数提供了 128MB 的内存，每个函数可以执行最长 10 秒。对于一般需要，这已经足够了。 在内部，Netlify 在 AWS Lambda 上运行该函数，并为你抽象了 AWS 的所有复杂性。 我们如何创建函数呢？我们将一个 JavaScript 文件上传到站点的 functions 文件夹中。 在该文件中，我们必须遵循一个名为 handler 的方法： exports.handler = (event, context, callback) => { //功能实现 } 如果您对 AWS Lambda 比较熟悉，这段代码会让您感到亲切。如果您从未使用过它，不用担心 - 这里是我们 handler 接收到的参数的简要概述：...

最近，我在 Netlify 上創建了一個新的網站，希望將其中一部分公開在 GitHub 上，以便任何人都可以提交錯別字等問題的拉取請求。 我在 Hugo 倉庫中有一個名為 content 的文件夾，我想公開的部分是一個名為 handbook 的文件夾。 因此，我為此創建了一個新的倉庫，名為 handbook。 我刪除了父倉庫中的 content/handbook 文件夾（如果您從頭開始創建，則不需要此步驟，但我希望移動現有內容）： rm -rf content/handbook 然後我提交了更改，然後添加了子模組： git submodule add https://github.com/flaviocopes/handbook 我在 Netlify 上部署了網站，它自動捕獲了子模組。 但在本地上遇到了一個問題，因為並不是像子模組存儲庫文件夾上有著符號鏈接這樣。 我刪除了 content/handbook 文件夾，並從子模組的本地存儲庫添加了一個符號鏈接： ln -s ../../../dev/handbook/ 然後，我告訴 Git 停止跟踪 content/handbook 文件夾，使用以下命令： git update-index --skip-worktree content/handbook （要恢復跟踪，請使用 --no-skip-worktree） 這樣，我既有子模組，也在本地上有指向子模組的符號鏈接，兩者兼得。

我想在每次我在包含在存儲庫中的 Git 子模組上進行提交時，在 Netlify 上重新構建我的網站。 不幸的是，Netlify 不會默認這樣做，只有主要存儲庫被“監視”以進行新的提交。 所以我這樣做了。 我進入部署設置，在“部署提醒”中，我點擊了“添加部署提醒”。 ！ 保存後，我得到了一個唯一的 URL，我可以調用，類似於 https://api.netlify.com/build_hooks/UNIQUE_STRING。 然後，在子模組存儲庫中創建了一個 GitHub Action： name: 在 Netlify 上觸發重新部署 on: push: branches: [ "main" ] jobs: build: name: 執行 POST 請求 runs-on: ubuntu-latest steps: - name: Curl 請求 shell: bash env: UNIQUE_STRING: ${{ secrets.NETLIFY_BUILD_HOOK_UNIQUE_STRING }} run: curl -X POST -d {} https://api.netlify.com/build_hooks/$UNIQUE_STRING 將上述的 Netlify UNIQUE_STRING 值添加到存儲庫 “設置 -> 秘密 -> 操作” 中的 NETLIFY_BUILD_HOOK_UNIQUE_STRING 操作秘密。 提交 Action，部署應該已經在運行： ！

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

我有一份定期發布在我的博客上的文章清單。以下是我如何透過IFTTT每天早上自動觸發我的Hugo靜態網站部署在Netlify上的方法。 注意：這個方法不僅適用於Netlify，也適用於其他提供手動部署Webhooks的服務供應商。 我有一份定期發布在我的博客上的文章清單，而我試著提前撰寫幾天的內容，為我無法寫作的時候或是需要休息的時候留出空間。 我認為保持一致性對於保持工作的動力很重要。過去兩個月，我每週一至週六都有發布文章，且我未來也想繼續這樣做，因為我真的很喜歡寫作。 我使用的是 Hugo 靜態網站生成器，並且托管在 Netlify 上。 這組工具組合非常棒，對於博客的設置我非常滿意。 今天我在山上遠足時，突然意識到已經超過我通常發布文章的時間，而我之前已經安排好的博客文章也沒有發布。 使用 Hugo，我可以設定一個未來的發布日期，當使用 hugo CLI 命令重新構建網站時，這篇文章不會包含在生成的 HTML 中，因為它是未來的文章。 Netlify 有這個很不錯的概念，在他們的伺服器上構建 Hugo 網站，所以我只需要觸發一個新的部署。通常情況下，當我將任何內容推送到 GitHub 時，Netlify 會自動警報並在一分鐘內進行部署。 但在這種情況下，我需要手動觸發Netlify上的部署，所以我使用iPhone登錄並點擊“觸發部署”。 這個動作在服務器端使用Hugo重建靜態網站，我只需將手機放回口袋。 博客文章上線了🎉，我只需在Twitter上發一條推文。 在步行時，我意識到我可以自動化所有這些工作。 我只需要每天早上9點自動觸發一個部署。於是我在Netlify界面上尋找他們是否有任何定時循環部署的自動化功能。雖然沒有這樣的功能，但他們有一個WebHook端點。 因此，我尋找了一些可以每天對WebHook進行POST設置的工具。 我使用了Zapier（也可以），但之後轉用了 IFTTT，因為它可以免費提供相同的功能。 在Netlify上，我建立了一個WebHook URL 這給了我一個自定義的URL來呼叫： 我在IFTTT上創建了一個每天早上8點提醒的"applet"： 並且在其中設定一個Web請求來觸發Netlify上的部署鉤子。 現在，我只需要創建內容，按計劃日期將其推送到GitHub，就不用再擔心手動部署了！🎉 👨🏼‍💻

一个从零开始到部署的使用 Hugo 开始技术博客的详细教程 Hugo 是一个非常好的工具，可以用来开始一个博客。 我自己在这个博客中使用了 Hugo 已经超过 2 年了。我喜欢使用 Hugo 的原因有几个。 它是简单，无聊，灵活，快速。 最重要的原因是它是简单的。你不需要学太多东西就可以开始使用。 你可以使用 Markdown 编写内容，这个格式允许我使用我最喜欢的编辑器（Bear）来写文章。 Hugo 是无聊的。不要误会，这是一件非常好的事情。作为一个开发者，我总是有冲动的想要不停地调整各种东西。Hugo 没有使用任何花哨的技术。它是用 Go 语言构建的，而 Go 是我最喜欢的语言之一，但这并不意味着我想要深入了解 Hugo 的内部工作方式，并改变它的工作方式。 Hugo 也没有展示任何炫酷或者下一代的东西，就像许多 JavaScript 框架经常会做的那样。 因此它非常无聊，这给了我很多的时间来做真正有用的事情，比如写内容。我专注于内容，而不是内容的展示方式。 话虽如此，Hugo 是非常灵活的。我用一个开源的主题开始了我的博客，然后随着时间的推移，完全改变了它。有时，我想在我的网站上做一些超出了普通博客范围的事情，而 Hugo 可以让我实现这些功能。 最后，我喜欢 Hugo 的另一个原因是它快速。为什么呢？首先，它的核心是 Go 语言，而 Go 语言以其非常快的速度而闻名。在 Go 的生态系统中，没有 100MB 依赖的概念。所有的东西都被设计得尽可能快速。此外，Hugo 不需要进行一些使用花哨技术时需要的繁琐操作。这是非常无聊的一个副产品。 好了，废话不多说。 Hugo 真的很棒，尤其是对于开发者来说，而且你愿意使用 Markdown 来写作的话。非技术人员可能会拒绝使用 Markdown，这是可以理解的。 此外，你还需要为使某些事情真正奏效而准备一个基于 Git 的工作流程。 在何处托管 Hugo 网站 Hugo 博客是完全静态的。这意味着你不需要自己托管服务器，也不需要使用特殊的服务。 Netlify、Now 和 GitHub Pages 是 3 个非常好的免费托管 Hugo 博客的地方。...

Netlify Edge功能是Netlify提供的一個非常有趣的功能，Netlify是一個流行的托管平台。 這個功能非常有趣，因為雖然Netlify以靜態托管聞名，但Edge功能允許您進行一些不太靜態的操作。 讓我們可以做到以下這些事情： 地理定位 本地化 A/B測試 重定向 …等等 它們與Netlify Serverless功能類似，只不過它們運行在Netlify邊緣（Edge）上，這意味著它們更接近用戶並在多個CDN位置運行，計算方式也不同（每月3百萬次呼叫，而不是每個站點每月12.5萬呼叫）。 要啟用Edge功能，請在您的網站存儲庫中創建一個netlify.toml文件（如果您尚未擁有），並添加以下內容： [[edge_functions]] function = "hello" path = "/hello" 其中function是netlify/edge-functions/下的文件名，不包括.js擴展名。 path是此功能將可用於的URL路徑。 然後，您可以在文件netlify/edge-functions/hello.js中編寫一個功能： export default () => new Response("Hello world"); Response是可用於將回應發送回客戶端的對象。 一旦您部署了存儲庫，就可以使用以下URL訪問其結果： https://<您的網站域名>/hello 試試看吧！ 在部署期間，您將在日誌中看到以下信息： 一旦部署完成，您將看到動態生成的帶有內容Hello, World!的頁面。 但是我建議您預先使用Netlify CLI的netlify dev在本地測試它們。請確保使用npm i -g netlify-cli將其更新到最新版本，否則它可能沒有啟用此功能。 您可以設置回應標頭，例如內容類型，通過將第二個參數傳遞給new Response()： export default () => new Response('Hello world', { headers: { 'content-type': 'text/html' }, }); Edge功能接收兩個參數：request和context： export default (request, context) => { //... }; 這兩個對象提供了一些有用的功能。 request允許您訪問所有request數據，它與使用Fetch API時獲得的請求對象相同。...

了解如何設置Netlify定時函數 Netlify定時函數使我們能夠進行一些有趣的事情。 以下是如何設置它們的方法。 在您的存儲庫中的netlify/functions目錄中創建一個無伺服器函數，例如test.js： netlify/functions/test.js exports.handler = (event, context) => { //做一些操作 return { statusCode: 200 } } 然後在netlify.toml中（如果還沒有創建此文件，請創建它），設置您希望此Netlify定時函數運行的頻率： [functions."test"] schedule = "@hourly" 或者您可以在函數本身中設置此頻率，而無需此條目： const handler = (event, context) => { //做一些操作 return { statusCode: 200 } } exports.handler = schedule('@hourly', handler) @hourly 每小時在0分鐘運行 @daily 每天在00:00運行 @weekly 每週日在00:00運行 @monthly 和 @yearly 也是可用的。 您還可以使用cron表達式，比如 5 4 * * * 或任何其他表達式（crontab guru 是您的好朋友） 您還可以使用 netlify functions:invoke test 手動調用函數，其中 test 是函數的名稱。 您可以根據不同的用例使用Netlify定時函數。 我設置了一個Netlify定時函數，每天自動部署存儲庫以發布一篇預先設定好的日程博客文章。...

這是我用來讓自己輕鬆一點的其中一個「技巧」。 有時候我會寫一些未來日期的文章，以便預定發佈。在像 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', }, })

要在 Netlify 函數 中獲取查詢參數，您可以在 handler 函數內訪問 event.queryStringParameters 物件。 例如，如果您有一個 email 查詢字串，您可以這樣訪問它： exports.handler = (event, context, callback) => { event.queryStringParameters.email // 使用該值進行一些操作 }