AWS Tutorial - Website hosting with S3, Route 53 & Cloudfront using Namecheap domain

NAMECHEAP UPDATE!!!
Namecheap no longer allows you to add host records if you're using a custom DNS. The workaround is pretty easy though. Don’t follow the video guide between ~2:49 - 4:15 which is the part where we add the host record to namecheap. Once you reach the end of the video, follow these steps:
1) Go to AWS Certificate Manager (ACM) within your AWS console
2) Click on the certificate in question
3) The next screen should have some Cards such as Certificate Status, Domains, Details, etc. Within the Domains card you'll see a button for "Create records in Route 53". Click that.
4) The next screen will ask you which domain you’d like to apply the records to. Choose which one you want and click “Create records”.
That’s it!
~~~~~~~
This is the ultimate and fully comprehensive 2022 guide to setting up your own static website with a domain purchased through Namecheap and hosting set up through Amazon Web Services using S3, Route 53 and Cloudfront.
I'll take you through every step which includes:
1) Authenticating your Namecheap domain with Amazon through Amazon's certificate manager.
2) Creating your Amazon Route 53 nameserver records and inserting them into your Namecheap domain account.
3) Creating your Amazon S3 buckets and setting them up for static website hosting and redirects.
4) Creating your Amazon Cloudfront distrubution which includes a crucial piece of information that many guides neglect to mention.
5) And redirecting your domain traffic to your Cloudfront distribution.

