Hosting a Static Website on Amazon S3

[00:01] In this lesson, I'm going to show you how to host a static website on Amazon S3. I'm logged into my AWS Management Console and I'm going to choose the S3 application.

[00:10] If you're going to host this on a new domain name, it can get tricky because the Amazon S3 bucket names have to be globally unique. Before you purchase a domain name, you need to make sure that both the domain name is available, and also that that Amazon S3 bucket name is available.

[00:27] I'll show you what I mean. I'm going to create a bucket. The bucket name is going to be staticsite.willbutton.co and that's on my existing domain name. For the region, you can choose a specific region or use US Standard, and then, I'm going to click Create. Now, if that bucket name hadn't been available, I would have gotten an error.

[00:45] I'm going to create a second bucket, as well, and call it logs.willbutton.co. I'll use that to store the logs for the website.

[00:54] By default, all S3 buckets are created private. We need to set this bucket up so that it can be accessed publicly. I'm going to expand the Permissions pane and then add a bucket policy to do that.

[01:08] The first element required is the Version statement. There's only two possible values you can specify for this. You can specify 2012-10-17, or we can specify 2008-10-17. What that represents is the version of the policy language that your statement's using. The October 17th, 2012 version is the latest current version for AWS.

[01:31] Next, we'll supply our Statement policy itself starting with the Sid. Next, we specify the Effect which is going to be set to Allow. Then, the Principle is set to * to allow anyone to access it. The Action allowed is going to be s3 GetObject. The Resource allowed is going to be arn aws s3 and the name of my bucket.

[01:56] This is a really generic bucket policy, because it's not applying any restrictions. It's granting anyone access to it. You can actually copy and paste this and use it anywhere you need to. The only thing that you would need to change would be the name of your bucket here.

[02:11] We can save that. There's an error there, because I misspelled the word Principal. We'll change that to the correct spelling. Save it again.

[02:20] Now, to set up the logging for the bucket, I'll expand the Logging pane, enable it, and then for Target Bucket, I'll type in logs.willbutton.co. The Target Prefix specified here will be the name of the folder that it's going to write the logs to inside of my target bucket. Now, I can upload my files to the bucket. I'll choose the bucket and add my files.

[02:47] Then I also need to create two folders, one for the img on this static website and one for the CSS. I'll create the img folder and the CSS folder and go into the img folder and upload the img file to it. Then, return to the CSS folder and do the same to upload my CSS file.

[03:10] Now, I need to configure the bucket as a website. I'm going to click on the Properties tab, expand Static Website Hosting, enable website hosting, and then, fill out two pieces of information here. The Index Document is going to be index.html and the Error Document is error.html. Save that.

[03:28] If I scroll back up just a little bit, you see the Endpoint here which is the URL for this static website hosted on S3. If I copy that, open a new tab, paste that in, and here's our website hosted on S3.

[03:43] The last thing I want to do is set that up so that website is available through my own DNS name. I'll go into Route 53 in the AWS Console. Select my domain name and create a new record set. We're going to call it staticsite.willbutton.co. It's going to be a CNAME that points to the S3 endpoint.

[04:05] Hit Create. If I open a new tab and type in the URL, staticsite.willbutton.co, the site loads. I now have a static site hosted on Amazon S3 available through my own domain name.