Learning AWS – Simple Static Website with S3 – Without CloudFront or Route53
2018, Jun 23
###
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.
- Example of my DNS records