Setup AWS S3 static website hosting using SSL (ACM)

Image for post
Image for post

I registered a new domain (ssml.io) and I want to use it to host a static website using S3 and Cloudfront. For this website I want an SSL connection using a AWS Certificate Manager certificate.

To finish this setup you have to go through these steps:

  1. Create an S3 bucket and upload your index.html file
  2. Create a cloudfront distribution pointing to this S3 bucket
  3. Setup Domain MX records using SES to receive the SSL certificate domain validation email
  4. Request a new SSL certificate in region us-east-1 (!)
  5. Assign the certificate to your Cloudfront distribution

I assume that you already have a (new) domain registered in Route 53 with no A or MX records setup.

1) Create a new S3 bucket for your static files

Create a new S3 bucket using the default settings

Open the buckets properties and activate “Static website hosting”. Make note of the Endpoint URI.

Image for post
Image for post

To save emails on your bucket from SES later, you need to grant permissions to SES to write to your bucket. Add the following bucket policy and replace YOUR_BUCKET_NAME and YOUR_ACCOUNT_ID with your corresponding values.

Image for post
Image for post
{
"Version": "2012-10-17",
"Id": "GiveSESPermissionToWriteEmail",
"Statement": [
{
"Sid": "GiveSESPermissionToWriteEmail",
"Effect": "Allow",
"Principal": {
"Service": "ses.amazonaws.com"
},
"Action": "s3:PutObject",
"Resource": "arn:aws:s3:::ssml.io/*",
"Condition": {
"StringEquals": {
"aws:Referer": "123456789012"
}
}
}
]
}

Save the policy, upload your index.html file and your are done.

2) Create a cloudfront distribution using a custom CNAME

SSL certificates can only be assigned to cloudfront distributions, so we need to create one to enable SSL for our static website.

Create a new Web distribution and select your S3 bucket as Origin Domain Name. Select HTTPS Only for Viewer Protocol Policy.

Image for post
Image for post
Select the S3 bucket as origin and set the viewer protocol to HTTPS only

In the Distribution Settings section enter your domain name you want to host your static files on (My site is https://ssml.io). Do not change the SSL Certificate settings for now, as we did not setup our email address to receive the domain validation email for our certificate request.

Image for post
Image for post

Beside that keep all the default settings and click “Create distribution”. Grab a cup of coffee or two and wait until the distribution is created………

3) Setup Route53 MX records using SES to forward emails to S3

Go to AWS SES and verify a new domain. Generate DKIM Settings as well.

Image for post
Image for post
Generate DKIM Settings for your domain to verify your email domain

Click “Use Route53” to setup all necessary Domain Records in Route53. Amazon is handling everything for you :-)

Image for post
Image for post
AWS helps yout to setup all your domain records to verify a email sending and receiving domain

In the left navigation head to “Rule sets”, create a new one and a new “Rule”. Enter administrator@yourdomain.com to the receipients as this email address is used by default to receive SSL certificate domain verification emails.

Image for post
Image for post

In the bottom part of the rule settings define a S3 Rule to save incoming email to a ‘folder’ in your bucket.

Image for post
Image for post
Save incoming email to a S3 bucket

4) Request a free SSL certificate using AWS Certificate Manager (former ACM)

Cloudfront only accepts certificates hosted in region us-east-1. Switch to that region NOW.

Enter one or more domain names, you want to create a SSL certificate for. You can even use a wildcard.

Image for post
Image for post

Now you should have a new email on your S3 bucket containing the verification link. Download the email file open it in your favorite text editor and copy the verification link to your browser.

Image for post
Image for post
Image for post
Image for post

5) Assign the SSL certificate to your Cloudfront distribution

You’re almost done. Go back to Cloudfront and edit your distribution. Now you should be able to select your brand new SSL certificate.

Image for post
Image for post
Select a SSL certificate from AWS Certificate Manager

Congratulations. You’re done :-) Check it out: https://ssml.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store