Host a Static Website

Host your simple marketing website or web application on AWS

Introduction

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 Amazon CloudFront and Amazon 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:

An AWS account: if you don't already have one follow the Setup Your Environment tutorial.
Your AWS profile configured for local development.
Installed on your environment: Nodejs and npm.
Familiarity with git and a Github account.

Implementation

AWS Experience

Beginner

Time to Complete

10 minutes

Cost to Complete

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 Amazon Route 53

Prerequisites

AWS Account with administrator-level access* Sign up for AWS.
Git provider: You can use AWS CodeCommit (included in the AWS Free Tier) or GitHub.

[*]Accounts created within the past 24 hours might not yet have access to the services required for this tutorial.

Get help

Troubleshooting Amplify

Last updated

July 16, 2024

Step 1: 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. 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
2. 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
Step 2: 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. Sign in to GitHub at https://github.com/.
2. 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.
3. 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
Step 3: 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. Sign in to the AWS Management console in a new browser window, and open the AWS Amplify console at https://console.aws.amazon.com/amplify/apps.

2. Choose Create new app.
3. 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.
4. 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.
5. Leave the default build settings and select Next.

Amplify inspects your repository to automatically detect the sequence of build commands to be invoked.
6. Review the inputs selected, and choose Save and deploy to deploy your web app to a global content delivery network (CDN).

AWS Amplify will now build your source code and deploy your app at https://...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.

7. Once the build completes, select the Visit deployed URL button to see your web app up and running live.
Step 4: 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. In the Amplify console, in the left-hand navigation for the staticwebsite app, choose App settings, and select General settings.

2. In the General settings section, choose Delete app.