How to deploy a static React site to AWS Amplify

So, in the past month, I decided to level up my cloud knowledge. I’ve taken a few courses, earned the AWS Cloud Practitioner certification, and am currently preparing for the AWS Solutions Architect Associate exam. In this journey, I’ve been experimenting with various AWS services, and today, I’m excited to share a project I recently built—a static website hosted on AWS Amplify!

This project is perfect for beginners who want to learn how to host a static website with modern CI/CD workflows and minimal overhead. Let’s dive into it.

What You’ll Learn

In this guide, you’ll learn how to:

• Deploy a static website using AWS Amplify.
• Set up continuous deployment from a Git-based repository.
• Understand the benefits of using Amplify for hosting static sites.

Step 1: Set Up Your Local Environment

To kick things off, let’s create a simple React application using Vite. Open your terminal and run the following commands:

npm create vite@latest staticwebsite -- --template react
cd staticwebsite
npm install
npm run dev

Here is the React application I have built:

You can find the code here: https://github.com/isaactony/TungaWeb

Once done, open the local development server link to confirm the app is running.

Step 2: Push Your Code to GitHub

1. Sign in to GitHub and create a new repository named **tungaio**.Or any other name you want

2. Initialize Git in your local project folder:
   

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin <your-repo-url>
   git push -u origin main

This step ensures that your code is available in a repository that AWS Amplify can connect to.

Step 3: Start Building with AWS Amplify

1. Sign in to the AWS Amplify Console.
2. Click ** Deploy App** and select GitHub as the source provider.

Select GitHub as the source provider and click Next.

1. Authenticate with GitHub when prompted and grant AWS Amplify the necessary permissions to access your repository.

Step 4: Configure and Deploy

1. Choose your repository and branch (e.g., main) in Amplify.

1. Keep the default build settings (Amplify will auto-detect your framework and build commands).
2. Click Next.

1. Click Save and Deploy to start the deployment process.

AWS Amplify will automatically build and host your site on a global CDN. The build process typically takes 2–5 minutes.

Step 5: Visit Your Live Website

Once the build completes, you’ll see a Visit deployed URL button. Click it to view your live static website! Each time you push changes to your repository, Amplify will automatically deploy updates.

Why AWS Amplify?

AWS Amplify is a fantastic choice for hosting static websites because:

• It offers a Git-based CI/CD workflow for seamless deployments.
• Your website is delivered via Amazon CloudFront, ensuring fast and reliable performance.
• Amplify provides low-cost hosting, often within AWS Free Tier limits.

The site is now live

Now that your site is live, you can explore adding features like:

• Custom domains.
• Serverless backend using AWS Amplify’s API, Auth, or Storage modules.

Feel free to share your deployment experience or ask questions in the comments below. Happy building!

Comments

[Thomas Nixon]

Awesome guide to using AWS Amplify 👏 If you are looking for more control with infrastructure as code and a serverless backend you can try the open-source framework Baseline github.com/Baseline-JS/core

[Peshal Bhardwaj]

AWS Amplify and Azure static web apps are the best way in my opinion to get static site host.