Written by Guadalupe Vocos & Pedro Bratti | Cloud & DevOps Engineer @ DinoCloud

You can deploy an Amazon S3 bucket to work as a website with a CloudFront Distribution for Content Delivery and Route 53 for cloud Domain Name System (DNS)

Why choose a static website?

Hosting static websites is becoming more and more popular, but what does it mean to be static? It means that your site consists of a set of “pre-built” files (HTML, js, and CSS files) that are directly served on request. This plus the resources that AWS offers allows us to have a serverless, flexible, scalable, highly performing, secure and low-cost infrastructure.

Before you begin:

As you follow the steps in this example, you will work with the following services:

CloudFront: Distribution and Origin Access Identity.
Route 53: Hosted Zone and Records.
S3: Bucket.

You will need to have these prerequisites before starting the steps:

Route 53: Domain Name already registered.
Certificate Manager: Certificate requested (Optional in case you want to secure communication through the HTTPS protocol).

Step 1: S3 Bucket with Static Website Hosting

Choose Create Bucket, enter the Bucket Name (for example, medium.dinocloudconsulting.com) and on region select us-east-1 and Create.

Now you can upload your index.html to the already created bucket.

Step 2: Route 53 Create Hosted Zone

Choose Create Hosted Zone, enter the Name, select the Type Public Hosted Zone and Create.

Step 3.1: CloudFront Create and Configure Distribution and OAI.

Sign in to the AWS Management Console and open the Amazon CloudFront console at AWS CloudFront.
Choose Create Distribution, in the Origin Settings section, for Origin Domain Name, enter the Amazon S3 website endpoint for your bucket (for example, medium.dinocloudconsulting.com.s3-website-us-east-1.amazonaws.com)

Under Bucket Access select Yes, use an OAI, Create new OAI and select Yes, update the bucket policy.

(Optional) For SSL Certificate, choose Custom SSL Certificate (example.com), and choose the custom certificate that covers the domain
Set Alternate Domain Names (CNAMEs) to the root domain. (for example, example.com).

In Default Root Object, enter the name of your index document, for example, index.html.

Let the rest properties as default and Create.

Step 3.3: CloudFront Configure properties Error page.

Select the Distribution, already created, and go to the properties tab called Error page.

Set the followings properties:
- HTTP error code: 403: Forbidden.
- Customize error response: Yes.
- Response page path: /index.html
- HTTP response code: 200: OK

Step 4: Route 53 create a Record.

Sign in to the AWS Management Console and open the Amazon Route 53 console at AWS Route 53.
On the Hosted Zone which you already have created, select Create Record.

Select Record Type: A and under Value field, check Alias and select the CloudFront Distribution domain name.

Wait a couple of minutes for the DNS to propagate and search the site on your browser.

All ready! You now have your static website up and running.

At DinoCloud, we take care of turning a company’s current infrastructure into a modern, scalable, high-performance, and low-cost infrastructure capable of meeting your business objectives. If you want more information, optimize how your company organizes and analyzes data, and reduce costs, you can contact us here.

Social Media:

LinkedIn: https://www.linkedin.com/company/dinocloud
Twitter: https://twitter.com/dinocloud_
Instagram: @dinocloud_
Youtube: https://www.youtube.com/c/DinoCloudConsulting