使用 Surge 部署静态站点：综合指南

在部署静态网站时，Web 应用程序开发人员总是在寻找最新、最有效的工具来改进他们的网站。 一般而言，静态站点生成器 (SSG) 通过手动编码操作和完整的 CMS 即兴创作。 此设置非常适合大多数网站或 Web 应用程序项目，而不是服务器端处理。 由于这种趋势，开发人员正在切换到 webtask.io 程序来处理他们不同的服务器端点。 随着 Web 应用程序开发的一个重要趋势，本文详细阐述了开发人员为他们的静态站点和 无服务器 网络应用程序。

什么是静态网站生成器？

详细地说，使用 State Site Generators 的开发人员通过生成纯 HTML 网站来启动该过程。 由于纯 HTML，该站点主要使用原始数据和模板。 如前所述，原始数据也被归类为“降价文件”。 为了更好地理解，markdown 文件（链接：https://guides.github.com/features/mastering-markdown/）是使用 markdown 语言方言的通用文本文件。 纯文本格式包含用于创建文本格式的文本符号，包括粗体、斜体、缩进、标题和显示。

与动态网站不同，这些文件相对不需要编程知识，是创建网站的最基本类型。 因此，网站上的每个网页都有自己的 HTML 文件，其中包含固定的网站内容，可以在任何平台上为任何用户显示相同内容。 结果是一个传输到您的实时服务器的构建。

静态网站与动态网站

通过对比， 静态网站 基于客户端 HTML 和 CSS 代码。 当客户端从静态服务器网站发出请求时，HTML 文件会被整齐地打包到一个可以立即显示在访客设备上的网站中。 一些流行的静态站点生成器包括 杰奇，Github Pages 支持，以及 下一页。 相反，动态网站则依赖客户端和服务器端脚本语言。 对于某些示例，JavaScript（链接：https：//www.javascript.com），PHP（链接：https：//www.php.net）和ASP（链接：https：//www.w3schools.com/） asp / webpages_intro.asp）是“动态服务器端”脚本。 作为说明，与HTTP动态服务器一起运行会将文件发送到浏览器。 同时，每次最终用户调用页面时，生成器都会创建一个新的HTML文件。

什么是浪涌？

Surge是用于部署和托管静态网站和应用程序的服务。 您可以使用它来托管使用静态站点生成器构建的项目，例如 盖茨比, 杰基尔 任何使用 HTML、CSS 和客户端 JavaScript 构建的自定义项目也可以使用。 它的免费计划几乎适用于任何静态站点，并且只需在命令行中敲击几下键盘即可完成服务配置。 提供高级版本，其中添加了一些附加功能，例如自定义 SSL、密码保护等。

为什么要使用电涌？

Surge 是任何前端 Web 开发人员都应该使用的非常方便的工具。 它非常简单，您可以在几秒钟内在线发布静态站点。 所有网络发布都需要在命令行中输入一些命令，最好的部分是不需要投资。 此外，用户可以将个人域添加到他们的项目中，与其他用户共享项目，并创建 404 错误页面以将客户引导至其他网页。 Surge 具有其他流行的静态站点部署器所缺乏的一些独特优势（参见“Surge 和 Github Pages 的比较”）。

Surge是免费服务吗？

如上所述，Surge 使用起来不需要任何成本。 但是，有一个 Surge Professional 可以为愿意支付额外费用的用户带来更多好处。 该服务的高级版本起价为每月 30 美元。 具体来说，通过额外收费，您可以创建无限的专业项目、拥有自定义 SSL 以及使用 HTTPS 的安全网站。 此外，您还可以共享资源、在您的站点内开发重定向以及使用密码保护您的项目。

如果您发布源文件来创建小型或个人网站，免费计划应该足够了。 然而，对于经常依赖 Surge 发布项目的人来说，Surge Premium 也是一个明智的选择。

安装浪涌

安装 Surge 和设置帐户非常简单直观。 打开一个新的终端窗口并输入以下命令：

