Chunk 1: Building the Front End.

For the next part of the cloud resume challenge, the learner is required to complete steps 2-6. Which is to create their resume in HTML. (Step 2.) Followed by styling the resume in CSS (Step 3). Followed by deploying the HTML resume as an Amazon S3 static website. (Step 4.) Once those steps are completed, The S3 website URL should use HTTPS for security which can be completed with Amazon CloudFront. (Step 5) Finally, the learner should point a custom DNS name to the CloudFront distribution. (Step 6.) For this step, you can use any DNS provider. For the purposes of this challenge, I used Amazon Route 53 to purchase my DNS domain name www.resume.johnathancloudspace.com

Completing the first few steps of the CRC was fairly easy for me. I’ve used HTML and CSS in the past however, I was a little rusty so I completed some refresher course videos on Youtube. Where I did run into trouble in Chunk 1 was with the configuration of my S3 static website. When connecting to my website I initially was receiving a message that stated that my XML file does not appear to have any style information associated with it.

To fix this issue, I realized that I had not properly linked my CSS file to my HTML file. Once I added the link tag to my HTML file and specified the correct file path, the styling was applied to my webpage.

After getting my HTML and CSS looking the way I wanted, I proceeded to deploy my resume as an Amazon S3 static website. This involved creating a new S3 bucket, uploading my HTML and CSS files, and configuring the bucket to act as a static website.

Here is a step-by-step guide on how to host an AWS static website using HTML and CSS:

Step 1: Sign in to the AWS Management Console

Go to the AWS Management Console (console.aws.amazon.com) and sign in to your AWS account.

Step 2: Create an S3 Bucket

• Click on the “Services” dropdown at the top of the page and select “S3” under “Storage”.
• Click on the “Create bucket” button.
• Provide a unique name for your bucket (e.g., “my-static-website”).
• Select the region where you want to host your website.
• Leave the default settings and click on the “Create bucket” button.

Step 3: Enable Static Website Hosting for the Bucket

• Select the bucket you just created from the list.
• Click on the “Properties” tab.
• Scroll down to the “Static website hosting” section and click on the “Edit” button.
• Choose the “Use this bucket to host a website” option.
• In the “Index document” field, enter the name of your HTML file (e.g., “index.html”).
• Click on the “Save changes” button.

Step 4: Upload Your HTML and CSS Files to the Bucket

• Click on the “Overview” tab.
• Click on the “Upload” button.
• Select your HTML and CSS files from your local machine and click on the “Upload” button.
• Once the files are uploaded, select them in the bucket contents list.
• Click on the “Actions” dropdown and choose “Make public” to allow public access to the files.

Step 5: Configure Bucket Permissions

• Click on the “Permissions” tab.
• Click on the “Bucket Policy” button.
• In the bucket policy editor, enter the following policy (replace “my-static-website” with your bucket name):

jsonCopy code{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-static-website/*"
    }
  ]
}

• Click on the “Save changes” button.

Step 6: Access Your Static Website

• Go back to the “Properties” tab of your bucket.
• Under the “Static website hosting” section, you will find the endpoint URL for your static website.
• Copy the endpoint URL and open it in a web browser.
• You should now see your HTML and CSS files rendered as a website.

Next, I needed to ensure that the S3 website URL used HTTPS for security. To accomplish this, I used Amazon CloudFront, which is a content delivery network that helps to speed up content delivery and provides additional security features. I created a CloudFront distribution and linked it to my S3 bucket, and configured it to use HTTPS.

Here’s a step-by-step guide on how to connect a static S3 website to CloudFront:

Step 1: Create a CloudFront Distribution

• Go to the AWS Management Console and navigate to the CloudFront service.
• Click on the “Create Distribution” button.
• Choose the “Web” delivery method.
• In the “Origin Domain Name” field, select the S3 bucket you want to connect to CloudFront.
• Leave the default settings for most options, or customize them according to your requirements.
• Click on the “Create Distribution” button.

Step 2: Configure CloudFront Settings

• Once the distribution is created, select it from the list.
• In the distribution settings, click on the “Behaviors” tab.
• Click on the “Create Behavior” button.
• In the “Path Pattern” field, enter “*”. This will apply the behavior to all paths.
• For “Origin or Origin Group”, choose the S3 bucket you want to associate with CloudFront.
• Leave the default settings for other options, or modify them if needed.
• Click on the “Create” button.

Step 3: Update DNS and CNAME Records

• Once the CloudFront distribution is deployed, it will provide a CloudFront domain name.
• Go to your DNS provider or domain registrar and create a CNAME record pointing to the CloudFront domain name.
• Configure the CNAME record to associate your desired subdomain (e.g., “www.example.com“) with the CloudFront domain.

Step 4: Test the CloudFront Distribution

• Wait for DNS changes to propagate, which may take some time.
• Access your website using the subdomain you configured in the CNAME record (e.g., “www.example.com“).
• Verify that your static website is served through CloudFront by checking the response headers or using tools like curl or browser developer tools.

Finally, I pointed a custom DNS domain name to the CloudFront distribution, so that my resume could be accessed at www.resume.johnathancloudspace.com. I used Amazon Route 53 to purchase my domain name and configured it to point to the CloudFront distribution.

Final Thoughts

Overall, completing steps 2-6 of the Cloud Resume Challenge was an enriching journey that not only allowed me to create an impressive resume website but also enabled me to expand my skill set and gain practical experience with Amazon S3, CloudFront, and Route 53. This hands-on experience broadened my knowledge beyond HTML and CSS, providing me with valuable insights into leveraging cloud technologies for scalable and reliable website hosting. This part of the challenge reinforced the importance of utilizing AWS services in creating a robust web infrastructure. I now have a comprehensive understanding of the AWS ecosystem and how its services seamlessly integrate, which has prepared me for future web development projects and further exploration of cloud-based technologies.