Hugo Coder主题多页站点AWS Amplify部署路由问题解决

我正在使用Hugo Coder主题，基于其示例站点在AWS Amplify上部署测试。该站点在Netlify上通过netlify.toml的构建步骤可正常运行，但因其他依赖需部署到Amplify。

当前构建配置如下：

version: 2
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

构建日志显示站点已成功构建，首页可正常加载，但子路由无法访问。推测是重写与重定向配置问题，因为这不是单页网站，需要单独配置。查阅Amplify官方文档后，发现多页站点部署的相关指引不够清晰。

补充说明：Amplify文档提到会自动处理尾部斜杠与干净URL（如将/about/index.html转换为/about），但我的场景中该功能未生效，是否有办法强制启用？

1. 配置重写规则解决子路由访问问题 #

针对Hugo生成的静态站点，需要添加重写规则让Amplify正确映射子路由到对应的index.html文件。有两种配置方式：

方式一：通过Amplify控制台配置 #

进入Amplify控制台的站点设置，找到「重写与重定向」页面，添加以下两条规则：

• 源地址：</^[^.]+$/>，目标地址：/index.html，类型：重写
• 源地址：</^[^.]+/$/>，目标地址：/index.html，类型：重写

方式二：通过本地配置文件同步 #

在项目根目录创建amplify/backend/hosting/staticFiles/redirects.json目录及文件（目录不存在则手动创建），写入以下内容：

[
  {
    "source": "</^[^.]+$/>",
    "target": "/index.html",
    "status": "200",
    "condition": null
  },
  {
    "source": "</^[^.]+/$/>",
    "target": "/index.html",
    "status": "200",
    "condition": null
  }
]

2. 强制启用干净URL与尾部斜杠处理 #

Amplify的自动处理可能受Hugo站点配置影响，可通过以下步骤强制生效：

• 在Hugo配置文件（config.toml或config.yaml）中明确开启干净URL设置：

  # 全局禁用丑陋URL，启用干净路径
  uglyURLs = false
  relativeURLs = false
  
  # 针对文章类型设置永久链接格式（可选）
  [permalinks]
    post = "/:year/:month/:day/:slug/"
  

• 在Amplify的「重写与重定向」页面，开启「自动重定向」下的「追加尾部斜杠」和「移除尾部斜杠」选项；也可添加额外重定向规则补全：

  [
    // 保留之前的重写规则
    {
      "source": "/:path",
      "target": "/:path/",
      "status": "301",
      "condition": null
    },
    {
      "source": "/:path/",
      "target": "/:path",
      "status": "301",
      "condition": null
    }
  ]
  

3. 对齐Hugo版本避免构建差异 #

Amplify默认使用的Hugo版本可能与本地不一致，导致输出格式异常。可在构建命令中指定对应版本（推荐使用extended版本，适配Coder主题的SCSS需求）：

version: 2
frontend:
  phases:
    build:
      commands:
        - wget https://github.com/gohugoio/hugo/releases/download/v0.120.0/hugo_extended_0.120.0_Linux-64bit.tar.gz
        - tar -xzf hugo_extended_0.120.0_Linux-64bit.tar.gz
        - ./hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

将版本号替换为你本地使用的Hugo版本即可。

内容的提问来源于stack exchange，提问作者sudhishkr