Static websites on AWS — Part III

John Dusaitis
4 min readNov 26, 2020

In this article we will see how to make our static web page which we created in previous parts (part 1, part 2) Secure and Fast.

  1. Secure by running it in HTTPS mode with a free SSL Certificate by AWS’s Certificate Manager.
  2. Fast by using Amazon’s Content Delivery Network (CDN) CloudFront.

Step 1 — Issue the FREE SSL Certificate

Amazon offers FREE SSL Certificates when you use its services. Go to AWS Certificate Manager and click the button “Get Started”.

Go with the default selected option Request a public certificate. Then click on the “Request a certificate” button.

Type your domain name, and also the www version of it. Eg: dusaits.co and www.dusaitis.co Then, click next.

Leave the DNS validation radio button selected, then press “Next”.

Do not add any tags, just press the “Review” button.

Then, click on the “Confirm and request” button.

Click on these two small arrows to expand.

Click the two “Create record in Route 53” buttons in order to start the Validation process.

You will see two success messages. Click the “Continue” button.

Then, you have to wait for some minutes in order the DNS validation to be completed. When you see the bellow two success messages you are ready to go.

Step 2 — Create a new CDN CloudFront distribution.

Go to CloudFront page and click on the “Create Distribution” button.

Now, you have to create a Web disribution. Click on the first “Get Started” button.

In the first field Origin Domain Name choose from the autocomplete menu the S3 bucket we created in part I. In the Viewer Protocol Policy choose the “Redirect HTTP to HTTPS” option.

In the Compress Objects Automatically field choose “Yes” to support gzip compression.

In the Alternative domain names (CNAMEs) field type both versions of your domain name eg dusaitis.co and www.dusaitis.co. In the SSL Certificate field choose Custom SSL Certificate and from the autocomplete menu the SSL certificate you created in the previous step.

Then, in the Default Root Object field type index.html. Finally, press the “Create Distribution” button.

You are almost, ready. Wait 5 minutes in order the status of the distribution to change from In progress to Deployed.

Step 3 — Map your domain name with your CloudFront distribution

Go to Route 53 and choose your domain’s name hosted zone. Eg: dusaitis.co.

Here, you have to select the A type record and edit its value which previously mapped to the S3 bucket.

Edit, the Value/Route traffic to value of the A type record. Choose the “Alias to CloudFront distribution” and map with the disribution you created in the previous step. Click on “Save changes” to complete the process.

You must see the following success message.

You may need to wait for some minutes in order see the change.

Congrats, 🎉 your domain name now maps the traffic to the CloudFront distribution which runs on HTTPS and supports gzip compression. 🚀

Thanks for reading.

For more tips follow me on Twitter.

Originally published at https://dusaitis.com.

--

--

John Dusaitis

Front End Developer and Designer. I love experimenting with design systems, typeface design and UI/UX.