First, we will create a domain in Route 53. Search for and open Route 53 in the console and click Get started.
 Route 53.png)
First, we will create a domain in Route 53. Search for and open Route 53 in the console and click Get started.
Select Register domain then click Get started. Here we can search for the availability of a domain name of our choice. Click Select for your desired domain then Proceed to checkout.
 Route 53.png)
Select your desired Duration and ensure that Auto-renew is On. Click Next.
 Route 53.png)
Enter your contact information and ensure that Privacy protection is turned on. Click Next.
 Route 53.png)
Review the information then scroll down and review/accept the Terms and conditions. Click Submit.
 Route 53.png)
Once the domain is created, go to Hosted zones. Click the Hosted zone name.
 Route 53.png)
Ensure that we have the NS and SOA records. The NS record ensures that the AWS DNS will be used to answer DNS queries, which will be Route 53.
 Route 53.png)
Now search for and open S3. Click Create bucket.
 S3.png)
Create your own Bucket name (website URL created in Route 53) and ensure that it is globally unique. Select your desired AWS region. For now, we will leave all the default settings. Scroll down and click Create bucket.
 S3.png)
Click the Bucket Name that was just created.
 S3.png)
Here we can add the files and folders of our portfolio website. Click Upload.
 S3.png)
Click Add files and select the desired files to upload. Click Upload.
 S3.png)
Go back to the S3 bucket and review all of the Objects. Next, go to the Permissions tab.
 S3.png)
We will now allow our S3 bucket to have public access so that our portfolio can be viewed by the public. Click Edit in Block public access.
 S3.png)
Unselect the Block all public access check box and click Save changes. Ensure that you want all contents of the bucket to be available to the public. Confirm changes.
 S3.png)
Scroll down to Bucket policy and click Edit.
 S3.png)
Click Policy examples which will take you a new page. Copy the Bucket ARN for a later step.
 S3.png)
In our case, we will be Granting read-only permission to anonymous users and have already completed all the steps.
 S3.png)
Head back to the console and click Policy generator.
 S3.png)
For Policy Type, select S3 Bucket Policy. For Add Statements, Allow anyone * to GetObject. Paste the Bucket ARN that we copied earlier and add /* to the end of it to allow any object in the bucket. Click Add Statement.
 S3.png)
Click Generate Policy and copy the JSON code.
 S3.png)
Go back to the console and paste the JSON code into the policy. Ensure that it is a public bucket so that anyone can get any object from the bucket. Scroll down and click Save changes.
 S3.png)
Review the Permissions overview and ensure that there is Public Access.
 S3.png)
Go back to the Objects tab and select a file to ensure that it can be viewed from the public internet.
 S3.png)
Head to the Properties tab then scroll down to Static website hosting and click Edit.
 S3.png)
Enable and select Host a static website. Add your home page URL such as index.html. Click Save changes.
 S3.png)
The next step is to create a new record that will allow users to visit the URL created in Route 53, and be redirected to the S3 bucket with our portfolio website files. Search for and open Route 53. Go to Hosted zones and click the URL.
 Route 53.png)
Click Create record.
 Route 53.png)
Click Switch to wizard then select Simple routing and click Next.
 Route 53.png)
Click Define simple record. Leave the subdomain Record name empty. For the Choose endpoint dropdown select Alias to S3 website endpoint. Select the same region where the URL was created. Select the URL in the dropdown menu. Untick Evaluate target health and click Define simple record. On the next page click Create records.
 Route 53.png)
Test the website with the http:// prefix.
 Route 53.png)
Now that we have tested the website, head back to the S3 bucket and select the Permissions tab. Turn Block public access back on and delete the Bucket policy.
 Route 53.png)
Go to the Properties tab and scroll down to disable Static website hosting.
 Route 53.png)
Refresh the website that we tested and there should be an error.
 Route 53.png)
Next Search for and open CloudFront. Click Create distribution.
 CF.png)
Select our S3 bucket as the Origin domain and choose Origin access control settings. Click Create control setting and then Create.
 CF.png)
Scroll down and disable WAF. WAF is always recommended as a first line of defense at edge locations globally, but we are not storing any important data in this case.
 CF.png)
Scroll down and for the Default root object add index.html then click Create distribution.
 CF.png)
Click Copy policy then take the shortcut directly to our website S3 bucket.
 CF.png)
Scroll down and click Edit.
 CF.png)
Paste the policy we copied. Scroll down and select Save changes.
 CF.png)
Go back to the CloudFront tab and copy the Distribution domain name.
 CF.png)
Paste in a new window and we should see our website. Go through the different tabs once. When you go through and click the tabs again it should load instantly from the cache in the CloudFront distribution.
 CF.png)
We now need to create a certificate for CloudFront to encrypt connections using HTTPS. Search for and open ACM. Click Request a certificate.
 ACM.png)
Select Request a public certificate then Next.
 ACM.png)
Enter the Domain name and add another name with a *. so that any subdomain can use the wildcard certificate. Scroll down and click Request.
 ACM.png)
Next select the Certificate ID.
 ACM.png)
Select Create records in Route 53.
 ACM.png)
Ensure the record type is CNAME and click Create records.
 ACM.png)
Search for and go to S3. Create a new bucket for the subdomain, making it the same as the website bucket but adding www. where users will be redirected to. Ensure that all the files are only in the new bucket.
 S3.png)
Return to the original bucket and go to the Properties tab. Scroll down to Static website hosting and click Edit.
 S3.png)
Select Enable then Redirect requests for an object. Enter the subdomain and select HTTPS. Click Save changes.
 S3.png)
Return to the CloudFront distribution we created. Go to Behaviors and click Edit.
 S3.png)
Select Redirect HTTP to HTTPS. Scroll down and click Save changes.
 S3.png)
Go to the General tab and under settings click Edit. Choose Add item for Alternate domain name and type the subdomain. Select the Custom SSL certificate we created in ACM. Scroll down and click Save changes.
 S3.png)
Go to the Origins tab and click Edit. Choose the subdomain S3 bucket. Select Legacy access identities and select or create a new OAI.
 S3.png)
Recreate another CloudFront Distribution but with the root domain bucket website endpoint.
 CF.png)
Search for and go to Route 53. Click the Hosted zone name.
 CF.png)
Select Create record.
 CF.png)
Select Simple routing and click Next.
 CF.png)
Click Define simple record.
 CF.png)
Add www to the name. Select the endpoint Alias to Cloudfront distributions. Select the subdomain distribution. Click Define simple record.
 CF.png)
Since IPv6 is enabled for our CloudFront distribution, we must create another Alias for it. Repeat but with the AAAA record. Create two of the same records but with the domain name for rerouting purposes.
 CF.png)
Click Create records.
 CF.png)
Now type your root domain in a new browser. Success!
 CF.png)