aws S3 static website walk through no cloudfront no route53

Objective:

Setup an S3 bucket to host a simple static website. This tutorial will not cover CloudFront or Route53. I will use Godaddy for DNS. My test website will be a free website template called Global, which is free to download from GitHub.

Overview:

 

Step 1: Setup S3 Bucket

  • Login to your AWS account and choose S3 as the service.
  • Click “Create bucket”
    a picture of a button to create aws s3 bucket inside the aws console
  • READ CAREFULLY — You will now give your bucket a name. The bucket name needs to be the domain of the website you want to host. Type your bucket name and click next.
    I want to host a website with the domain of www.hiredatagram.com so that is the name I give to my bucket. 
    name-s3-bucket-name-the-same-as-static-url-domain-name
  • On the “Set Properties” just accept the defaults and click Next.
    s3 bucket properties page for static s3 site
  • On the Set Properties Page you will just accept the default permissions. This gives your AWS user read/write access and no one else.
    Just click Next and accept the defaults.
    s3 screenshot of s3 static website tutorial
  • On the Review page just click “Create Bucket”
    s3 static website tutorial screenshot of bucket summary
  • Now that your bucket is created, let’s give it the proper permissions to serve web files.
    First click on your bucket’s name
    s3 bucket name with www name
  • Once you click on the bucket’s name you will choose the Permissions tab. Then click on Bucket Policy.
    s3 static bucket policy setup tutorial
  • This is where you will paste the below code to give public permission to the bucket.
    Here is the code:

    { "Version":"2012-10-17", "Statement":[{ "Sid":"PublicReadGetObject", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::example.com/*" ] } ] }
  • You will need to modify this code by replacing the example.com text with your bucket name. So, in my case, I will put www.hiredatagram.com
    s3 bucket policy screenshot for s3 static website
  • If you did this correctly you will be met with a Public Warning, but just remember that is what I wanted.
    s3 static website public warning message

Step 2: Configure S3 Bucket for Static Website Hosting

Now I need to configure the bucket to serve static websites.

  • Go to the bucket and click on the Properties tab and click on Static website hosting.
    setup static website hosting on aws s3 bucket
  • Choose “Use this bucket to host a website” and type your index document. Click Save.
    My demo site will be using index document; index.html.
    s3 bucket properties with cname info

My bucket is now configured, but I still need to put a website in there. In the next section, I will upload my HTML files.

 

Step 3: Upload files and folders

  • Inside your S3 bucket click on “Overview” and click “Upload“.
    upload files to s3 static website
  • Now you can drag and drop files to this window, or click Add Files. 
    I usually select the files on my PC and drag and drop them to upload to the S3 bucket. I usually have more success this way as it will create any nested folders or directories.
    Drag and drop files to s3 bucket it will create folders
  • Once your files are listed you can click Next.
    set permissions on s3 bucket for s3 static website
  • Now accept the default permissions by click Next.
    s3 static bucket website tutorial screenshot
  • On the properties page just accept the defaults and click Next.
    s3 static website default properties storage clasess
  • On the Review screen click Upload.

    Now, I just have to wait for the files to upload. In the next section, I will set up the DNS records so that www.hiredatagram.com resolves correctly.

 

Step 4: Setup DNS Records (Not Using Route53)

This test domain I’m using has its DNS hosted on Godaddy.com. I went to Godaddy and choose my appropriate domain and went to manage DNS.

  • You need to create 1 CNAME record pointing at the S3 bucket.
  • To get the S3 bucket address go to the bucket and click on the Properties tab and click on the Static Website Hosting. 
  • The endpoint address will be the value for your CNAME record to point to.
  • WWW will be the value of the CNAME Host value.
  • When you create your CNAME Points to record remember to remove the HTTP:// and make sure there are no trailing slashes.
  • Good example: www.hiredatagram.com.s3-website-us-east-1.amazonaws.com
  • Bad example: http://www.hiredatagram.com.s3-website-us-east-1.amazonaws.com/

  • Example of my DNS records

 

Step 5: Testing

When I point my browser to www.hiredatagram.com the static website loads correctly.

S3 fully tested static website