Surge 是一个快速的静态网站发布工具，使用 Surge 可以将前端项目部署到云端，让用户可以通过公共链接访问您的应用。在本篇教程中，我们将学习如何使用 npm 包 surge 来进行静态网站的发布与部署。
安装及配置 surge
首先，我们需要安装 surge 包。打开终端，并输入以下命令：
npm install --global surge
接着，我们需要进行账户注册和登录，以便能够访问 surge 服务。在终端中输入以下命令：
surge login
输入你的邮箱和密码即可完成登录操作。
部署静态网站
现在，我们已经成功安装并登录了 surge，接下来，我们就可以开始部署我们的静态网站了。
首先，在项目目录下执行以下命令：
surge
然后，按照提示输入要上传的路径，如
./build，以及想要为您的应用指定的公共链接，如https://myapp.surge.sh。最后，输入您的电子邮件地址以获得电子邮件通知（如果有）。
现在，您的应用程序已经成功地部署在了 Surge 上，并且可以通过您所指定的公共链接进行访问。
自定义域名
如果您想使用自己的域名来访问应用程序，可以使用 Surge 的自定义域名功能。只需按照以下步骤操作：
在您的 DNS 控制面板中添加一个 CNAME 记录，将您的域名指向
surge.sh。在终端中执行以下命令：
surge domain add yourdomain.com
其中，
yourdomain.com是您要使用的自定义域名。然后，输入您的电子邮件地址以获得电子邮件通知（如果有）。
现在，您可以通过您的自定义域名访问您的应用程序了。
高级用法
除了基本的部署和自定义域名功能外，Surge 还提供了一些高级用法，例如：
密码保护：通过添加密码保护，您可以限制对您的应用程序的访问权限。只需在终端中执行以下命令即可：
surge --add auth
自定义 404 页面：您可以为您的应用程序添加自定义 404 页面。只需创建名为
404.html的 HTML 文件，并将其放置在您的项目目录中即可。自定义 HTTP 响应头：您可以为您的应用程序设置自定义 HTTP 响应头，例如缓存控制、CORS 等。只需在您的项目目录中创建名为
.surgeignore的文件，并添加以下内容：/path/to/file.js | Cache-Control: max-age=3600 /path/to/file.css | Access-Control-Allow-Origin: *
总结
Surge 是一个非常方便和易于使用的静态网站发布工具。在本教程中，我们学习了如何安装、配置和使用 surge，以及如何自定义域名和实现一些高级用法。希望这篇文章能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40868