Amplify hosting configure

Website
Configures the S3 bucket for static web hosting, the user can set the index doc and error doc, both are set to be index.html by default. Therefore you can handle your folders in the index.html.

CloudFront
Configures the CloudFront content delivery network (CDN), the user can configure TTLs (Time To Live) for the default cache behavior, and configure custom error responses.

Publish
Configures the publish ignore patterns (just like what’s in the .gitignore) for the publish command, the publish command will ignore directories and files in the distribution folder that have names matching the patterns.

Stages

For the amplify-category-hosting implementation, this is the default

• DEV: only S3 static web hosting
• PROD: S3 and CloudFront

CloudFront can be added or removed in your project at any time by the amplify hosting configurecommand.
It can take time to create and replicate a CloudFront Distribution across the global CDN footprint, in some cases 15 minutes or more. Therefore the Amplify CLI provides a DEV configuration with an S3 static site only when prototyping your application and a PROD configuration when you are ready to deploy in production. Note that the DEV stage using S3 static sites does not have full HTTPS end to end so it is only recommended for prototyping your app.

In AWS AMPLIFY Console you can use Redirects

Redirects enable a web server to reroute navigation from one URL to another. Common reasons for using redirects include: to customize the appearance of URL, to avoid broken links, to move the hosting location of an app or site without changing its address, and to change a requested URL to the form needed by a web app.

Redirects for Single Page Web Apps (SPA)

Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. To solve this we set up a 200 rewrite to allow the SPA router to handle the routing of the URL.

Using Redirects - AWS Amplify

For Gatsby,

If we look at starter page there is a gatsby-config.js file and in this file you can include

gatsbyjs/gatsby-starter-default

To host sites somewhere other than the root of their domain in Gatsby.

pathPrefix

It’s common for sites to be hosted somewhere other than the root of their domain. Say we have a Gatsby site at example.com/blog/. In this case, we would need a prefix (/blog) added to all paths on the site.

gatsby-config.js

module.exports = {
  // Note: it must *not* have a trailing slash.
  pathPrefix: `/blog`,
}

Then pass --prefix-paths cmd option to Gatsby.

gatsby build --prefix-paths

NOTE: When running the command without the --prefix-paths flag, Gatsby ignores your pathPrefix.

To link between pages in a Gatsby site.

The Gatsby <Link /> component is for linking between pages within your site. For external links to pages not handled by your Gatsby site, use the regular HTML <a> tag.

Here’s an example of creating a link between two pages in a Gatsby site.

Open a page component (e.g. src/pages/index.js) in your Gatsby site. Import the <Link /> component from Gatsby. Add a <Link /> component below the header, and give it a to property, with the value of "/contact/" for the pathname:

import React from "react"
import { Link } from "gatsby"
export default () => (
  <div>
    <Link to="/page-2/">Page 2</Link>
  </div>
)

Centralizing your site’s navigation and Creating dynamic navigation in Gatsby

At times you will want to be able to edit your website’s navigation in response to a change in requirements. To achieve this, you can use Gatsby to dynamically generate your navigation. Where you store the data for your navigation can be anywhere — a backend API, CMS, headless CMS or even the filesystem.

You can usegatsby-config.js to store the data for your links. gatsby-config.js is a file used for configuring Gatsby, located in the root path of every Gatsby project. A plain old JavaScript object is exported from this file; this object contains the siteMetadata object which you can query through graphql when generating your static pages.

Below in the link there is a guide will use the Gatsby starter project gatsby-starter-default, which can be downloaded through the Gatsby command line interface tool using the command gatsby new [project-name] https://github.com/gatsbyjs/gatsby-starter-default.

https://www.gatsbyjs.org/docs/centralizing-your-sites-navigation/

Also there is a nice youtube tutorial although it is gatsbyjs v1 it still mostly applies to gatsbyjs v2 just check there are some differences in layouts and navigate to which you can see those at gatsby docs.

https://www.youtube.com/watch?v=0L_pwKnFplc&list=PLLAZ4kZ9dFpMXuwazIt4mWtTuqOHdjRlk&index=1