1.安装Surge

使用npm安装Surge工具：

npm install -g surge

创建配置文件

在项目根目录下创建或更新surge.json文件：

{
  "project": "my-project",
  "source": "dist",
  "domains": ["example.com"],
  "https": true,
  "interval": "1h",
  "command": "npm run build"
}

配置项目信息

• project：项目名称,用于识别您的项目。
• source：默认发布目录,通常是构建后的静态文件目录。
• domains：数组,指定要部署的域名。
• https：设置为true，生成Let's Encrypt证书,启用HTTPS。
• interval：自动更新的时间间隔，格式为"Xh"或"Xd"（小时或天）。
• command：部署前的预执行命令,例如构建命令。

运行Surge命令

• 发布到生产环境：

surge my-project --prod

• 发布到测试环境（临时服务器）：

surge my-project --preview

• 同时发布多个域名：

surge my-project --domain example.com --domain another.com

集成到GitHub Actions

在仓库的.github/workflows/下创建新的YAML文件：

name: Deploy to Surge
on:
  push:
    branches: [ 'main' ]
env:
  SURGE_PROJECT: my-project
  SURGE_DOMAIN: example.com
  SURGE_HTTPS: true
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Surge Deploy
        uses: actions/peace/surge-deploy@v2
        with:
          command: surge
          project: ${{ env.SURGE_PROJECT }}
          domain: ${{ env.SURGE_DOMAIN }}
          https: ${{ env.SURGE_HTTPS }}

使用Docker镜像运行Surge

创建Dockerfile：

FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install surge
COPY . .
CMD ["surge", "my-project", "--prod"]

运行Docker镜像：

docker build -t surge-container .
docker run -v $(pwd):/app surge-container

自动化部署（可选）

在surge.json中添加interval,如：

"interval": "1d"

测试配置

运行以下命令列出配置信息：

surge my-project --config surge.json

确保所有域名和HTTPS设置正确,发布后访问域名验证。

进阶配置

• 多个项目：在surge.json中添加projects数组：

"projects": [
  { "name": "project1", "source": "dist1", "domains": ["domain1.com"] },
  { "name": "project2", "source": "dist2", "domains": ["domain2.com"] }
]

• 环境变量：在surge.json中添加env字段：

"env": {
  "API_KEY": "your-api-key"
}

• 额外命令：在surge.json中添加before和after命令：

"before": "echo 'Building...'",
"after": "echo 'Deployed!'"

常见问题

• 证书问题：确保域名解析正确,可能需要等待CNAME记录更新。
• 权限问题：检查文件夹权限,确保Surge有写入权限。
• 多环境配置：可以通过不同的surge.json文件或命令行参数处理。

通过以上步骤，您可以轻松配置并使用Surge进行静态网站的部署,自动化您的开发流程。