This tutorial assumes that you have AWS CLI setup on your workspace. If you have not done that already you can follow this link and do it before we proceed. Make sure the credentials you use have full s3 permissions.

Step 1 : Create an S3 Bucket

Use the following command to create an S3 bucket by providing a unique bucket name and the region you want to host your site on.

aws s3api create-bucket --bucket <UNIQUE_BUCKET_NAME> --region <AWS_REGION> --create-bucket-configuration LocationConstraint=<AWS_REGION>

Step 2 : Setup Static Hosting Configuration

Once we have the S3 bucket ready we need to update the bucket configuration to make it static hosting ready.

aws s3 website s3://<YOUR_BUCKET_NAME> --index-document index.html --error-document error.html

--error-document error.html from the above command is totally optional. This is used to redirect the users to error.html file there are any errors, mostly 404. If you do not provide an error.html file S3 reroutes the user to index.html.

Step 3 : Setup Public Access Policy for your bucket

By default S3 buckets and files(objects) are private. Since this bucket is used for public access we need to add a Public Access Policy to the bucket.

Step 3.1 Generate S3 Public Access Policy

Generating Policies is easy using this policy generator tool created by AWS. I got a template for you here.

{
  "Id": "Policy1633924240424",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1633924238442",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*",
      "Principal": "*"
    }
  ]
}

Save this JSON object in a file with a name something like s3_public_access_policy.json.

Step 3.2 Attach S3 Public Access Policy to your bucket

aws s3api put-bucket-policy --bucket <YOUR_BUCKET_NAME> --policy file://<PATH_TO_THE_JSON_FILE>

DONE!

Your Static site hosting on s3 is ready, now all you need is to build and push your code to s3 bucket.

Step 4 : Deploy your code to s3 bucket.

Below command will try to sync your local folder with the s3 bucket.

aws s3 sync <PATH_TO_YOUR_CODE> s3://<YOUR_BUCKET_NAME>

I have been working on a React Application, I added a script to my package.json file to automate my deploys. So I quickly grabbed this for you. You can Add this script to your package.json file in you React App and update your s3 bucket name.

"deploy": "react-scripts test && react-scripts build && aws s3 sync build/ s3://<YOUR_BUCKET_NAME>"

The above code is a three series command. First it will run the test command, if everything runs smooth, the command will build the code and sync the build folder with your s3 bucket.

If you are using the above script in your package.json file you can Deploy your code with the command

npm run deploy

yarn deploy

You can access your website from below URL

http://<YOUR_BUCKET_NAME>.s3-website.<AWS_REGION>.amazonaws.com/

If you are stuck at any step feel free to reach out to me. Always happy to help a fellow developer.

Have fun. Build something awesome.