Пікірлер: 117

  • @user-ux2kt5vs4j
    @user-ux2kt5vs4j8 ай бұрын

    Bro just casually slipped a 19 min Power Tutorial that sums up everything there majorly is about Hosting sites on AWS. big thanks

  • @drettlinking
    @drettlinkingАй бұрын

    It took me longer to deploy a website than it did for me to build it. It would have taken even longer if it weren't for your video. Thank you so much, I hope your pillow is cold on both sides, always ❤

  • @aeronesto
    @aeronesto7 ай бұрын

    I was able to follow along without issues almost two years later! It's 12-01-23 Wow, this would've been a headache without this video! Thank you!

  • @tsuyae1768
    @tsuyae17682 жыл бұрын

    thanks so much! you were completely right about other tutorials being hung up at that part. you saved me weeks.

  • @TruthNLiez
    @TruthNLiez Жыл бұрын

    I can't even tell you how much you helped me out with this video!! Your work is greatly appreciated, man. Thank you!! 🙏🏾🙏🏾

  • @adegbamiyestephen2521
    @adegbamiyestephen2521 Жыл бұрын

    This is probably the best video for this topic, exactly what i needed ❤❤❤❤❤

  • @derekchua6188
    @derekchua6188 Жыл бұрын

    I was stuck on this for over a week! Thank you so much for this video!

  • @Tech_3alsree3
    @Tech_3alsree36 ай бұрын

    never enjoyed a tutorial that much xD your comments are awesome :"D

  • @meow-jd6qb
    @meow-jd6qb2 ай бұрын

    super grateful for your help brotha❤

  • @redplanet76
    @redplanet76 Жыл бұрын

    Thank you for this. Extremely helpful. I think you have to manually input your own permission policy now but the video was so helpful. Saved me HOURS and HOURS.

  • @caringbilal
    @caringbilal Жыл бұрын

    WOW!! You really saved me days of searching this solution that you have shared in the origins tab, even namecheap support team couldn't help get it sorted :) Hats off to you!

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    Really happy I helped sort it out for you 💪

  • @khaledmousa380
    @khaledmousa38011 ай бұрын

    Excellent Video, Thank you Christopher!!

  • @srijeetbiswas
    @srijeetbiswas8 ай бұрын

    Thanks Christopher, saved my day ! was very easy to follow and helped to get going ! Cheers !

  • @SGUsyncgamingusa
    @SGUsyncgamingusa6 ай бұрын

    Still applicable in 2024! You're a life saver, it helped me learn some Basic AWS 🙏

  • @jonmultimedia
    @jonmultimedia Жыл бұрын

    Awesome, exactly what I needed :D Thank you.

  • @DrKaoliN
    @DrKaoliN22 күн бұрын

    Thank you, this saved me a lot of time.

  • @kazami6317
    @kazami6317 Жыл бұрын

    Thank you so much! An updated, straight to the point video saved me. Was stuck for an hour of watching and restarting with all the other crummy vids haha

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    I'm glad I saved you some time!

  • @johnuloks2693
    @johnuloks26932 жыл бұрын

    Indeed the video is the best you can find. Thank you very much

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    2 жыл бұрын

    You're very welcome. I'm glad it helped

  • @selvakumarforyou
    @selvakumarforyou Жыл бұрын

    wove, you are amazing brother. i have been stuck here for almost a month. thanks alot.

  • @user-kd1gq7yw3d
    @user-kd1gq7yw3d11 ай бұрын

    Hey, huge thanks for this! Watching some other videos was a total nightmare. Your tutorial actually makes sense. After watching it, I noticed some changes and features on AWS pages, and even though there were still some issues, I managed to figure them out with a bit of extra research and troubleshooting. It's unbelievable how many tutorials are outdated in Aug 2023, but yours is up-to-date, and it's pure gold. Changes only OAI settings in CloudFront. Stay awesome!

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    11 ай бұрын

    Thanks! Glad it was somewhat current. And good on you for doing a bit of research too 💪

  • @TDIVDev
    @TDIVDev Жыл бұрын

    You solve all my dudes. Really thank you bro. Nice explication and step to step. 👏

  • @kumailn7662
    @kumailn766210 ай бұрын

    one of the awesome crystal clear, and complete video... @cristopher you rock!!

  • @khoffyah
    @khoffyah8 ай бұрын

    1 year after, this's still working perfectly. I struggled the day before finding this video trying to set up every thing with AWS and a domain name from Namecheap. Thanks

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    8 ай бұрын

    Great to hear it’s still working 👍

  • @quentinm3124
    @quentinm3124 Жыл бұрын

    I never comment on videos usually. But thank you so much for this, that's the only valid tutorial i've seen, and i've seen a lot !

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    It's comments like these that keep us creators going! Thank you so much. I'm glad it helped you!

  • @victorhugo3477
    @victorhugo3477 Жыл бұрын

    thank you so much amazing tutorial !! already like and i subscribe.

  • @MohiuddinAbdulKader
    @MohiuddinAbdulKader Жыл бұрын

    Very informative tutorial.

  • @labrat-0171
    @labrat-0171 Жыл бұрын

    I was lost before watching this vid, thanks a bunch mate. Algorithm!!! do your thang

  • @ezekielmauricio5209
    @ezekielmauricio52092 жыл бұрын

    This is absoolute gold! 🚀

  • @guillaume5623
    @guillaume5623 Жыл бұрын

    Priceless vidéo ! Thank you 👍

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    You're very welcome!

  • @codersraj8223
    @codersraj8223 Жыл бұрын

    Thanks friend, I successfully launch my first AWS based website. thousands of thanks

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    That's excellent! Congrats :)

  • @rakeshchauhan-op8qw
    @rakeshchauhan-op8qw Жыл бұрын

    This is quality. I liked your jokes and it was very accurate

  • @colossuselka-zc7hb
    @colossuselka-zc7hb10 ай бұрын

    great great video! thank you!

  • @brsseb
    @brsseb11 ай бұрын

    Thank you so much!!!!

  • @dipeshparma8605
    @dipeshparma86054 ай бұрын

    Really helpful

  • @joeblue9129
    @joeblue91292 жыл бұрын

    Welcome back sensei 😁

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    2 жыл бұрын

    haha thanks Joe. Maybe not in the context you were hoping but this was more of a reminder guide for me in the future. And if I can help others avoid a headache, I should make my notes public :)

  • @ZoQed

    @ZoQed

    2 жыл бұрын

    @@ChristopherPhillipsDev Very interesting and thank you for sharing your notes with us !!!! It doesn't matter if it's about c programming , keep going Christopher and see you later in another video ;) !

  • @mansoorkhanyousefi7709
    @mansoorkhanyousefi77092 жыл бұрын

    oh man thank you very very very much you save my Time

  • @betelhemgebresilasse7419
    @betelhemgebresilasse7419 Жыл бұрын

    Thank You !!!

  • @reiearthvlogs4906
    @reiearthvlogs49062 жыл бұрын

    Thank You for this Tutorials..

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    2 жыл бұрын

    You're very welcome!

  • @g14wx17
    @g14wx17 Жыл бұрын

    You save me a lot of time!!!, thanks a loooott!!!!!

  • @catapultopus7362
    @catapultopus73622 жыл бұрын

    After so many tries. i finally hosted my 1st website. Thanks Christopher. If you ever happen to come to Mumbai, India. I'll host you for free. All meals and bed to sleep in.. :-).. Cheers to you

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    2 жыл бұрын

    This makes me really happy to hear! I'm glad I was able to help you. Congrats on your site launch!

  • @dineshindn4404
    @dineshindn44049 ай бұрын

    Excellent

  • @luisvirrueta7702
    @luisvirrueta77022 жыл бұрын

    Thank u so much

  • @hdrism3841
    @hdrism3841 Жыл бұрын

    amazing thank you , save my live

  • @abelkibebe577
    @abelkibebe577 Жыл бұрын

    I LOVEEEE UUUUU

  • @MrJhonSerna
    @MrJhonSerna Жыл бұрын

    You helped me a lot, thanks man... Have a question, if i want to do some change just save the files in the bucket and its all?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    If you're just talking about the website content you want to serve, yep!

  • @clarf
    @clarf Жыл бұрын

    Great stuff. I had previously set up AWS hosting for a few static sites but more recently when attempting to do it again I got stuck so this helps a LOT! One thing I noticed is that there is no reference to 'Bucket Policy' - is that redundant? I guess I'll find out soon enough as I'll be using your method shortly with a new domain 🙂

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    Be sure to check out the description. I've added some info there that pertains to namecheap

  • @GiovanniGReid
    @GiovanniGReid Жыл бұрын

    your very funny, I like your content

  • @jomavillanueva4549
    @jomavillanueva4549Ай бұрын

    For anyone having trouble displaying the website, I still had to add NS Records in NameCheap (Advanced DNS) of the domain, you can remember that in kzread.info/dash/bejne/dKGp0dOoj62_ZMo.html you have 4 NS Records, create 4 of those in the Host Records of NameCheap, Type: "NS Record", Host: "www", values: get from your Route 53 record (you can include the .), ttl: automatic After that, you should have no problem

  • @user-ov3rw3dn7u
    @user-ov3rw3dn7u7 ай бұрын

    Hi , can you please explain same thing ,if we have to only implement cloudfront in pre-working website DNS on Godaddy already managed hosted in AWS using . Allready using L.B before connecting to EC2 instance for our application.

  • @NathanBrownisawesome
    @NathanBrownisawesome Жыл бұрын

    Mannnn,I found this like a year later after I figured this all out myself from a ton of stack overflow & stuff 🤣, great video tho

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    At least you got it! And the satisfaction of accomplishing it yourself is even better

  • @MyPodie
    @MyPodie9 ай бұрын

    Hi Chris, thanks so much for this tutorial! You saved me tons of hours with this. Just curious, I have made some changes to the nextjs/react codes, rebuilt, and updated my S3 bucket. However the linked custom domain that I set up previously seems to not respond to the changes I made in the codes. Do I have to delete and redo everything just to update my website? Much appreciated once again!

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    9 ай бұрын

    So you made changes to your code and uploaded the changes to the bucket and are not seeing the results? If that's the case, it might just be propagation timing. Since i'm responding to your comment you made 16 hours ago, has anything happened since? I wouldn't be able to offer much additional help but I hope you sorted it out!

  • @MyPodie

    @MyPodie

    9 ай бұрын

    @@ChristopherPhillipsDev so apparently it still doesn't change for me on my end but people in different areas do see the change. So I guess it's the cache thing that's messing this up? Thanks for getting back to me!

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    9 ай бұрын

    @@MyPodie I’m not sure and I couldn’t offer effective advice since it could be anything and not just caching. I wouldn’t think that would take this long. Maybe try incognito mode or a different device?

  • @MyPodie

    @MyPodie

    9 ай бұрын

    @@ChristopherPhillipsDev I've figured it out! Just head over to the *Invalidation* tap of the desired distribution, and create an invalidation by adding '/*' inside the *Object Paths* to force Cloudfront to stay up to date with everything inside the S3 bucket. Appreciate the help Chris and please do keep up the good works. The tutorial was super helpful! 🙏

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    9 ай бұрын

    @@MyPodie nice! Congrats! Glad you were able to solve it.

  • @fuckbagmartin1384
    @fuckbagmartin1384 Жыл бұрын

    Dude, thank you so much for this. Watching some of these other videos has been pure hell on earth. Thank you for making a video that actually makes sense. There's been some slight variations and features added in the AWS pages since this video, but I was able to still figure it out with some minor extra troubleshooting/research. Cant believe how many I watched that just totally disregarded connecting via https among other things. This video is gold. Cheers!

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    Thanks so much for this amazing comment 💪. Glad I was able to shine some light on it

  • @kumailn7662

    @kumailn7662

    10 ай бұрын

    True

  • @kumailn7662

    @kumailn7662

    10 ай бұрын

    @@ChristopherPhillipsDev do we have to have the bucket name same as of domain?

  • @agustinariel8942
    @agustinariel89422 ай бұрын

    👏👏👏👏

  • @JackHooker
    @JackHooker Жыл бұрын

    Great tutorial! Thank you for sharing. I was wondering if you also know how to set up a custom email address with a service like Zoho using this AWS setup.

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    Hi Jack! Glad you liked it. As for your question, I'm sorry, I do not.

  • @JackHooker

    @JackHooker

    Жыл бұрын

    @@ChristopherPhillipsDev No worries. I think I may have figured it out in theory. I’ll follow up with the answer if I manage to set it up in practice : )

  • @JackHooker

    @JackHooker

    Жыл бұрын

    Hi, I figured it out in practice. I was originally attempting to use Namecheap as the registrar, Zoho for the email, and AWS S3 for the hosting with a CloudFront distribution. I failed to figure out how to set this up. However, once I transferred my domain name over to AWS, Route 53, and set up hosting in an S3 bucket with a Cloudfront distribution over HTTPS, I was able to easily set up email for my domain name using AWS Workmail. The tutorials I followed are here: kzread.info/dash/bejne/n6CnmtaimayZpcY.html kzread.info/dash/bejne/mWeiprNpXc3eg7g.html

  • @MitsubishiHondaAcord
    @MitsubishiHondaAcord Жыл бұрын

    just wondering in what situation you would use s3 storage to host instead of amplify?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    11 ай бұрын

    I don't have experience with amplify so I couldn't offer and feedback

  • @worldofnissanka9222
    @worldofnissanka92229 ай бұрын

    I didn't find any KZread video for my issue. if you understand my issue please make an video...I have a dynamic website and My domain DNS set to Cloudflare and I hosted my site using a cyber panel webserver. my VPS IP is set to Cloudflare for the domain.. also I have set an AWS S3 bucket for WordPress media upload but the photo URL comes with the AWS bucket default URL.. how can I change the URL to my domain without the AWS bucket default URL?"

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    9 ай бұрын

    I’m sorry, I don’t know 😔

  • @sebastiaanvv
    @sebastiaanvv Жыл бұрын

    this was a good video. But WHY is it, that with every AWS tutorial that I follow something is off. Why do I have two different CNAMES instead of you who has two identical names. And at the end stuff is not working for me. No website is showing. Anyway. I still gave the thumb up cause its clearly good stuff.

  • @fishtang1
    @fishtang112 күн бұрын

    hi @christopher Phillips I can't create origin. I copied from s3 end point. the error says "The parameter origin ID must be unique." Would you happen to know why I have this error? thanks.

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    7 күн бұрын

    I haven't looked at this in awhile (meaning aws material). I don't recall what the origin ID pertains to but the error message suggests it's not a unique identifier (meaning you already have something named exactly as you're trying to create).

  • @user-li9es1eq1c
    @user-li9es1eq1c2 жыл бұрын

    I was stuck in namecheap for 2 weeks, since I don't know the value of DNS configuration is the CNAME's name in SSL certificate, that make DNS validation pending for 2 weeks. I read many docs and watch several youtube. Sad to see your video until now.

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    2 жыл бұрын

    I'm sorry it was difficult for you to get where you wanted, but glad I was able to help!

  • @haroldw4940
    @haroldw4940 Жыл бұрын

    Stuck on (4) Creating your Amazon Cloudfront distrubution which includes a crucial piece of information that many guides neglect to mention. Each time I paste in the path I get this message in the "Name" panel. "Name is in use. Name must be unique" Not sure what happening or why it's not allowing me to create the origin

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    The error message is providing the answer. Whatever your pasting in is already in use. I suspect there's some very minor detail in the tutorial you're potentially missing. Unfortunately I don't have any direct answers. Maybe try restarting the tutorial and taking it slow to make sure every step is followed?

  • @haroldw4940

    @haroldw4940

    Жыл бұрын

    @@ChristopherPhillipsDev Thanks... Video is super clear and a time saver. Much appreciated. 😊 I will retrace my steps from the beginning. AWS did update their menu, some of the selections in your video has slightly change but not by much. They is no OAI option any longer. Your right, I definitely missed a minor step somewhere.

  • @haroldw4940

    @haroldw4940

    Жыл бұрын

    I found the OAI option. It was located in the legacy radio button. This was the part I missed

  • @Layput
    @Layput Жыл бұрын

    how to redirect the website to route to www even if you typed the naked domain?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    It's been awhile since I've watched the video but I believe there was something there detailing how to redirect. It has to do with setting up 2 buckets.

  • @kingsleysaba4204
    @kingsleysaba4204 Жыл бұрын

    thanks alot But it seems namecheap no longer allows nameservers when premiun DNS is active What can I do?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    I'm sorry, I don't know

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    Hi! I added an update to the description text on how to solve this if you're still interested in using this for yourself.

  • @ashokbuttowski
    @ashokbuttowski Жыл бұрын

    Followed exact same steps BUT when i hit the URL from cloudfront distribution > getting this error [solved] This XML file does not appear to have any style information associated with it. The document tree is shown below. InvalidToken The provided token is malformed or otherwise invalid.

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    Unless they changed something, I think you're missing something. Others haven't had an issue. I'm not sure what token the error message is referring to. In my experience, the token is login related. I'm sorry I'm unable to provide more feedback

  • @ashokbuttowski

    @ashokbuttowski

    Жыл бұрын

    @@ChristopherPhillipsDev Oh fine, They have added things like modifying bucket policy manually, apart from that i dont see much changes and thanks for the quick response!!! [EDIT]: Also, I have my buckets in different region, does that matter???

  • @DevDev-lo1sb
    @DevDev-lo1sb3 ай бұрын

    For replacing files just can we change the files in s3

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    3 ай бұрын

    Yep, just make sure you’re not deleting a dependency. Meaning if one file requires another, that it’s in the bucket

  • @DevDev-lo1sb

    @DevDev-lo1sb

    3 ай бұрын

    How can I contact you?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    3 ай бұрын

    @@DevDev-lo1sb there’s an email in the about section of my channel

  • @jemjem8902
    @jemjem8902 Жыл бұрын

    Will this be the same for ec2? I'm so stuck with it.

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    I'm sorry, I don't know 😔

  • @jemjem8902

    @jemjem8902

    Жыл бұрын

    @@ChristopherPhillipsDev It's okay, I'm so frustrated and just switched to s3. I think s3 is good enough for my portfolio requirements. Thanks!

  • @Layput
    @Layput Жыл бұрын

    I deleted the contents of the bucket but the website still displays the contents. How do I fix this?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    I waited until responding. How does it look now? If changes haven't been updated by now, could be something else wrong that I don't know of. But propagation should've happened by now

  • @Layput

    @Layput

    Жыл бұрын

    @@ChristopherPhillipsDev Yes. After almost 24 hours, the old files in the bucket are still the ones showing although I have already deleted them. I tried to disable the deployment in cloudfront to see if I can restore the page. After seeing the error page and then after enabling deployment, the old deleted website files in S3 bucket are still the ones showing. Does cloudfront or Route 53 cache these files somewhere else and cloudfront is deploying it from those cache and not directly fetching from S3 bucket? I really hope you could investigate as I can't access Amazon helpdesk due to lower tier subscription. Also, I tinkered with staging and now it is messed up and I can't delete the staging distribution. What should I do?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    @@Layput I'm sorry but I can't investigate since it's not my account/issue. I've used chatGPT to investigate issues outside of Amazon and it's quite a good tool for helping at least point me in the right direction. Maybe give that a shot?

  • @rakeshchauhan-op8qw
    @rakeshchauhan-op8qw Жыл бұрын

    Know how to redirect non-www to www using this?

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    I'm sorry. It's been awhile since I've played around with this. Maybe someone else can assist?

  • @rakeshchauhan-op8qw

    @rakeshchauhan-op8qw

    Жыл бұрын

    @@ChristopherPhillipsDev no worries. Thanks for the reply though

  • @kumoitojp
    @kumoitojp Жыл бұрын

    Wow. Great tutorial! You’re close to 1000 subs! Congrats! I’ll sub too and follow your content. Good luck and thank you so much!

  • @ChristopherPhillipsDev

    @ChristopherPhillipsDev

    Жыл бұрын

    Thanks! Yep, closing in 😁