Netlify

如何在 Netlify 重寫中處理尾斜線問題

Netlify 有一個很棒的功能，稱為 rewrites，可以讓我創建許多重複的頁面。但是有個限制。在 Netlify 中，我們可以通過將這些頁面添加到專案的公共根目錄下的 _redirects 文件（例如在 Hugo 中是 public/_redirects）來進行重寫。我將它用於一些網站。假設我在 content/original 下有一堆頁面，我可以透過以下方法進行重寫： /copy/\* /original/:splat 200 這樣，當我訪問網址 /copy 時，內容實際上是儲存在 https://mysite.com/original，但網址並不會改變。雖然 _redirects 命名中有「導向」的意思，但實際上它是一個重寫，因為我使用的是 200 狀態碼。如果我使用了 301 狀態碼，那麼這就是一個 301 導向。無論如何，我遇到的問題是：沒有辦法自動在網址末尾添加尾斜線。因此，如果你訪問 /copy 和 /copy/，並且在圖片和連結中使用相對 URL，沒有尾斜線的 URL 會導致 404 錯誤和圖片無法正常顯示。我在靜態網站生成器中尋找解決方案，看看是否可以以其他方式實現重寫，但最終我找到的解決方案在客戶端實現。而且非常簡單。我只需在頁面底部添加以下 JavaScript 代碼： <script> (function() { if (!location.href.endsWith('/')) { window.location = location.href + '/'; } }()); </script> 這樣，如果網址末尾沒有尾斜線，頁面會立即重新載入，並在末尾添加尾斜線。這個過程非常迅速，對使用者來說幾乎是不可見的。

如何在Netlify functions中使用環境變數

一個關於如何在Netlify functions中使用環境變數的簡要指南。要在 Netlify Functions 中使用環境變數，可以訪問 process.env 變量： process.env.YOUR_VARIABLE 您也可以在JS文件的開頭使用對象解構，使代碼更加精簡： const { YOUR_VARIABLE } = process.env; 因此，在程序的其餘部分中，您只需要使用 YOUR_VARIABLE。您可以通過Netlify管理介面來設置這些變量（您也可以將它們添加到代碼庫中，但我建議使用Netlify界面，這樣您的Git存儲庫中就不會有任何機密信息）。注意：這種方法不適用於Netlify Edge Functions，僅適用於在AWS Lambda上運行的Netlify“常規”Functions。對於Netlify Edge Functions，您需要使用 Deno.env.get()，像這樣： Deno.env.get('YOUR_VARIABLE') 示例： export default () => new Response(Deno.env.get('YOUR_VARIABLE'))

如何在Netlify函数中使用ES模块

在存储库的根级package.json文件中添加： "type": "module", 现在，不再使用： exports.handler = async (event, context, callback) => { } 而是使用： export async function handler(event, context) { } 而且，任何时候使用： callback(null, { statusCode: 200, body: html, }) 现在使用： return { statusCode: 200, body: html, }

如何在本地測試 Netlify Functions

我有很多網站都是在 Netlify 上託管的，其中一些使用了一項名為 Netlify Functions 的功能。可能是因為他們提供了極佳的靜態託管服務，所以我最喜歡的功能是 Netlify Functions。您只需添加一個帶有導出函數的 JavaScript 檔案，用於處理 URL 的請求，然後完成設置。您幾乎可以做任何事情，我將它們用作小型實用工具，用於可視化我所需的內部數據，或者執行“連接點”的操作，即將我運營業務所使用的不同工具「黏合」在一起。如果您想了解更多資訊，請查看我的 Netlify Functions 教程。在這篇文章中，我想特別談談如何在本地測試 Netlify functions。有天我需要進行更改一個正在運行中的 Netlify Function，該函數用於處理註冊我的 Bootcamp 的人員，但我不想干擾正在進行的運營業務，以免給客戶造成問題。我之前已經在「實時」環境中測試過這個函數，確保一切運行正常，但現在我有了不同的需求。以下是我的解決方法：首先，安裝 Netlify CLI npm install -g netlify-cli 然後，在網站文件夾中執行以下命令： netlify functions:serve 這樣就可以在本地提供服務的無服務器功能，使用的端口是 9999。您只需要使用類似以下的 URL 來訪問它們： http://localhost:9999/.netlify/functions/<name> 通過使用 Insomnia 發送虛擬 POST 請求，您可以測試它們。這種方式測試函數還會抓取您在 Netlify 控制台中設定的任何 Netlify 環境變數，所以它就像在 Netlify 上運行它一樣。

