Setting Up a Static Website on AWS S3 for Newbies
Tags: aws, cloudcomputing, amazonwebservices, explainlikeimfive
Published: 2019-02-25 17:34:50

---
title: Setting Up a Static Website on AWS S3 for Newbies
published: true
description: Beginner-friendly tutorial on setting up a static website on AWS using S3, Route 53, and CloudFront
tags: AWS, Cloud Computing, Amazon Web Services, explainlikeimfive
---
![Setting Up a Static Website on AWS S3 for Newbies](https://thepracticaldev.s3.amazonaws.com/i/ek2v4re17ini1nfk7ydj.png)

**Originally published at [AWS Newbies](https://awsnewbies.com/s3-website-route-53-cloudfront/)**.
___

Here, we’ll set up a static website (think *HTML* and *CSS* and no moving parts) hosted on **Amazon Web Services (AWS)** **S3**, which can be accessed by your own domain, at *domain.com*, protected with SSL (think *https://* instead of *http://*).

Anyone who types in *domain.com* on their browser will be forwarded to *https://www.domain.com* so that you can have that fancy “Your connection is secure” lock!

![SSL Secured!](https://thepracticaldev.s3.amazonaws.com/i/2n67ywwb9r39hhl5ryiz.jpg)

If you are completely new to AWS, I recommend you take a look at the [Intro to AWS for Newbies eBook](https://awsnewbies.com/intro-to-aws-ebook/) before you embark on this.  If you just want to figure out how to create that static website, read on!

We will go over setting up the website where the domain name is registered through **Route 53**, AWS's Domain Name Registrar.
___

# Setting up Website with domain registered at Route 53

## Purchase domain in question using Route 53
* Go to **Route 53** and purchase a new domain for $12 by following the prompts

## Request SSL certificate from AWS Certificate Manager (ACM)
* Go to **AWS Certificate Manager (ACM)** and request a certificate for *www.domain.com*
* Include *domain.com* as another domain to protect with the same certification
* Select DNS Validation and validate via “Create record in Route 53“
* Confirm after 30 minutes or so that validation was completed

## Create the website in S3
I went over how you can upload a static website on **S3** here: [How to host a Static Website with S3](https://awsnewbies.com/static-website-s3/)

* Go into S3 and create 2 buckets: *domain.com* and *www.domain.com*
* Set *domain.com* S3 bucket to redirect to *www.domain.com*
![Static Website Hosting: Redirect](https://thepracticaldev.s3.amazonaws.com/i/5dbkzym668665z3muu3o.png)
* Protocol should be set to *https*
* The website will be hosted in the *www.domain.com* **S3** bucket
* In the *www.domain.com* bucket, set **Bucket Policy** to [THIS](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html):
```
{
    "Version":"2012-10-17",
    "Statement":[
        {
            "Sid":"PublicReadGetObject",
            "Effect":"Allow",
            "Principal": "*",
            "Action":["s3:GetObject"],
            "Resource":["arn:aws:s3:::www.domain.com/*"]
        }
    ]
}
```

Here’s AWS’s documentation on how this would work: [Setting up a Static Website using Custom Domain](https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html).

## Create new CloudFront Distributions
![CloudFront Distribution Setup](https://thepracticaldev.s3.amazonaws.com/i/hjnr85k8mo1748e4dn5r.png)

### Create CloudFront Distribution for *domain.com*
* Go to CloudFront and create a new distribution
* Choose *“Web”* for delivery method
* Get the Endpoint URL for *domain.com* S3 bucket to set as **Origin Domain Name** instead of the bucket from the dropdown menu
* Go to… **S3 -> Bucket Name -> Properties -> Static website hosting**
  * Looks something like: *http://xyzwxyz-12rdklfj3e-us-east-1.s3-website-us-east-1.amazonaws.com*
![Static Website Hosting on S3](https://thepracticaldev.s3.amazonaws.com/i/vwroxu9ifoi34eq865h9.png)
* Set the SSL cert to the certificate just verified with **ACM**
* Make all *HTTP* redirect to *HTTPS*
* Enter *domain.com* as **CNAME**
* Leave everything else as default
* This will also take a while to go through

### Create another CloudFront distribution for *www.domain.com* with same settings
* Enter *www.domain.com* as CNAME

Here’s AWS’s documentation on how to create this distribution: [Speed Up Your Website with Amazon CloudFront](https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-cloudfront-walkthrough.html).

# Create A records in Route 53
Go back to **Route 53** and create **A Records** to point to the new **CloudFront** distributions.

* Create **A record** for *domain.com* and point it to the **CloudFront** distribution for *domain.com*
* Create **A record** for *www.domain.com* and point it to the **CloudFront** distribution for *www.domain.com*
* Both can be found in the dropdown under *“alias”*

Here’s AWS’s documentation on how this works: [Using Route 53 for DNS](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/migrate-dns-domain-in-use.html).

# What Does the Architecture Look Like?
I was streaming this setup on [Twitch](https://www.twitch.tv/hirokotech), and I realized it’ll be nice to have a diagram of the architecture of what we’re building!

We’ve set up 2 sets of **CloudFront** distributions and **S3** buckets to route all different kinds of traffic to all eventually end up at *https://www.domain.com*.

Below, you can see how the redirects are working for all different ways someone might try to access your website using different combinations of *www.*, *http://* and *https://*.

![Architecture of Static Website on AWS](https://thepracticaldev.s3.amazonaws.com/i/lv44s0u5r8tmmw3phl90.jpg)

#That's It!
And that's it! The whole process should take 30 minutes to 1 hour (mostly because it takes time for these things to load. This was originally published on my **Introduction to AWS** website, [**AWS Newbies**](https://awsnewbies.com).  You can read the original [HERE](https://awsnewbies.com/s3-website-route-53-cloudfront/).

If you are interested in other introductory Cloud Computing and AWS documentations and resources, here are some of my other projects:
* [Introduction to AWS for Non-Engineers: 1 Cloud Concepts](https://www.lynda.com/courtwise-tutorials/Introduction-AWS-Non-Engineers-1-Cloud-Concepts/808676-2.html) | Video Course on [Lynda.com](https://www.lynda.com/courtwise-tutorials/Introduction-AWS-Non-Engineers-1-Cloud-Concepts/808676-2.html)
* [Intro to AWS for Newbies](https://awsnewbies.com/intro-to-aws-ebook/) | eBook on [awsnewbies.com](https://awsnewbies.com)
* [Intro to AWS for Newbies](https://awsnewbies.com/intro-to-aws/) | *Free* Newsletter Course on [awsnewbies.com](https://awsnewbies.com)