Surge介绍：全面指南与使用教程 – wiki大全

作者： /

Surge介绍：全面指南与使用教程

在当今快速迭代的Web开发领域，快速部署静态网站对于前端开发者、原型设计者和单页应用（SPA）的构建者而言至关重要。Surge.sh 正是这样一款高效且便捷的命令行界面（CLI）工具，它允许你轻松地将静态网站发布到全球内容分发网络（CDN），极大地简化了部署流程。

什么是 Surge.sh？

Surge.sh 是一款专注于静态网站发布的免费托管服务。它通过简单的命令行操作，将你的HTML、CSS、JavaScript文件以及其他静态资源快速部署到高性能的CDN上，确保你的网站在全球范围内都能获得快速的访问速度。无论是个人项目、技术演示、文档站点还是复杂的单页应用，Surge.sh 都能提供稳定可靠的部署方案。

Surge.sh 的优势

选择 Surge.sh 有以下几个引人注目的理由：

  • 极致的部署简化：部署一个网站通常只需要在项目目录下执行一个简单的命令——surge。
  • 慷慨的免费层级：Surge.sh 提供免费服务，支持无限次发布、自定义域名以及为 .surge.sh 子域名提供基础的SSL加密。
  • 无缝的自定义域名支持：你可以轻松地将自己的域名绑定到部署在 Surge.sh 上的项目。
  • 自动 SSL 加密：所有部署到 .surge.sh 子域名的网站都自动获得免费的基础SSL证书，确保数据传输安全。
  • 全球 CDN 加速：你的网站会被分发到全球的CDN节点，显著提升加载速度和用户体验。
  • 开发者友好特性：Surge.sh 支持 pushState（对 SPA 友好）、自定义 404 错误页面以及清洁 URL（不带 .html 后缀），为开发者提供了极大的便利。

准备工作

在安装和使用 Surge.sh 之前，请确保你的系统已安装 Node.js 和 npm（Node Package Manager），因为 Surge.sh 是通过 npm 包分发的。

安装 Surge.sh

要全局安装 Surge.sh，请打开你的终端或命令提示符，并执行以下命令：

bash
npm install --global surge

安装完成后，你就可以在任何目录下使用 surge 命令了。

基础部署教程

让我们通过一个简单的示例来演示如何使用 Surge.sh 部署一个静态网站。

  1. 创建示例静态网站：
    首先，创建一个新的项目目录（例如 my-static-site），并在其中添加一个 index.html 文件。

    html
    <!-- my-static-site/index.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 Surge 站点</title>
    <style>
    body { font-family: sans-serif; text-align: center; margin-top: 50px; }
    </style>
    </head>
    <body>
    <h1>你好，Surge.sh！</h1>
    <p>这是一个使用 Surge 部署的简单静态网站。</p>
    </body>
    </html>

  2. 导航到项目目录：
    在终端中，切换到你的项目目录：

    bash
    cd my-static-site

  3. 运行 surge 命令：
    执行部署命令：

    bash
    surge

  4. 账户创建/登录：
    如果你是首次使用 Surge，系统会提示你输入电子邮件地址和密码来创建免费账户。这是一个一次性过程。

  5. 确认项目路径并选择域名：
    Surge 会自动检测当前目录作为项目路径。通常你可以直接按回车键确认。接着，它会建议一个随机的 .surge.sh 子域名。你可以接受这个建议，也可以输入你想要的子域名（例如 my-awesome-project.surge.sh）。

  6. 部署和验证：
    确认域名后，Surge 将开始上传你的文件并部署网站。部署完成后，它会提供一个你的网站的实时 URL。在浏览器中访问这个 URL，你就能看到部署成功的网站了。

使用自定义域名部署

Surge.sh 允许你免费使用自己的自定义域名。

  1. 配置 DNS 记录：
    你需要登录你的域名服务商，在 DNS 设置中添加一条 CNAME 记录：

    • 将 @（根域名）和 www 主机名指向 na-west1.surge.sh。
    • 如果你的 DNS 提供商不支持 apex 域名的 CNAME 记录，你可以改用 A 记录，将其指向 45.55.110.124。

  2. 部署时指定自定义域名：
    有两种主要方式来告诉 Surge 使用你的自定义域名：

    • 通过 CLI：在运行 surge 命令时，使用 --domain 标志指定你的自定义域名：
      bash
      surge --domain your-custom-domain.com
      或者，在交互式部署过程中，当提示输入域名时，直接输入你的自定义域名（例如 www.your-custom-domain.com）。

    • 使用 CNAME 文件：在你的项目根目录下创建一个名为 CNAME（无扩展名）的文件。文件中只需简单地写入你的自定义域名。Surge 在部署时会自动读取并使用这个域名。

      “`

      my-static-site/CNAME

      www.your-custom-domain.com
      ``
      然后，只需在项目目录中运行      surge` 命令即可。

Surge.sh 的核心功能

  • .surge.sh 子域名免费 SSL：所有部署到 Surge.sh 默认子域名的项目都自动获得 HTTPS 支持。对于自定义域名，可以通过升级到 Surge Plus 来获取自定义 SSL 证书。
  • 支持 SPA 的 pushState：对于依赖客户端路由的单页应用（如使用 React Router 或 Vue Router），你可以在项目根目录创建一个 200.html 文件。Surge 会为任何不直接匹配文件的路由提供此文件，让你的 SPA 能够处理内部路由。
  • 自定义 404 页面：若要提供自定义的“页面未找到”体验，只需在项目根目录创建一个 404.html 文件。Surge 会自动为任何不存在的路径提供此文件。
  • 忽略文件：你可以通过在项目根目录创建 .surgeignore 文件来阻止某些文件或目录被部署。此文件的工作方式类似于 .gitignore。Surge 也会自动忽略 node_modules 和 .git 等常见的开发文件。
  • 清洁 URL：Surge 会自动处理清洁 URL。例如，如果你的文件是 about.html，它将可以通过 /about 访问，而无需 .html 扩展名。

更新你的网站

要更新已部署的网站，只需在本地对文件进行修改，然后再次在项目目录中运行 surge 命令。Surge 会检测到更改并重新部署更新后的文件。如果使用了自定义域名，你可以再次指定它，或者依赖 CNAME 文件。

撤销项目

如果你需要撤销或取消发布一个网站，请在终端中导航到你的项目目录，并运行以下命令：

bash
surge teardown

系统会提示你确认要撤销的域名。

总结

Surge.sh 为前端开发者提供了一种直接、高效的静态网站发布方式。其易用性、免费的自定义域名支持以及内置的各项功能，使其成为快速将Web项目上线的绝佳选择。无论是小型项目、原型还是需要快速验证的单页应用，Surge.sh 都能助你一臂之力。

滚动至顶部