AWS Tutorial - How To Host A Static Website With Namecheap, Route 53, Cloudfront, S3 and SSL

[@chaitanyaprabuddha7657]

BEST TUTORIAL ON INTERNET. I was crying for last 3 hours.

[@spencerknight1730]

i spent 2 days fiddling around not able to deploy my own site. your video cleared everything up. thanks so much!

[@jay3108]

Great! It worked! However, I made a few mistakes along the way (that cost me so much time) because I had previously defined buckets and distributions that I applied earlier by following other articles/tutorials. My advice to anyone who struggled with different methods from other tutorials before applying this tutorial: 1. DO NOT MODIFY your pre-defined buckets, distributions, records, etc. in case you tried different tutorials from articles or elsewhere. 2. DELETE any pre-defined buckets, distributions, route 53 hosted zones you had before getting started with this tutorial. 3. APPLY each step along the way CAREFULLY to avoid time-wasting errors. Good luck and thanks Vlad!

[@CodeWithVlad]

Glad it worked for you :)

[@camiedecovich7854]

Thank you! I was completely stuck and could not find a clear explanation of the problem to deploy my site. With your help, my website is live!

[@ProjectGreenfieldSolutions]

Thank you, was struggling with the NameCheap Host entry part. (Just as you mentioned, everyone does this wrong. haha!) Also other parts of this tutorial got me over the finish line! Had done this process before entirely in AWS but new to using external domains.

[@99mconn]

Very well done tutorial - thanks Vlad! One thing to note - at around 14:00 in the CloudFront section when configuring Distribution Settings you may find that the 'Custom SSL Certificate' option is greyed-out. I looked around in the AWS forums and many users had the same issue. I didn't find a definitive answer on why this occurs, but the consensus seems to be that you may need to wait a while for this to become available after you create your certificate - something about the time it takes for your certificate to propagate. I found this to be true - I waited overnight and when I logged back in the next morning this option was no longer greyed out and I was able to proceed with the configuration. Hope this is helpful if anyone else runs into this issue.

[@angelaquijeobando7844]

thank you very much for your comment, it helped me a lot

[@Javoke]

OMG!!! You are such a genius!!! Love your explanation, thanks for sharing your knowledge with the world!! It really helped me a lot!! You earned a new follower!!!

[@thewonderonesie782]

You are my hero.... after I spend tons of time googling, looking for what I was doing wrong, you, like an angel from heaven, had everything I needed in this video. Thank you, thank you, thank you!

[@nmastroianni]

Hi Vlad. I know some views have been critical about the "back and forth" aspect of this video. However, when push comes to shove, this video covered just about everything I was looking for. I too run a small YT channel, and I can attest to the time it takes to make a video (let alone edit them). Often times, it's just better to just get the content out rather than polish it up. *Here comes a 👍and a sub.*

[@091Cash]

I agree! This helped me understand what I was doing at every step of the process, and I just took some notes to organize the info in my head. Awesome tutorial imo

[@ProgrammingWithPax]

Great video Vlad! Thanks for all of this knowledge. As a frontend developer who hasn't dug into AWS as much yet, this video was really helpful. Subscribed!

[@SerottaPDX]

thanks for this and thanks for showing the part about the A records. I think a lot of people forget to set those. Much appreciated.

[@awildcow2]

This is an absolutely amazing guide! Thank you so much! Well done and easy to digest, you saved me SO much time ♥

[@licutricu]

Thank you so much! Almost an year and still so accurate :)

[@CodeWithVlad]

Great to hear!

[@ToMyHe4rT]

Hello BROOOOO, Thank you a lot, your video is very well made, you have a nice voice and flow, and my website is running like hell, thanks again!

[@CodeWithVlad]

Glad it helped :)

[@noblesingh9466]

Thanks Vlad bro, you are taking time out and trying to help us out here. I"ve been following this video and setting up a static site. Having all sort's of issues

[@CodeWithVlad]

Glad to help

[@Madmaniac639]

Hello Vlad, any video on how to host a NestJS Backend? Thanks, great teaching style.

[@zakariya6829]

Hey, I understood everything you walked us though. I had a doubt, why do we use 2 S3 buckets, can't we just have 1S3 bucket and we can redirect url in route53? I have watched videos in case of ec2 instances domain mapping. I did to do that myself but I wasn't getting any option in the case of Alias to records in route53 which I thought to be our parent website with the www. in it. Btw really appreciate your work.

[@giodefreitas]

Awesome guide Vlad! Finally a tutorial that works. I just didn't need to add CNAME record in namecheap for DNS validation. I already have done that with another certificate for the same domain. Would it be because of that?

[@chriiisle]

Super solid video, extremely coherent and well explained!

[@shamsunnabitaqib6180]

great video dude. Keep up this good works..

[@CodeWithVlad]

Thanks, will do!

[@CatalystReaction]

I FUXING LOVE YOU, THERE IS SO MUCH WRONG INFORMATION ON HOW TO PROPERLY DEPLOY SSL CERTS, AND YOURS IS THE ONYL ONE THAT ACTUALLY WORKS, 10000000X THANK YOU'S!

