Host a Static Website

Host your simple marketing website or web application on AWS

Introduction

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.

See FAQs for more information >>

What You Will Learn

  • 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.

 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

 Tutorial Prerequs

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

Implementation

  • Create and connect repository

    To being this tutorial, you'll need to create and initialize a respository. The easiest way to do this is by using the command create-react-app. Install this package using the following command in your Command Prompt or Terminal.

    Already have a repository to connect? Skip to step c below.
    Want to deploy without connecting to a Git provider? Begin by clicking here.
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    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.

    a. Create a new GitHub repo for your app (link)

    Front End GitHub Repository Module 1

    b. Initialize git and push the application to the new GitHub repo executing the following commands in your command line interface:

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master

    c. To connect your repository, log in to the Amplify Console and choose Get Started under Deploy.

    1-gettingstarted

    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.

    2-connectrepository

    After you connect the repository service provider, choose a repository, and then choose a corresponding branch to build and deploy.

    3-repositorybranch
  • Confirm build settings

    For the selected branch, Amplify inspects your repository to automatically detect the sequence of build commands to be executed. Confirm your build settings and click Next.

    next-host
  • Save and deploy

    Review all of your settings to ensure everything is set up correctly. Choose Save and deploy to deploy your web app to a global content delivery network (CDN). Your front end build typically takes 1 to 2 minutes but can vary based on size of the app.

    8-saveanddeploy

Was this tutorial helpful?

Thank you
Please let us know what you liked.
Close
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.
Close

Host a static website with Amazon S3

You can also use Amazon S3 to host your static website. Hosting a static website on Amazon S3 delivers a highly performant and scalable website at a fraction of the cost of a traditional web server.

To host a static website on Amazon S3, configure an Amazon S3 bucket for website hosting and upload your website content. Using the AWS Management Console, you can configure your Amazon S3 bucket as a static website without writing any code. Depending on your website requirements, you can also use some optional configurations, including redirects, web traffic logging, and custom error documents.

For more information about hosting a static website on Amazon S3, including instructions and step-by-step walkthroughs, refer to the implementation guide.

Congratulations!

You successfully built a static web application on AWS! As a great next step, dive deeper into AWS Amplify and see the full set of tools and services for developing mobile and web apps on AWS.