👋 大家好!Silvestar 向我们推荐了这篇文章,因为他对 JAMstack 和它为前端开发带来的所有机会都充满了热情。我们想强调这一点,因为这里提到的某些观点可能看起来像是赞助内容,而 Netlify 确实是 CSS-Tricks 的赞助商,但它完全独立于 Netlify。
作为一名 2019 年的 JAMstack 开发者,我感觉自己生活在一个梦幻世界里。所有这些现代框架、工具和服务使我们作为 JAMstack 开发者的生活非常愉快。事实上,Chris 会说 它们赋予我们超能力。
然而,有一个特定的平台凭借其强大的产品和功能脱颖而出——Netlify。如果您经常阅读 CSS-Tricks,您可能已经非常熟悉 Netlify 了。关于它有很多文章。甚至有两个使用它的 CSS-Tricks 微型网站。
这篇文章更像是一封给 Netlify 的情书,以及它所做的一切很棒的事情。我决定坐下来列出我最喜欢的 Netlify 特点。这就是我想在这里与大家分享的。希望这不仅能让你了解 Netlify 的能力,还能帮助你充分利用它。
您可以自定义网站的 Netlify 子域。
在 Netlify 上创建新项目时,您首先需要选择
- 从 Git 提供商选择一个仓库,或者
- 上传一个文件夹。
项目应该在几分钟内准备就绪,您可以立即开始根据自己的需求进行配置。首先选择网站名称。
网站名称确定您网站的默认 URL。只允许使用字母数字字符和连字符。
Netlify 会为新项目随机创建一个默认名称。如果您不喜欢这个名称,可以选择您自己的名称,并将其设置为更容易记住的名称。

例如,我的网站名称是 silvestarcodes
,我可以通过访问 silvestarcodes.netlify.com 来访问我的网站。
您可以在 Netlify 上管理所有 DNS。
如果您正在设置一个实际的网站,您可能想要添加一个自定义域。从域管理面板,转到自定义域部分,点击“添加自定义域”按钮,输入您的域,然后点击“验证”按钮。
现在您有两个选择
- 将您的 DNS 记录指向 Netlify 负载均衡器 IP 地址
- 让 Netlify 处理您的 DNS 记录
对于第一个选项,您可以 阅读自定义域官方文档中的完整说明。
对于第二个选项,您应该在您的域注册商处添加或更新名称服务器。如果您还没有购买域名,您可以在仪表板上直接注册它。
Netlify 提供一项名为 Netlify DNS 的服务,用于配置 DNS 记录。
配置自定义域后,您可以在 Netlify 仪表板上处理您的 DNS 记录。

如果您想为您的 dev
分支设置一个开发子域以预览您网站的开发变更,您可以自动完成。从您网站设置部分的域管理部分,选择 dev
分支,Netlify 会自动为您添加一个新的子域 dev
。现在您可以通过访问开发子域来查看预览。

您可以为另一个网站配置子域。要实现这一点,请创建一个新的 Netlify 网站,输入一个新的子域作为自定义域,Netlify 将自动为您添加记录。
作为 DNS 管理蛋糕上的糖霜,Netlify 允许您为您的域自动创建 Let’s Encrypt 证书……完全免费。
您可以将代码片段注入页面,这有点像标签管理器。
代码片段注入是另一个非常棒的功能。我主要用它来插入分析,但您也可以用它来添加响应行为的元标签、favicon 标签或 Webmention.io 标签。

插入代码片段时,您可以选择将代码片段追加到 <head>
块的末尾,或者追加到 <body>
块的末尾。
每次部署都拥有一个永久的唯一 URL。
Netlify 为每次成功构建创建唯一的预览链接。这意味着您可以轻松比较对您网站所做的修改。例如,这是今年 1 月我的网站的链接,而这是 去年 1 月的链接。注意样式和内容的变化。
在 Phil Hawksworth 的演讲中,他称此功能为 不可变的原子部署。
它们是不可变的部署,永远存在。
—— Phil Hawksworth
我发现此功能在完成任务和向客户发送预览链接时非常有用。如果有人负责处理与 Git 相关的任务,例如发布到生产环境,这些预览链接可以方便地了解合并后会发生什么。您甚至可以为每个拉取请求设置预览构建。
Netlify 允许您进行最干净、最负责任的 A/B 测试。
如果您想对您的网站进行 A/B 测试,您会发现 Netlify 使运行 A/B 测试变得非常简单。Netlify 上的拆分测试允许您从不同的 Git 分支显示您网站的不同版本,而无需任何黑客行为。

