Devtej Portfolio
Chapter 1: Setting up a static S3 Site, Harnessing CloudFront, and Mastering Route53 DNS

Chapter 1: Setting up a static S3 Site, Harnessing CloudFront, and Mastering Route53 DNS

Serverless Website

teju fam's photo
teju fam
·

3 min read

I chose TheCloudResumeChallenge to build my portfolio as a project. I spent a significant amount of time building this using AWS services like S3 bucket, CloudFront, Route 53, Lambda, AWS API gateway and Terraform. The final outcome of the project, now accessible for your exploration at https://devtej.com.

Follow along with me on this project where I'll guide you through a series of interactive setups to create my cloud resume.

In this beginning segment, we begin by creating a static S3 website in order to accelerate the delivery of the site with CloudFront, and configuring Route53 DNS to connect a custom domain to the site.

Note: I haven't included the website design/development process in this guide.

Fig 1

1: Setting up an S3 Bucket

To host a static S3 website, you first need to set up an S3 bucket. The S3 bucket is Amazon Web Services' object storage solution.

Here's how to get the S3 bucket up and running:

  1. Go to the Amazon S3 console.

  2. Hit the "Create Bucket" button.

  3. Assign a distinctive name to your bucket, pick a region, and stick with default settings for everything else.

  4. Click "Create" to finalize the creation of your S3 bucket.

After setting up your S3 bucket, upload your website files.

2: Setup route 53 DNS & Certificate

  1. Setup DNS routing with domain Name setup on Amazon Route 53 for domain name registration

  2. Requested a new certificate from AWS Certificate Manager (ACM) which will handle SSL/TLS certificates and keys that protect AWS websites and applications.

  3. Make sure to import the newly created certificate into your route 53 DNS because we will be needing as part of the config for CloudFront

3: Implementing CloudFront for Faster Delivery

With the website stored on the S3 bucket, we can now boost its delivery speed by implementing CloudFront. CloudFront, a content delivery network (CDN) service, enhances web content, such as .html, .css, .js, and image files, to your users by caching content worldwide using data centres called edge locations.

  1. Access the AWS Management Console.

  2. Navigate to the CloudFront dashboard and Select the "Create Distribution" button.

  3. Designate the S3 bucket as the origin and adjust other settings according to your preferences.

  4. Click the "Create Distribution" button.

  5. I created distribution for https://devtej.com

  6. Add an “A” record the website pointing to the CloudFront Distribution created earlier

  7. Use the CloudFront distribution domain name as the alias value for the “A” record

  8. Save your changes

    Now you can access your static S3 website by visiting the DNS linked to your domain. By successfully finishing the initial phase of the Cloud Resume Challenge, I'm able to gain the expertise to construct a static S3 website, integrate CloudFront for swifter content delivery and setup Route53 DNS for a personalized domain name.

route53cloudfrontS3-bucket