Create Static Website Using AWS

Modern websites are more dynamic than ever, yet you may still be surprised what a static website (simple directory of html/css/javascript/image files) can do.  Not only does it require minimal set up, it's also super fast with a simple CDN on top.

In this tutorial, we will show you how to host a static website using AWS services like S3 and CloudFront.

Prerequisites:

• AWS account.  If you don't already have it, is it super easy to sign up at https://aws.amazon.com/account/sign-up It also comes with free tier quota so you can play with the services without having to pay a penny.
• Static website in a local directory.  For the purpose of this tutorial, we assume your website is in a local directory called mysite/  and there are the following files in it:
• index.html
• style.css
• main.js
• favicon.ico
• mypic.jpg
• A desktop app to upload your local website directory to S3, you can use CyberDuck or other similar tools.  You can also use AWS CLI command-line tool if you feel comfortable with it.
• (Optional) If you want your website to use your own domain name, you need to register a domain name with your own Domain Registrar (like GoDaddy, NameCheap, etc.). For easier explanation, let's assume your domain is acme.com

Steps:

1. Go to S3 console and create a new S3 bucket, you should use the domain name as the bucket name.  E.g., in this example, bucket name should be "www.acme.com"
2. Make sure you disable "Block public access" setting for the new bucket
3. Make sure you disable "Block public access" setting at your S3 account level as well.  You can still enable this setting for specific buckets if you like.
4. Enable "Static website hosting" for your new bucket, choose "Host a static website" as Hosting Type, and type "index.html" as Index Document, and Save
5. Once you done the above, you should find the "bucket website endpoint" at the bottom of your new bucket's properties tab.  Note down this URL for later use.
6. Go to the permissions tab of your new bucket and edit the "Bucket Policy", fill in something like this (replace the bucket name with your own bucket name)

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

7. Now your new bucket is ready, upload your static website directory to the new bucket using CyberDuck.  You should configure CyberDuck connection with your own AccessKeyId and SecretAccessKey (they act like username and password to connect to S3).  You can find them under your AWS account's Security Credentials or AWS IAM
8. After upload, you should see be able to see the pages from browser using the "bucket website endpoint" URL noted before, e.g., http://www.acme.com.s3-website-us-east-1.amazonaws.com/
9. (Optional) if you want to access the website through your own domain name like http://www.acme.com, you would need to create a CNAME entry with your DNS provider that points "www.acme.com" to the bucket website endpoint "www.acme.com.s3-website-us-east-1.amazonaws.com".  Please consult your DNS provider on how to do this, most likely your domain registrar already provides a simple web UI for your to edit the DNS entries.
10. Now you can access your static website with URL like http://www.acme.com

Congratulations!  You just created a static website, now share it with your friends :).

In the next part we will discuss how to add a CDN on top of this static website.