Deploy a static website with AWS

The process of deploying a serverless website on AWS is simple, but information overload can quickly turn an easy task into a complicated and time-consuming process. Here is all you really need.

1. Assuming that you have already created an account with AWS, head over to services > S3
2. Click “Create Bucket” on the top left corner

2.a Name and Region: Enter a name for your bucket (e.g. example.com)

2.b Configure Options: Leave everything as is and move on to the next step

2.c Set Permissions: Un-check “block all public access”

2.d Review: No need to change anything here. Click “Create bucket”.

3. Back in your list of S3 buckets, you should see your newly created bucket. Click on it and make sure you are in the “Overview” panel.

4. Select “upload” and choose the HTML, CSS, or asset files that you need to upload. Now in the pop-up box click on “upload” again.

5. Switch over to the “permissions” tab and select “bucket policy”. You need to copy/paste this code snippet into the editor (replace the resource name “example.com” with the name of your bucket) and click on “save”.

{
   "Version":"2012-10-17",
   "Statement":[
      {
         "Sid":"PublicReadGetObject",
         "Effect":"Allow",
         "Principal":"*",
         "Action":[
            "s3:GetObject"
         ],
         "Resource":[
            "arn:aws:s3:::example.com/*"
         ]
      }
   ]
}

You should now see something like this…

This warning tells us that not everyone should be able to view our bucket items, but for a website, we obviously need to grant everyone “public read access”.

6. Now, switch over to the “properties” tab and click on “static website hosting”. My bucket hosting is already enabled, but yours will be disabled.

6.a From the options, select “Use this bucket to host a website”.

6.b For the “index document” type in the name of the HTLM file you uploaded in step 4 (in my case, my main file is “index.html”) so I’ll type in “index.html”

6.c For the “error document” type in “error.html” (for this example we didn't upload an error file but, in production, you should have a file where users get redirected to in case something goes wrong).

6.d Click “save”. You should now see “static website hosting” enabled (see step 6).

You’re done!

When you click on “Static website hosting” you should see an endpoint URL generated by AWS. When you click on it, you should be able to see your HTML file hosted in AWS.

If you want to change your domain from this http://example.com.s3-website-us-east-1.amazonaws.com/ to this http://example.com follow my next tutorial.