Learning AWS – Simple Static Website with S3 – Without CloudFront or 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
• Step 2: Configure S3 Bucket for Static Website Hosting
• Step 3: Upload files and folders
• Step 4: Setup DNS Records (Not Using Route53)
• Step 5: Test S3 Static Website

Step 1: Setup S3 Bucket

• Login to your AWS account and choose S3 as the service.
• Click “Create bucket”
  
• 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. 
  
• On the “Set Properties” just accept the defaults and click Next.
  
• 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.
  
• On the Review page just click “**Create Bucket”
  **
• Now that your bucket is created, let’s give it the proper permissions to serve web files.
  First click on your bucket’s name
  
• Once you click on the bucket’s name you will choose the Permissions tab. Then click on Bucket Policy.
  
• This is where you will paste the below code to give public permission to the bucket.
  Here is the code:</p>

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

• 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
  
• If you did this correctly you will be met with a Public Warning, but just remember that is what I wanted.
  

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.
  **
• Choose “Use this bucket to host a website” and type your index document. Click Save.
  ** My demo site will be using index document; **i****ndex.html**.
  
  **

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“.
  
• 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.
  
• Once your files are listed you can click** Next.
  **
• Now accept the default permissions by click **Next.
  **
• On the properties page just accept the defaults and click Next.
  
• 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/ </li>

  • Example of my DNS records
    </ul>

   

  Step 5: Testing

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