frontendaws-amplifyhugostatic-site

MultiPage Hugo Site Deployment with AWS Amplify


I am trying to deploy a site using this theme https://github.com/luizdepra/hugo-coder/, and to be specific I am testing with this example site on AWS Amplify. I have already tried Netlify, and the netlify.toml has the right build steps. It works great with Netlify.

BUT, I want to deploy to AWS Amplify - as I have other dependencies. This is the definition I am using:

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

The build logs actually show that the it successfully built the site. Even the site loads fine, but the issue is with the routes. Navigating to other sub-routes does NOT work.

I believe this is a problem with

Rewrites and redirects

And I may have to configure this section separately as this is NOT a single page website. I am reading this and the guide is not clear for a multi-page site deployment.

Whats the correct way to deploy this on Amplify?


EDIT#1

Trailing slashes and clean URLs

To create clean URL structures like about instead of about.html, static site generators such as Hugo generate directories for pages with an index.html (/about/index.html). Amplify automatically creates clean URLs by adding a trailing slash when required. The table below highlights different scenarios:

Amplify indicates it automatically handles this ^, but in my case it seems to not happen. Is there a way to force this on amplify?


Solution

  • The issue was resolved as follows:

    BUT ... AWS Amplify did its job correctly. The real issue was with single page settings for react in the Rewrites and redirects. Removing those settings helped get the routing issue addressed, as Amplify handles these automatically.