AWS Project: Build a Resume/CV on AWS, Step-by-Step Tutorial to Help You Get Hired

hi everyone today we're going to build an online resume using AWS we'll build a page that looks something like this using HTML we've got CSS for some styling and then we've even got some JavaScript for interactivity here on our professional experience each one of these is clickable these files are living in an S3 bucket that's configured to host a stanic website that bucket is sitting behind a cloudfront distribution so the content delivery Network or CDN and you'll also notice that up here we are on a custom domain name Amber aws.com on a secure connection https using a certificate that I set up from AWS certificate manager so when you're done not only will you have an online resumé page but you'll also have a real life project that you can use on that resumé to highlight your experience this seems like a fairly simple project but there's actually several moving parts and by building something like this it shows that you know about the different services and how they fit together incidentally if you're looking for other projects that you can use to build your skills and your resume I've linked two videos Below in the description these also use several services and when you're done you'll have a fully working web application that you can also use to highlight your skills okay let's talk through what we're going to do I've broken this into three parts and if you want to go through all three parts you do need to work through them sequentially cuz I kind of build on each other but we're going to start with part one where we build a stanic website on S3 so we will create our code files I'm going to get some help from chat EBT with this with mad respect to the frontend developers writing HTML code and CSS from scratch is not really my jam so I'm going to get some help from AI on this you don't have to use chat GPT and I will also make my code available for download if you want to use that as a starting point we'll then take that code and upload it to an S3 bucket and configure that bucket for static website hosting ING with Public Access moving on to part two here's where we're going to make everything work with a custom domain name for Route 53 I have a domain name that I've already registered with Route 53 you don't have to do that part if you don't want to it is possible to use a domain name from another registar like GoDaddy or name CH or something like that I'll point you to an article with more details if you want to go that route but we'll work through how to point your records to the S3 website so you can go to mydomain.com and get to your website hosted in S3 and then finally we'll see how to make everything work on a secure connection on https using a certificate from AWS certificate manager you can't apply that to an S3 bucket you have to apply it to a cloudfront distribution so we'll also set up that piece so that by the time we're done we can just go to mydomain.com that will go across a secure https connection to the cloudfront distribution and ultimately serve up our amazing resume as far as what this will cost it kind of depends on which parts you do so for the first part we're using chat gbt and S3 like I said you don't have to use chat gbt if you don't want to you can code things from scratch you can use the code that I provide but if you do want to use chbt there is a free account that you can use and then for S3 if you're still inside of the free tier which is usually 12 months after you first create your account then all of that should be free if you're outside of the free tier though S3 is very inexpensive it should really just be a few cents to host the simple files that we're working with moving over to the Ralph 53 piece if you decide to get a domain with Route 53 these vary in price starting from about $10 up to who knows depending on the popularity of the domain name like I said you don't have to get one of those you can use a domain name from another provider we'll have to create a hosted Zone and that will run you 50 cents per month and then you're also charged for queries basically how many people hit your domain name and those will be 40 cents per million queries so I think you're okay there but if you go with ra 53 it will cost you just a little bit of money and then on the last part for the ACM certificates those are going to be free cloudfront could be free or a little bit of money depending on how many requests are made if it's just you and friends and family occasionally hitting the site then we're probably talking just a few cents here as well with all of that said though I would recommend that you check out this video that I have about AWS budgets always a good idea to set one of these up this will alert you to your charges in case you accidentally left something on or in case suddenly you have millions of people going to your domain name or something like that set up a budget for say $10 a month or $20 a month or something like that and you'll get alerted if it looks like you're going to go over that so always a good idea all right let's go get started so for this part we need to go create our files and here's where I'm going to get a little bit of help from chat GPT this is not a course about chat G PT so if you're using it I'm assuming you're fairly familiar if you don't have an account though and you want to give it a try just go to chat. open.com you can create a free account which will give you access to GPT 3.5 a super capable model I'm actually going to be using gbt 4 which requires the Plus Account which is $20 per month but like I said you can skip this entirely write your code from scratch which is actually probably the best way to prove your skills especially for a resume or you can get the code that I ended up with and use that as a starting point but here we go I'll just put in plain language what I'm trying to do here so I'm creating an online rume for myself it should be a single web page using HTML JavaScript and CSS and then a little bit about the different parts of the resumé so we want to headshot image different sections here's how we want to use the JavaScript if you want to use JavaScript for something else feel free to do that or you can even ask for inspiration on how you could use JavaScript in a resume I'm going to do separate files for all of my code and then ask if it can create the page for us okay so with that prompt that I gave it we have ended up with three different files so we've got HTML and for each of these you can just copy The Code by clicking that right there and then just copy it into different files this file needs to actually be called index.html it's guessing that it should be res. HTML but you want index.html for that we've got our CSS code here styles.css and then for JavaScript a separate file and for this example the JavaScript comes into play with the employment history and that interactive timeline so feel free to go back and forth with chbt to get it just the way you want it I think that's actually a really good skill knowing how to work with these generative AI tools let me show you the code that I ended up with I did go back and forth quite a bit on sty in and formatting and so on and I'll zip up these three files and Link them in the description if you want to grab these as a starting point just a heads up though make sure you do replace the head shot. jpeg with your own headshot I'm not providing mine because that would just be weird but you do need a head shot. jpeg in the same folder with these other files and then I've just updated various things here fictional information obviously about skills employment and so on I've got my scripts file and my Styles file as well all right so that's the code now we need somewhere for it to live and this is where we're going to go out to AWS and create an S3 bucket so add in the AWS console I'll go to S3 and then we'll create a new bucket now a note in terms of a naming here the name of your bucket has to match the domain name that you're going to use to direct traffic to the bucket for example I'm going to use Amber aws.com and so my bucket name needs to match that exactly otherwise we're going to run into trouble when we get into Route 53 so if you're using my supercool domain name.com or something like that then make sure you're naming the bucket exactly that I'll leave this in uswest to defaults for everything here we are going to deselect this because we're building a resume that should be public and available to the world this is generally not recommended if you're using S3 as internal storage for another application for example in our case though we're building a public resume that we want anybody to be able to get to so we don't want to block Public Access but you do need to acknowledge that you know what you're doing here and that you did that on purpose so check that box everything else can be default and then we'll create the bucket once it's created let's go into view details then there's a couple other things we need to do first we need to enable it for static website hosting so the files that we're using the HTML the JavaScript and the CSS those are considered static website files they don't require any server side code to run so all of these can live at S3 and we want to go all the way down to the bottom to static website hosting edit and then enable the only other thing you need to change here is the index document the home or default page for the website index.html and then we can save changes and then we also need to add a policy that allows the contents of the bucket to be publicly available so this is in addition to that check mark that we deselected earlier we do also need a policy so come into the permissions Tab and then down here bucket policy we'll edit this and then I'll paste some code in here I will also link this little code snippet in the description for the video so you can just copy and paste it but you will need to update the bucket name right here so my bucket name is Amber aws.com update that with whatever name you're using and this is allowing anybody the star to do a get object so basically to read all of the objects in this particular bucket okay and then let's save changes and now let's go upload our code files to the bucket click on objects and then upload I've got the three code files here here plus the headshot so again make sure that you do have a head shot. jpeg file in the same location as your code and also make sure that you're dragging the code files over and not the zip file if you've downloaded everything so I'm just going to grab all four of these drag them over and then upload okay perfect and then to test things out we don't want to come into an individual file like index.html or something like that we actually want to come back to properties and then scroll down to the static website hosting section and now you should have a bucket website endpoint here that we can launch to test things out so I'll just open this up new tab and there we go there's our Masterpiece but you will notice that it's not secure so we're getting the little exclamation up here we're just using HTTP right now and not https and then we've also got this long domain name here normally users would want to just go to your custom domain like Amber aws.com which is what we're going to work on next as in right now so let's go over to Route 53 and work on a domain name back to the console and navigate to Ral 53 if you need the basics of round 53 then check out the video linked above and below but from here you could register a new domain name if you wanted to we can check to see what's available so nobody in the world has this domain.com hopefully let's check dam look at that it's available for $13 so you could actually select this it will take you through a cart and a checkout process and then it just ends up on your AWS bill I do already have a domain name with Route 53 that I'm going to be using if we back up and come into hosted zones if you purchase the domain name here it would automatically create a hosted zone for you you can kind of think of a hosted zone is just a container for the different records and rules that handle traffic from the internet and that's what we're going to be doing so I've got this hosted domain I've got some records in here but let's say that you have a domain from somewhere than Route 53 like GoDaddy or name chep or something like that you can use Ral 53 as your TNS service there's a lot of benefits to it and it's just a lot smoother to operate with other AWS services but you could still have the domain name registered with somebody like the GoDaddy or the name CH for example so if that's your situation you would still want to create a new hosted Zone from scratch you would enter your domain name from GoDaddy or wherever it is I won't go all the way through with this but let's just do my test domain.com do a public hosted Zone which is for routing traffic on the internet and then create the hosted Zone and once you do that you're going to get your name servers here you would take these name servers to your current provider Gaddy for example enter those name servers there because everything is slightly different and it's going to be really tough for me to troubleshoot things I will just leave you with that and then I've also got an article here that I'll link below in the description it's out on LinkedIn and this might be helpful as well it's got some screenshots and different things in here and some good instructions to help you work with domains from external providers note that things like propagation are probably going to take a little bit longer with this generally there's just more things that can go wrong so I am going to use a domain that I purchased here in Route 53 and everything will just magically work as we'll see so I'm going to delete this hosted Zone that I just created just so I don't get confused again a hosted zone is really just a container for your records so now I just have the one original one for Amber aws.com and basically when somebody goes to Amber aws.com what we want to have happen is route that request to R S3 website to do that I'll go to create record the record name I'm just going to go with the root domain here Amber aws.com so I don't have a subdomain I could set up a subdomain if I wanted to but I'm just going to go with the root the record type for what we're doing here is going to be an a record and then we do want to toggle on Alias so Alias is what will let us route to different AWS resources like S3 or elastic bean stock or cloudfront or something like that so we want to Route traffic to S3 regen my S3 bucket is in Oregon Us West 2 and then it should show up right here now if your S3 endpoint is not showing up here it's probably because you didn't name the bucket the same as your domain name so that's why we had to name the bucket Amber aws.com to match my domain here so that's a pretty common gotcha it's working for us so yay we're going to go with a simple routing policy and then create the record now this message up here is super handy you can view the status of the propagation it does take a little bit to push out these changes so if I were to try to go to Amber aws.com right now and we're currently in a status of pending it probably wouldn't get me to my S3 website but now it would so now we're in sync I'll open a new tab go to Amber aws.com and Tada everything worked awesome so we've got our custom domain routing to our S3 static website all right what's next well next if you haven't already then go hit that like button if you're enjoying the video I would super appreciate it it really does help the content spread to more people to think about subscribing for more content like this and thank you so much okay but really we're going to move on to the last bit here of setting up a certificate and a cloudfront distribution so let me go back to the console I'll open up a new tab and here we'll go to certificate manager now very very important for this one and we want to be in North Virginia Us East 1 if you create your certificate in another region we won't be able to use it when we get into cloudfront which is where we're going eventually so very important that you toggle that region over and then we're going to request a certificate if you have certificate from somewhere else another Authority you can also import that here but we're going to request a new one we'll go with a public certificate and next the fully qualified domain name I'm going to go with Amber aws.com you can also set things up for wwwd domain.com and you can do that in Route 53 as well but I didn't so I'm just going to keep things simple with Amber aws.com then you'll need to choose your validation method basically Amazon wants to check that you actually own this domain and that you have the ability to modify the DNS configuration we're going to go with the DNS validation this will require us to add a new record in Route 53 which we totally can do and then if you can't do that for some reason you can't modify DNS configuration then you'll have to go with email but we're going to go with the DNS option key algorithm will just go with defaults no tags and then request so our request has a status of pending validation now and then further action is needed let's view certificate now I don't find it super obvious what you're supposed to do next but there is some documentation I'll just show you that quickly for future reference so in here you can find the steps to do the DNS validation or email validation but scrolling down what we want is this step right here number three so in the domains section back to our page here the domains section you should see this button create records in R 53 which means that you're using Ral 53 as the DNS provider which we are we have permission to write which we do and the fully qualified domain name has not been validated yet and it hasn't so for us all we need to do is just click on this button and then say create records this will go create a new C name record for us in Ralph 53 so if I come back to R 53 here I have just these three records at the moment but if I refresh now I've got this fourth record the ca record right here and that's what we just created through certificate manager so really pretty easy to get this hooked up if you're using Route 53 and you have all the right permissions and so on back to certificate manager if we refresh it looks like our status stat is issued which is awesome according to the documentation the status can show as pending validation for up to 30 minutes I have found that inside of that 30 minutes though I can usually still use the certificates but in either case we should be good to go because this one it's got the green check mark so we have the certificate now that will allow us to do https connections but you can't use that certificate on the S3 website instead you have to set up a cloudfront distribution that points to the S3 website and then the certificate actually goes on cloudfront so let's go to cloudfront next I'll open up a new tab I do have a video on the basics if you need those link above and below if you want to check that out so we'll create a CLA distribution the origin domain this is basically where your stuff is living your files for us it's in S3 and my bucket is actually the first one here Amber a ws.com is the name of my bucket when I select that though I'll get this message this bucket has static web hosting enabled which it does if we plan to use this as a website we do then we recommend using the website endpoint rather than the bucket inpoint so this is the bucket endpoint here all we have to do is click this button and then very handily it will update it to the website endpoint instead okay there's a whole bunch of things here that you can just leave as defaults we don't actually need to change anything until we get down here under viewer for this we'll want to select redirect HTTP to https scrolling down some more you will need to select an option for the web application firewall or wff for us we are not going to enable this just keeping things simple and then coming down to settings here here you want to add the item for an alternate domain name into your domain so mine will be Amber aws.com and then you also want to select your certificate here so the one that we just set up in certificate manager and also just the note here that it does have to be set up in North Virginia so if you accidentally requested that certificate in another region which I have done before it's not going to show up here so ours though should here we go perfect just one other thing to update if we scroll down to the default root object this will be the index.html page or our default homepage and then create distribution all right successfully created yay but that's a little bit deceiving if you're to try to go to your distribution domain name right now just open up a new tab here we can't actually get there so this has not actually finished deploying and you'll see that right here the last modified message when it's done done then it will show a date and time in here so I'll give it a minute or two to finish deploying and then we should be able to get out to that domain name okay now we have the last modified updated to a date and time that's exactly what we wanted so it should be done done now and if we were to come back to the distribution domain name which I have in this other tab tab Let me refresh this and there's our resume excellent and you'll notice that the connection is secure so I've got the little padlock right here so our certificate is working on the cloudfront distribution which is pointing to our files at S3 but remember ultimately we want to be able to go to Amber aws.com and that will show the resume we don't want to go to this cloudfront distribution domain name so we'll just need to go make one final update in Route 53 to make that magic happen so back to Route 53 we want to update our a record so this is the record that we created initially let me edit this that's pointing to the S3 website mpoint now we want it to point to cloudfront so let's update this and then the distribution should find it for here we go perfect let's save that we'll view the propagation status and in sync perfect so let's come back to actually I'll just close out of these tabs we'll just start from scratch so we know we're getting the latest and we'll go to Amber aws.com there's my resume as we would expect and we are on the secure connection with our certificate strong work everybody nice job so we've created a resume using HTML CSS and JavaScript put all of those into an S3 bucket enabled static website hosting then we went into Route 53 set up our domain name and our records to point to that bucket then we created a certificate hooked that certificate up to a cloudfront distribution updated our R 53 record to point to that distribution and everything is working very cool all right before you get excited and go show everybody your resume just an important reminder if you do want to shut everything down here then follow along with me I'll walk you through what you need to delete if you want to leave things running the cost will depend on whether you're in the free tier or not there might be some things that incur little costs here and there so again check out that AWS budget video to be notified just in case there's any charges that you weren't expecting but let's go delete the things that we set up we'll start by deleting the cloud front distribution so to select it for this you actually need to disable it before you can delete it so let's start that while that's running we'll come back to brow 53 and I'll just clean up some of the records here these records don't cost you anything but they can just get a little bit confusing in the future if you're doing any work in here so I'll delete the a record just select it and delete we'll delete that cname record that was created for us by the certificate manager delete that one now the certificate that we created in certificate manager we actually won't be able to delete this until the cloudfront distribution has disabled and it's deleted it will say that the resource is still in use so we'll need to let this one finish running and then we'll finish up with other deletions so I'll pause the video and be back when this is done okay once again we've got the last modified with a date and time so that means that the status is successfully disabled and now if we were to click on the distribution we'll have the delete option so we will delete and now we can come back to certificate manager and delete our certificate so let me just back up make sure I've got the right one I'll select the certificate and then delete and confirm that just refresh and that's gone and the last thing is the S3 bucket and the files so back here I'll back up to buckets overall for me and it's the first one in my list here conveniently I will select delete now the bucket is not empty obviously we've got the four files in it so you can empty the bucket we have to say permanently delet delete and empty so that just empties the files that doesn't actually delete the bucket but we can delete the bucket by clicking on the delete bucket configuration here and then we'll need to enter the name of the bucket and delete the bucket and with that the final thing you need to do if you haven't already hit that like button for me and also think about subscribing for more content like this I hope you found it helpful and thank you so much for watching

Channel: Tiny Technical Tutorials

Views: 17,330

Keywords: technical tutorials, technical training, technology, aws projects, aws projects for resume, build a resume on aws, build a cv on aws, s3, route 53, aws certificate manager, cloudfront, chatgpt, aws tutorials

Id: NiCZSdWucZE

Length: 29min 29sec (1769 seconds)

Published: Sat Nov 04 2023