Deploy a Gatsby site
In this guide you will learn how to deploy a Gatsby site with Amplify hosting.
If you haven't already, install the Gatsby CLI:
1# Using YARN2yarn global add gatsby-cli3
4# Using NPM5npm install --global gatsby-cli
Next, create a new site and change into the new directory:
1gatsby new gatsby-amplify2cd gatsby-amplify
Next, create a new Git repository and copy the URI of the repo to your clipboard.
Now, initialize the new repository within the root of your project and push the code to Git.
1git init2git remote add origin email@example.com:username/project-name.git # or your git repository location3git add .4git commit -m 'initial commit'5git push origin main
Visit the Amplify Console and click GET STARTED under Deploy.
Next, choose the Git provider that you are using and click Continue:
In the next screen, choose your repository and branch and click Next:
In the App build and test settings view, click Next:
Finally, click Save and deploy.
Once your site has successfully deployed, you should see three green checkmarks:
To view the live site, click on the automatically generated URL given to you by the Amplify Console.
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. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html, except for the specific file extensions specified in the regular expression.
To set up rewrites, follow the guide on AWS Amplify Hosting's documentation.