How to host a static website with AWS S3 and SSL using CLoudFront
Tags: aws, s3, hosting, ssl
Published: 2020-03-22 17:40:01

![Map](https://dsc.cloud/blackpanda/09.S3Hosting.png)

This article was first published on [razcodes.dev](https://razcodes.dev/ "razcodes.dev")

## Prerequisites

To follow this article, you will need to have an AWS account. You can create one [here](https://aws.amazon.com/free "AWS").

Note that while creating an account with AWS you are eligible for the free tier for your first year, some of the setup will not be free. It is always a good idea to setup a billing alarm first thing after you create your account, and you can do so by following [this article](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/monitor_estimated_charges_with_cloudwatch.html "AWS Billing alarm").

You will also need to have a domain name. If you don't, you can register one using a registrar like [Google Domains](https://domains.google.com "Google Domains"), or another one of your choice. You can also register your domain directly with AWS using Route53 once you login. I like having the domain name in a different place, just because I am not 100% sure I will stay with this hosting solution forever, so I feel this gives me the flexibility to move around and experiment easier.

## Setting up S3

S3 is the AWS file system where the files for the website will be uploaded. We will be creating 2 buckets here, one for the root domain (getjambalaya.com) and one for the www subdomain (www.getjambalaya.com). The root domain bucket will just be forwarded to the main www one where we will be uploading all the files.

Go to your AWS console and then go to S3. Start by creating the first bucket. This bucket will have to be the name of your domain. 

![naked domain](https://dsc.cloud/blackpanda/01.domain1.png)

Next create the www domain bucket, this time deselecting  _Block all public access_  and acknowledging the choice. We are doing this, since this bucket will be made public.

![www domain](https://dsc.cloud/blackpanda/02.domain2.png)

Still in S3, click on the initial bucket, go under _Properties_ and under _Static website hosting_, set it up so it redirects to your www domain.

![redirect domain](https://dsc.cloud/blackpanda/03.redirect.png)

Go to your www bucket, under _Properties_ -\> _Static website hosting_, and _Use this bucket to host a website_. Also put index.html as the index document.

![Domain Hosting](https://dsc.cloud/blackpanda/04.domainHosting.png)

For this same bucket, under _Permissions_ -\> _Bucket Policy_, you can add the following policy, making sure you replace my domain name with yours. This will make all the objects in the bucket accessible to the outside world.

```html
 {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.getjambalaya.com/*"
        }
    ]
}
```

You can now go under Overview and upload all the files of your website into your bucket. For this example I will just upload an index.html file that I have prepared.

## Setting up the domain

In AWS go to _Route 53_ and under _Hosted zones_ click **Create Hosted Zone**.

![Hosted Zone](https://dsc.cloud/blackpanda/00.hostedZone.png)

Once the zone has been created, take all 4 of your NS domains provided and make sure you update your DNS setting with your registrar. For Google Domains I went under my domain -\> DNS -\> Name Servers -\> Use custom name servers. Should be the same with others as well.

![DNS](https://dsc.cloud/blackpanda/05.dns.png)

These might take a while to update as such is the way with DNS settings.

## Getting the certificate

In AWS, _Services_ -\> _Certificate Manager_ -\> **Request a certificate** -\> _Request a public certificate_. Put in your domain name (www.getjambalaya.com). Select DNS validation. Add Tags if you wish. **Confirm and Request**.

Because we already added the domain to Route53, on the confirmation screen, you can expand by clicking on your domain name and click on _Create record in Route53_ and then **Create**.

Now you will just have to wait until AWS validates your certificate based on the DNS settings. It only took 2 minutes for me, but might take longer.

## Creating the CloudFront distribution

In AWS, _Services_ -\> _CloudFront_ -\> **Create Distribution** -\> _Web_ -\> **Get Started**. There will be a lot of options on this screen, but only a few will be changed for this exercise. 

Under _Origin Domain Name_ select your www s3 bucket. Under _Viewer Protocol Policy_ chose _Redirect HTTP to HTTPS_.

![Cloud Front 1](https://dsc.cloud/blackpanda/06.cloudFront1.png)

Under _Alternate Domain Names_ put in your www domain name (www.getjambalaya.com).

Under _SSL Certificate_ chose _Custom SSL Certificate _ and chose the one you just created above.

![CloudFront2](https://dsc.cloud/blackpanda/07.cloudFront2.png)

Last thing, under _Default Root Object_ put in index.html.

Click **Create**. It will take a while for the distribution to be created so be patient.

## Finishing the domain setup

Now back to _Services_ -\> _Route 53_ -\> _Hosted Zones_ select your domain name. We will create 2 more record sets, one for each bucket we created above.

_Create Record Set_ -\> Alias and select as the Alias Target the s3 bucket you created first, then click **Create**.

![DomainRS1](https://dsc.cloud/blackpanda/08.domainR1.png)

For the second one, we will point it to the CloudFront distribution we created above, so make sure you wait until that finishes.

_Create Record Set_, add www to the name, select Yes for _Alias_ and in the _Alias Target_, select your CloudFront distribution, then **Create**.

As with other DNS changes this might take a bit to update so if it does not work right away just be patient. It will.

Congratulations, you can now visit your new website.