DEV Community

Cover image for Building my Cloud Resume Challenge Website
joconr
joconr

Posted on

Building my Cloud Resume Challenge Website

Introduction
Creating my cloud resume wasn’t an easy process, but I’m proud of the work I have to show for it. Along the way, I learned how to use a strong assortment of Amazon Web Services, reinforced my skills in both Python and JavaScript, and gained insight into web development using HTML and CSS. Not only are these skills I’ve gained along the way going to help form the beginnings of my career, but I’ve utilized them to produce a website that can demonstrate them to the world through the format of a resume.

Namecheap/Route 53
The bulk of the work I put into this project was in the backend website architecture. This was mostly spread out through weeks of work in my Cloud Computing class at Loyola Marymount University. The first steps I had to take were acquiring the domain “joconr.com” on Namecheap. With the domain acquired, I could then use Route 53 to create a hosted zone that would resolve traffic to my cloud resume website on S3.

S3
I hosted my website on a serverless architecture using an S3 bucket with static website hosting enabled. To allow traffic to enter the site, I had to set up public access to all folders. I then added a simple index.html file that would be used as the basic homepage before I began editing frontend code.

Subdomains and CNAME Records
In order to set up subdomains like “www” or “resume”, I needed to go back to Route 53 to create the proper CNAME records. Route 53 allowed me to create the CNAME records so that the bucket could be reached via the internet using HTTP protocol from both subdomains.

HTTPS and Certificate Manager
Because the data being transferred over HTTP protocol is not encrypted, it results in the page showing up as “not secure” and is generally poor practice in website creation today. To enable HTTPS on my website, I used Certificate Manager to obtain SSL certificates for all my subdomains to my website. Because I was able to prove that I have access to DNS records, I was issued the certificate and able to configure my website to use HTTPS. With this step done, data being transferred when accessing my site was now encrypted and secure.

CloudFront
I utilized CloudFront as a content delivery network to cache data to reduce website load, reduce costs, and just generally improve the performance of the website altogether. To do this, I added new CNAME records for each subdomain using CloudFront distribution names. I then had to go back into Route 53 to add new A records that would redirect traffic to the CloudFront domain names.

Visitor Counter
One important element I wanted to include for this website was a working counter that would track visitor numbers and store them in a NoSQL database every time they visited the site. I also wanted this number to be visible for visitors on the site itself. To do this, I utilized three different AWS solutions: Lambda, DynamoDB, and API Gateway. I started with DynamoDB by setting up the NoSQL database that would store the total count through the use of key-value pairs. I then wrote a Lambda function in Python that would increase the count of visitor numbers by 1 every time a visitor arrived at my website page. Finally, to show this number on the website itself, I used API Gateway to work in tandem with my Lambda function to update the count every time it was accessed on the website through a bit of JavaScript magic. All I needed to do was include my JavaScript code in the S3 bucket and call it in my final HTML.

Frontend Code
Because of my limited HTML and CSS knowledge, I used an online template that allowed me to fill in my information as needed. While I expected this process to be simple, I bumped into a bunch of problems along the way. For example, the template I was using didn’t fully satisfy all my wishes for the format in which I desired for my resume. Because of this, I had to perform my own research into HTML and CSS coding to adjust the template according to my preference. Whether it was looking into how to embed links into icons or simply just re-adjusting fonts and button layouts on the website, each problem I bumped into required me to dig deep and maintain composure to fix bugs that I encountered. I found the website Stack Overflow to be an incredibly useful source of information to fix bugs. I can confidently say, however, that I’m glad that I went through this process as it helped me gain a better understanding for how HTML and CSS code works.

Final Thoughts
I’m very happy with the progress I’ve made on my website! This cloud resume project has been an incredible process for the past few weeks, even with all of the bugs and hurdles I faced along the way. Working with AWS has been eye-opening to all the possibilities the cloud offers, not only for its customers but for my career itself. The key term to focus on, however, is progress. I am far from done with my work on the website, as I will continue to edit it and add new pages as I have much more to show the world. For now, though, I hope that everyone can enjoy what’s been created so far!

Link to my website:
https://joconr.com/

Top comments (0)