如何建立您的網站的 staging 版本

在 Netlify 上部署基於 GitHub Pull Request 的網站版本的逐步教程我當時正在準備推出一門課程，我需要在「發布日期」上完成登陸頁面，但同時又不更改我當時對外公開的版本。我使用的是 Netlify，它可以從 Git 分支自動部署網站，我的情況是在 GitHub 上進行託管。我將記錄這個過程。其他基於 Git 存儲庫進行 CI/CD 的託管提供商可能也有類似的工具。 Netlify 會自動為 Pull Requests 創建部署預覽。所以，我創建了一個新的分支，我稱之為 launch，然後在該分支上進行工作，添加了一些提交，然後我創建了一個 Pull Request，GitHub Desktop 讓這個過程變得非常簡單：在我發送 PR 後，Netlify 開始進行持續集成/持續交付流程：轉到 Netlify 網站後，我可以看到它自動選取了 Pull Request 分支並開始了部署預覽：幾分鐘後，我得到了一個新的網站 URL，我利用它進一步準備課程上線，而主域名仍然指向 master 分支的代碼。

如何從 Netlify 函數返回 HTML

不使用 return { statusCode: 200, body: '測試', } 而是使用 return { statusCode: 200, headers: { 'Content-type': 'text/html; charset=UTF-8', }, body: '<body style="background-color: black;"><h2 style="color: white; padding-top:200px; text-align: center; font-family: system-ui">測試</h2></body>', }

將部落格托管到 Cloudflare Pages

正如我在 YouTube 上发布的视频中所预测的那样，上周我将部落格从 Netlify 迁移到了 Cloudflare Pages。我有一个主要的原因，那就是带宽费用。从去年七月开始，我每个月都需要支付 Netlify 的费用。我很感谢 Netlify 为我提供的服务，但我必须结束这种情况。每次我要支付额外的带宽费用就是 20 美元。从 2020 年 7 月开始，一直到 2021 年 10 月，我一共支付了 340 美元才能保持部落格运行。部落格是消耗最多带宽的事物。这是一个早就应该改变的决定。我通常会对这样的决定犹豫不决，因为这是一个大的改变。我不想改变本已运行得很好的东西。我也不想每年花费 240 美元，而有些服务可以免费提供相同的服务。于是乎，Cloudflare Pages 登场。他们提供免费的带宽以及基本相同的服务。 Netlify 是一个出色的 JAMStack 服务商，提供了很多我甚至都没有使用到的功能，比如高级团队功能、身份验证、表单、分割测试等。而我只是使用其中的基本功能：部署静态网站而已。 Cloudflare Pages 更加精简。它没有那些功能，但却提供了两个 Netlify 不提供的东西。首先是免费的分析功能。Netlify 也有分析功能，但我需要付费每月 9 美元，这不是我想要的。另一个是，Netlify 有 7 个 CDN 节点，而 Cloudflare Pages 有超过 200 个。这意味着网站在全球更多地方加载得更快。我在视频中详细介绍了我迁移到 Cloudflare Pages 的过程，所以在这里我不再赘述。如果你对此感兴趣，请观看视频。到目前为止，我对这次迁移非常满意。我首先将部落格迁移到了 Cloudflare Pages，然后也将一些用于课程的网站迁移到了那里，因为它们是子域名，我让 Cloudflare 自动处理了所有的配置。但是我还有很多其他网站托管在 Netlify 上，它们可能会一直留在 Netlify 上。...