npm install –global浪涌

（注意：此步骤假定您的系统上已经安装了Node和npm。如果未安装，则可以从官方网站安装最新版本 Node.js网站.)

要检查Node.js.website是否正确安装，请转到命令行并输入“ node -v”作为状态。

在您第一次设置时，Surge 会要求您设置一个帐户。 唯一的要求是提供电子邮件地址和密码，然后验证您的电子邮件。 完成此步骤后，您将设置一个 Surge 帐户并准备好部署到他们的服务。

部署您的网站

要使用你的静态网站来Surge，首先要找到你要实现的项目目录的文件路径。 例如，我将实现一个位于 /Users/air/surge-test 的项目。

一旦知道要部署的目录的文件路径，请在终端窗口中运行以下命令：

浪涌

然后将显示您的用户名（即电子邮件地址）。 之后，您需要提供项目的文件路径：

输入完整的文件路径，然后按Enter。

浪涌程序将使用随机单词自动提供域名。 您也可以创建任何自定义域（如果尚未使用）。 输入您选择的域名，然后按Enter。

（注意：如果您输入的自定义域名已被占用，您将看到一条错误消息。
已中止 - 您无法发布到 [ ]

部署完成后，您会在终端中看到一条成功消息。 该项目的域名和 IP 地址将向您显示可以访问实时部署的位置。

在网络浏览器中输入域名，您现在应该可以看到自己的网站：

添加自定义域名

使用 CNAME 记录

默认情况下，Surge 将为您部署到其服务的任何网站提供自定义子域。 它看起来像 your-custom-domain.surge.sh。 您可以自定义和选择子域是什么（前提是它尚未被占用）。 您会希望将自定义域用于任何专业项目。

为此，您需要在域提供商的DNS面板中添加两个新的CNAME记录。 一个将具有@的主机名，另一个将具有www的主机名。 这两个CNAME记录都将指向以下IP地址：

na-west1.surge.sh

使用 A 记录

如果出于某种原因，您的域名提供商不允许 CNAME 记录，您可以设置 A 记录作为替代。 让 A 记录指向 IP 地址 45.55.110.124。

使用自定义子域

您还可以使用任何自定义子域指向 Surge，例如 sub.my-cool-site.com。 为此，您需要设置一个新的 CNAME 记录。 这应该导致与上面相同的 na-west1.surge.sh IP 地址，但这次主机名将是 *。 * 主机名是一个通配符。 除主域之外的任何子域都将有效并被允许。

激增计划将立即识别这些 DNS 更改。 在其他地方传播可能需要时间； 然而，通常情况下，它需要不超过 24 – 48 小时。

使用自定义域部署项目

一旦 DNS 设置生效，您就可以部署您的项目了。 您需要指明要使用的域。 为此，请在终端中运行 surge 命令。 首先指示项目的文件路径，然后是自定义域，如下所示：

浪涌文件路径/of/project a-cool-custom-domain.com

将自定义域绑定到项目

您可以将您的域绑定到项目，这样您就不必在部署时输入它。 您可以使用 echo 命令执行此操作，将其定向到 CNAME 文件，如下所示：

回声a-cool-custom-domain.com> CNAME

共享您的Surge项目

要授予其他 Surge 用户发布权限，您必须先发布您的项目。 然后，在命令行中键入 add 命令以通过电子邮件地址添加协作者。

激增–添加 collaborator@email.com

受邀参加您的项目并接受您的邀请的来宾现在可以将他们的源文件发布到同一域中。

列出浪涌项目

要查看您使用 Surge 发布的项目，请在命令行中输入这个简单的 Surge 命令。 这将生成所有项目的列表。

浪涌清单

添加自定义404错误页面

如果您更愿意用一个定制的 404 错误页面替换默认的 404 错误页面，您所要做的就是在您准备好部署新的 404 文件时向您的 Surge 项目添加一个 XNUMX.html 文件，只需命令 surge。

