要配置并使用Surge进行静态文件托管，您可以按照以下步骤操作

安装Surge CLI

确保你已经安装了Surge CLI工具，可以通过以下命令安装：

npm install -g surge

创建Surge配置文件

在您的项目根目录下创建一个名为surge.yaml的文件，内容示例如下：

app: 你的项目标题
  source: ./dist/
  build:
    command: npm run build
  start:
    command: npm start
deploy:
  prod:
    url: https://yourdomain.com
    target: [yourdomain.com].surge.sh
    source: ./dist/
    build: true
  staging:
    url: https://yourdomain-staging.com
    target: [yourdomain-staging.com].surge.sh
    source: ./dist/
    build: true

填写配置文件

• app部分：：项目标题。

  • source：构建后的文件目录。
  • build.command：构建命令，如npm run build。
  • start.command：启动命令，如npm start。

• deploy部分：

  • 为每个环境（如prod、staging）配置：
    • url：生成的公共URL。
    • target：指向Surge的子域名。
    • source：构建后的文件目录。
    • build：是否需要构建前先清理旧文件。

部署项目

在命令行执行：

surge --config surge.yaml

• 输入包名：项目的包名（通常是项目的主目录）。
• 选择环境：如-e prod或-e staging。

测试部署

部署完成后,Surge会生成一个公共URL，打开浏览器，访问该URL确认项目是否正常。

管理项目

通过Surge CLI，可以管理项目：

• 查看日志：surge --log
• 重新部署：surge --update
• 停止部署：surge --stop

高级配置（可选）

• 多环境支持：在deploy中添加更多环境，使用不同的url和target。
• 自动化构建：通过crond或schedules设置定期构建。
• 域名配置：在target中自定义域名结构，如app.yourdomain.com。

故障排除

• YAML错误：检查文件格式，确保缩进正确。
• 构建问题：检查构建命令是否正确。
• 权限问题：确保文件夹和文件有正确的读写权限。

通过以上步骤,您可以成功配置并使用Surge来托管和部署静态项目，确保项目快速发布并易于管理。