Surge是一个强大的静态网站生成工具，适合构建个人网站、项目展示页面或简洁的网页应用。以下是使用Surge的分步指南

安装Surge

确保你的系统已经安装了Node.js和npm，如果没有安装，先下载并安装：

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

对于macOS或Linux,可以按照上述步骤安装，Windows用户可以从Node.js官方网站下载安装。

安装Surge：

npm install -g surge

初始化Surge站点

在终端或命令提示符中运行以下命令：

surge init

按照提示输入你的域名（如example.com）和配置信息，如果你没有域名，可以选择使用Surge提供的免费子域名。

设置项目结构

创建一个包含public目录的文件结构：

mkdir -p public

将项目文件（如HTML、CSS、JavaScript）放入public目录中，建议在public下创建config.js文件进行个性化配置。

配置站点信息

编辑public/config.js，设置你想部署的站点信息：

module.exports = {
  "surge": {
    "site": "your-website-name",
    "domain": "your-domain.com",
    "port": 800,
    "https": true,
    "access": ["your.ip", "another.ip"],
    "cname": "your-domain.com",
    "cnames": {
      "api.example.com": "your-api-ip"
    }
  }
};

部署网站推送到Surge：

surge push public

在浏览器中访问https://your-website-name.surge.sh即可看到你的网站。

使用命令行工具

• surge push public: 推送最新内容。
• surge build public: 生成静态文件。
• surge clean public: 清理缓存。
• surge help: 查看所有命令。

高级配置

• 多环境配置：在public/config.js中创建多个配置文件（如config.dev.js和config.prod.js），根据环境自动选择配置。

  const environments = {
    dev: {
      "surge": {
        "site": "your-website-name",
        "domain": "your-domain.com",
        // 其他配置
      }
    },
    prod: {
      "surge": {
        "site": "your-website-name",
        "domain": "your-domain.com",
        // 其他配置
      }
    }
  };
  module.exports = environments;

• CI/CD集成：将Surge集成到CI工具（如TravisCI）中，自动化测试和部署流程。

注意事项

• 免费用户限制：Surge提供免费使用，但有限量（如访问次数和带宽），需要升级到Pro版才能无限制使用。
• 流量限制：免费账户可能有限制，确保项目流量在限制内。

文档和资源

• 阅读Surge的官方文档。
• 关注Surge的GitHub仓库。
• 参加社区和论坛,如Discord或Stack Overflow。

通过以上步骤,你可以轻松上手Surge，构建高效的静态网站，享受快速部署和无缝更新的便利。