创建一个 .surgeignore 文件

与 Git 生态系统中的 .gitignore 文件一样，Surge 提供了它自己的忽略文件。 您可以设置 Surge 将在部署时忽略的文件和目录列表，这对于忽略可能仅在开发过程中相关的文件很有用。 任何您可以完全保密的内容也可以包含在这里。

要进行设置，请在项目文件夹的根目录中创建一个名为 .surgeignore 的新文件。 您可以在此文件中列出您想要忽略的任何文件和目录。 一些常见示例包括 node_modules、bower_components 等。 您还可以忽略与站点的生产版本无关的特定文件类型。 在扩展名（即 *.swp、*.psd 等）之前添加 *（通配符）将实现此目的。

从 Surge 中删除站点

如果由于某种原因您想要关闭网站，则可以使用喘振拆卸命令以及项目所在的域轻松完成此操作。

浪涌拆卸 your-domain.com

在尝试删除项目之前，请确保您的Surge版本已更新为最新版本。

Surge和Github页面的比较

与Surge类似，另一种流行的替代静态托管服务是 Github页面. 这项免费服务允许用户在 Github 存储库中托管他们的个人静态站点项目。 Github Pages 作为排名最高的静态托管服务之一，在各种级别的 Web 开发人员中享有极高的声誉。 可以构建两种类型的页面，“项目页面或用户和组织页面”，它们可以在域 github.io 下创建。 当然，您也可以自由使用自定义域。 Github 明确建议不应使用其托管服务发布任何用于商业目的的项目。 因此，虽然它可能无法容纳大型网站，但 Github Pages 非常适合非商业或个人用途。

项目页面与用户和组织页面之间存在细微差别。 项目页面可以从多个源位置发布，包括主分支和“GH-pages”分支。 如果没有自定义域，默认发布域为 https:// .github.io/。 另一方面，用户和组织页面位于 Github 存储库下的 master 分支中。 他们发布了域 https:// .github.io。

电涌的好处

虽然 Github Pages 无疑是一个强大的工具，但 Surge 提供了一些 Github Pages 所缺乏的好处。 这些好处之一是客户端路由。 在您的 Surge 项目中，如果客户请求不存在的路径，您可以将客户重定向到“备份”HTML 文件 (200.html)。 这是有益的，因为 Surge 将提供回退文件而不是显示令人震惊的 404 错误。

Surge 的另一个显着优势是用户可以在几秒钟内将任何新更改部署到他们的站点。 如上所述，只需在命令行中输入 surge 命令，您所做的任何更改都可以立即在线查看。 在测试实验期间特别有用，对用户网站的简单编辑更易于管理。 由于可以选择立即刷新网页，因此在网络浏览器中看到的变化更加明显。 或者，Github Page 用户将继续向他们的在线界面推送和提交更改，并与更长、更乏味的流程作斗争。 从长远来看，正确的静态站点可以防止软件开发人员混淆时间。

结论

总之，使用 Surge 部署静态站点是一个强大的工具，可以帮助简化您的开发过程并让您的网站快速启动和运行。 无论您是经验丰富的开发人员还是新手，Surge 都是一个用户友好且直观的平台，可以帮助您快速构建和启动您的网站。

从初始设置和配置到站点的部署和管理，Surge 提供了一套全面的功能和工具，可以轻松管理您的网站， 产生潜在客户 并确保其始终平稳运行。 凭借其强大的自动化功能和灵活的配置选项，Surge 是任何希望快速高效地构建和部署静态站点的人的绝佳选择。

总的来说，如果您正在寻找一种可靠且高效的方式来部署静态站点，那么 Surge 值得考虑。 凭借其直观的界面、强大的功能和有用的文档，Surge 是任何希望将其网站提升到一个新水平的开发人员的宝贵工具。 那么为什么不试试看它如何帮助您简化开发过程并将您的网站提升到一个新的水平呢？