首先添加并发布一个带有所需更改的单独分支。从“拆分测试”面板,选择要测试的分支,设置拆分百分比,然后开始测试。您甚至可以在分析代码中设置一个变量来跟踪当前显示哪个分支。如果您还没有这样做,您可能需要激活分支部署。
Netlify 的拆分测试允许您将流量分配到您网站的不同部署中,直接来自我们的 CDN 网络,而不会降低任何下载性能,也无需安装任何第三方 JavaScript 库。
—— Netlify 文档
到目前为止,我一直在我自己的网站上使用 A/B 测试来测试一些不同的功能
- 测试联系表单的不同版本
- 显示不同版本的横幅广告
- 跟踪用户行为,例如热图
如果您想跟踪拆分测试信息,您可以为此目的设置流程环境变量。您可以了解更多关于它的信息 在官方文档中。最好的部分?大多数 A/B 测试服务使用客户端 JavaScript 来完成它,这不可靠,并且对性能不利。在负载均衡器级别进行此操作要好得多。
有许多通知选项,例如电子邮件和 Slack。
如果您希望在 Netlify 项目发生某些事件时收到通知,您可以从各种通知选项中进行选择。我更喜欢为每次成功或失败的构建收到电子邮件。

如果您使用的是 Gmail,当您将鼠标悬停在 Gmail 收件箱中的邮件上时,您会注意到每次成功构建的“查看实时更改”链接。这意味着您可以在不打开邮件的情况下打开预览链接。当您的构建出现任何问题时,还有其他链接,例如“查看完整部署日志”或“查看使用详细信息”时,您的计划接近其限制。太棒了!

如果您想为第三方服务设置一个钩子,您只需要一个 URL(JWS 密钥令牌是可选的)。Slack 钩子在 Netlify 中内置,如果您知道您的 Slack 接收传入 Webhook URL,可以在几秒钟内设置好。
结论
上面提到的所有功能都是免费的 Netlify 计划的一部分。我无法想象为提供如此流畅的体验所付出的努力。但 Netlify 并没有止步于此。他们正在引入越来越多的新功能,例如用于本地开发的 Netlify Dev CLI 和 部署取消。Netlify 已成为现代静态网站开发中一个毋庸置疑的改变游戏规则的平台,并且它是静态网站发展和流行的重要组成部分。
从表面上看,这似乎是一个很酷的功能,但问题是他们甚至不提供删除部署的功能。这意味着如果你部署了某些内容,后来又决定不再使用它,并且不想让它公开,除了完全从 Netlify 中删除项目之外,你绝对没有其他办法可以删除它。
不过总的来说,我也非常喜欢 Netlify,我认为它是一个非常棒的服务。
你说得对。但为了所有其他很棒的功能,我愿意做出这个牺牲。
另外,我不确定唯一的 URL 是否会以任何方式损害你。你知道这种情况何时会发生吗?
我有一个 Netlify 帐户,但没有找到代码片段注入功能。我在哪里可以找到它?
它位于设置 → 构建和部署 → 后处理 → 代码片段注入。
明白了!谢谢。
对于代码片段注入,你提到使用它来进行分析或响应式行为。你能解释一下吗?
好的,你可以在关闭
<body>
标签之前使用代码片段注入插入 Google Analytics,但你也可以在关闭<head>
标签之前插入代码。例如,你可以在<head>
部分插入响应式元标签:<meta name="viewport" content="width=device-width, initial-scale=1">
。我并不推荐这样做,但理论上你是可以的。