Build a Static Website using S3, Route 53 and CloudFront

Amazon AWS provides the perfect environment to build and host your website.  With Amazon AWS, you can quickly build a website that is secure and can scale to meet any work load.  Before we go through the details, lets take a second to look at what each part of the AWS stack provides:

• AWS S3 is where you store the files of your website.  This is where you put your HTML, CSS, JS, and any media files that you want to display.  It is important to note that S3 is a static file store, so you cannot use it to do any pre-processing (e.g. PHP).
• AWS CloudFront is the CDN for your site.  It globally distributes your files to AWS edge locations to speed up and scale your site.  CloudFront is also where you can attach and terminate your SSL certificate.  So, it is a key component in providing a secure website.
• AWS Route 53 provides DNS for your site.  Route 53 allows you to point a domain at your CloudFront distribution and take your site live.

1. Setup S3

Amazon makes it really easy to host your website using an S3 bucket.  To get started, you need to enable Static Website Hosting in your Bucket.  Navigate to your bucket.  Select the Properties tab.  Then, enable static website hosting (see screenshot below).  I typically chose index.html and error.html as the starting point and error document for the site.

Next, we need to make your bucket public.  Start by enabling public access in Permissions > Public Access Settings.  This allows you to apply a public ACL and public bucket policy to your objects.

Next create a public ACL to allow everyone to list objects.  Select Access Control List > Public Access > Everyone and select "List Objects" from the modal.

Finally, you can create a bucket policy to make all files added to the bucket public.  This is optional.  But, it does make it easier to not have to track public versus private files.  I prefer to think of all my buckets that host websites as being 100% public.  So, this make sense for me.  The key here it to ensure the bucket in the resource matches your bucket name.

That is it.  Your bucket should now be ready to host a static website.  Next, we will setup CloudFront to add an SSL certificate and enable efficient scaling of your site.

2. Setup CloudFront

CloudFront is a world class CDN built to deploy your content to edge locations.  This physically moves your site closer to your users.  By doing this, it makes your site load really fast.  To get started, navigate to CloudFront and select "Create Distribution".  Start by creating a web distribution in CloudFront.

Specify the S3 origin for your bucket.

Setup HTTPS policy and specify a TTL for your files in the cache.  The TTL is used to determine how often (in seconds) to refresh your distribution.

Select "Yes" for compressing objects.  This enables GZIP compression on your website.

Specify the CNAME for your distribution.  This should be the domain name of your site (mysite.com, www.mysite.com).

Create an SSL certificate for your domain and apply it to your distribution.

Specify index.html as the root object of the domain and click "Create Distribution".

3. Setup Route 53

Route 53 is Amazon's DNS service.  From Route 53, you can purchase domains and map them to resources in AWS.  To get started, navigate to Route 53 in your Amazon console and dreate a Hosted Zone for your domain.

Then for that hosted zone, create a Record Set.  Specify it as an Alias and set it to the CloundFront Distribution you created in your previous step.

That is it.  You should now have a super powered website powered by Amazon AWS.

Love this tutorial?  You should check out Fixture.  Fixture makes it easy to build and manage a static website on Fixture.  Get started with Fixture today!