[@CodeWithVlad]

I hope you loved this video! 🙂 📮Consider subscribing to my newsletter: codewithvlad.substack.com 🔥 And follow me on Twitter: twitter.com/vladimir_agaev

[@themonkaffiliate]

Awesome insights. Exactly what I needed. Thanks a million

[@CodeWithVlad]

You're so welcome!

[@dekcode2824]

Thank you! Making the tutorials in Thai. This is very helpful!!

[@ekramsyed]

Very helpful video. also has additional suggestions that actually save your time.

[@CodeWithVlad]

Glad it was helpful!

[@hectorhernandez-wk8jc]

excellent video thank you very much, keep it up

[@aliaksandrsavitski1468]

Great tutorial! Thank you! One note: I don't think you need to add the certificate to the namecheap, at least not anymore, as namecheap allows you to add custom CNAME only if you use the namecheap standard DNS, and when you switch to custom DNS - it will wipe out all your settings for this. Instead, you need to add certificate to the CloudFront distribution

[@CodeWithVlad]

Thanks for the info!

[@aliaksandrsavitski1468]

@@CodeWithVlad no problem. I actually figured out that you need to add certificate first, and then add nameservers to apply domain. It’s just counter intuitive if you have domain attached to AWS already and need to add the certificate

[@justthismango4177]

@@aliaksandrsavitski1468 Hi, I am having the same problem with the new namecheap update. How should I add the certificate to CloudFront? Are you saying to first validate the certificates through the Advanced DNS section on namecheap, and then switch to custom DNS and add the nameservers? Or is there another method I am missing? Thanks

[@Nu1zzz]

Thank you soo much.. it is very help full

[@CodeWithVlad]

Glad it helped :)

[@nelsonnjoku4117]

Please can you make another video since this one is fairly old or does this procedure still work?

[@VincentLabStudio]

Great video. Keep up the good work.

[@lono7732]

Thanks for the video, much appreciated! Question: at 30:55 should the Price Class be as you set or same as for www that is US, Canada, Europe?

[@Qronk]

Great video Vlad, thank you.

[@qone5489]

Great tutorial Vlad! You really nailed in allowing both www and https, as these were the conditions that I wanted to fulfill. Question: When you go to change NAMESERVERS to Custom DNS at namecheap, the host record we inputted before (following your instructions) disappears. Would that matter?

[@CodeWithVlad]

Yeah that is intended :)

[@rochesu]

Two questions... 1. Can we buy and associate SSL to domain from namecheap itself... 2. In case of an angular app - final build produces static files - so what is the advantages of using cloudfront+s3 compared to using hosting from namecheap directly

[@mindas22]

It worked for base url, but when cliked on pretty url like www.example.com/aboutus I get 403 error: This XML file does not appear to have any style information associated with it. The document tree is shown below.

[@donatello4456]

Same problem

[@haganlife]

Add “/“ after .com?

[@liam8469]

same problem

[@mhmadtohme9856]

anyone find the solution of it?

[@josefslezak6644]

Thank you very much!

[@CodeWithVlad]

Welcome!

[@Gigabyteserviceofficial]

if we add AWS's NS record into our domain name provider then whatever A name recorder that we had added in our Domain provider's dashboard will not work correct?

[@CodeWithVlad]

Yes, you basically tell namecheap that aws will handle the records.

[@rogerkent7450]

Great video! Can you tell me how I can modify the website afterward?? Thanks :)

[@CodeWithVlad]

Sorry, what do you mean?

[@alibaba-ez9un]

thank you very much

[@yadusolparterre]

would this work for websites coded in rails, angular or react?

[@CodeWithVlad]

Rails not but angular and react yes

[@yadusolparterre]

@@CodeWithVlad thanks! But why does it work with one framework and not with another one?

[@CodeWithVlad]

@@yadusolparterre It's because RoR requires a server. Static websites are just html/css/js files that do not require a server to work. As opposed to a dynamic website with dynamic content, authentication, etc.

[@plbader3714]

does sometime means for ever in english ???

[@Layput]

The interface of the Cloudfront has changed and I can't follow it. Could you please update?

[@CodeWithVlad]

Hey, this video is indeed old now. I would recommend using aws amplify to deploy your website. Or use other tools like Vercel

[@green-coder]

very useful

[@CodeWithVlad]

Thank you!

[@alejandrochavez4170]

Thanks broth!

[@CodeWithVlad]

Any time!

[@yadusolparterre]

good video but you do not say what you are trying to do, so it's difficult to follow you

[@ManoElMacho]

Dude why did you make it all confusing towards the end? Could you not have edited your mistakes out? I went thru halfway only to make changes to everything smh

[@fantabarack]

Yeah, sorry, but I need to agree with others. Super confusing, I'm an IT guy, but these jumping back and forth is a wrong teaching method. DON'T do that.

[@haganlife]

Looking forward to your excellent tutorial on SSL, AWS very soon! Thank you!

[@josefslezak1432]

Thank you very much!

[@CodeWithVlad]

You're welcome!