AWS Project: How to Create a Static Website for Free Using Amazon S3, Step by Step

Рет қаралды 34,674

Күн бұрын

How to Create a Static Website for Free Using Amazon S3 | AWS Tutorials for Beginners
Amazon Simple Storage Service (S3) can be used as inexpensive object storage (think: files, images, videos, logs, etc.). But did you know it can also be used to host a static website? Static meaning no server-side code, but it’s perfect for simple HTML, images and even some client-side scripts.
In a hands-on tutorial, I’ll show you how to create a bucket, enable it for static website hosting, update permissions, and then upload a simple html file and image. Then voila-our website is working!
You might also be interested in this video about the basics of S3: • Amazon/AWS S3 (Simple ...
The JSON code for the bucket policy can be found here: docs.google.com/document/d/1Y....
🌟🌟If you’re interested in getting AWS certifications, check out these full courses. They include lots of hands-on demos, quizzes and full practice exams. Use FRIENDS10 for a 10% discount!
- AWS Certified Cloud Practitioner: academy.zerotomastery.io/a/af...
- AWS Certified Solutions Architect Associate: academy.zerotomastery.io/a/af...
00:00 - Host a static website on Amazon S3 for free or almost free!
00:22 - Reviewing the Free Tier for Amazon S3
01:04 - S3 can only host static websites (no server-side code)
01:25 - Creating a new S3 bucket to host our website
01:52 - Enabling static website hosting on the S3 bucket
02:32 - Access denied! Allowing public access to the bucket
03:12 - Updating the bucket policy to allow read access to everyone
04:03 - Creating the HTML pages for your static website
04:28 - Uploading the index.html and image files to the S3 bucket
04:45 - Viewing the static webpage in S3
05:20 - Deleting the S3 bucket

Пікірлер: 107

@EdsonNascimentoEN 10 ай бұрын

I came accross to your tutorials and loved them. Straight to the point and nice voice. Thanks a lot.

@TinyTechnicalTutorials 10 ай бұрын

Wow, thanks so much! Really appreciate the support! 😊🌟🙏

@salty8752 4 ай бұрын

Ya know, I love how almost every single question in the comment section was answered. That alone is an effort that should be recognized. I appreciate all the work you put into this video and if I have any questions, I know where to ask.

@TinyTechnicalTutorials 4 ай бұрын

Awwww...thanks so much, Salty! 🥰 This means a lot. I *do* try to answer everything, though I know some things slip through the cracks! But I super appreciate the acknowledgement! 🙏🌟🤓

@anthonygonsalvis121 Жыл бұрын

Worked flawlessly for my silly static webpage. Now I know how S3 works! for static websites! THX as always!

@TinyTechnicalTutorials Жыл бұрын

Yay! Great to hear! :)

@rajmaniraj Жыл бұрын

Thank you for all your efforts. I am following all your AWS related videos.

@TinyTechnicalTutorials Жыл бұрын

Thank you so much, Rajavel! Glad you're enjoying them! :)

@betterluckchuck324 7 ай бұрын

This tutorial is much easier than the user guide on AWS' site. Just needed to get a static page up and running, thanks!

@TinyTechnicalTutorials 7 ай бұрын

So glad it helped! Thanks for watching! 🙏🤓🌟

@jaymeyarroch 2 ай бұрын

This was GOLD! Thank you very much for sharing this. Liked, followed, and rung the bell.

@TinyTechnicalTutorials Ай бұрын

I'm so glad it helped!! Thanks for watching, and for doing all the things! 🤓🙏🌟

@user-yw3up5pi1n 3 ай бұрын

I'm in the middle of doing my internship, and I was working on creating a VPC and Subnets for AD. I found your video very informative and easy to understand. Thank you so very much!

@TinyTechnicalTutorials 3 ай бұрын

Yay!! Glad it was helpful. Thanks for watching, and for the nice comment! 🤓🙏🌟 Also good luck with the internship!

@pabloaguirresolana980 8 ай бұрын

Great tutorial, pretty helpful. Thanks so much !

@TinyTechnicalTutorials 8 ай бұрын

Glad it was helpful! Thanks for watching!! 🌟🙏🤓

@krishnadaily Жыл бұрын

Great Efforts & it will useful for beginners !!

@TinyTechnicalTutorials Жыл бұрын

Thanks so much for the nice comment! 🙏

@sandunmadushan1732 3 ай бұрын

Thank you for creating this. I'm following you

@TinyTechnicalTutorials 3 ай бұрын

Yay!! Welcome to the channel, and thanks so much for watching!! 🙏🤓🌟

@gusinthecloud Жыл бұрын

Thank you very much indeed!! Great Tutorial

@TinyTechnicalTutorials Жыл бұрын

You bet! I'm so glad it was helpful. And love the name, @gusinthecloud! 😊🔥☁

@svalyavasvalyava9867 5 ай бұрын

Wonderful tutorial and explanation, thank you infinitely ☺️

@TinyTechnicalTutorials 5 ай бұрын

You're very kind! Thanks for the support! 🙏🌟

@dcflag 8 ай бұрын

Thanks, and nicely done!

@TinyTechnicalTutorials 8 ай бұрын

Thank you too! Glad it helped!! 💪🔥

@myoomotwani Ай бұрын

Thank you for the easy explanation. I am able to create a webpage real quick. I am facing issue opening this page in mobile browser. Maybe its because its http page. I have tried in multiple phones. May be little out of scope of this video, but any help with this one ?

@NomadxSpade 4 ай бұрын

Thank you so much, I was having an issue with the 404 page and thanks to your example I was able to find that it was my bucket policy.

@TinyTechnicalTutorials 4 ай бұрын

Oh, fabulous!! I'm so glad it helped! 💪🔥🤓

@emilieberem5412 Жыл бұрын

Thank you for giving us so helpful videos! It really made me understand better what I have to do🙃 but I do have a question.. do I need to use terraform to deploy a website? Or is it the same as using cloud formation on aws? Sorry if it doesn’t have anything with the video (new to tech)😬

@TinyTechnicalTutorials Жыл бұрын

Hi Emilie! I'm so glad it was helpful! :) When it comes to "infrastructure as code," the AWS service for that is CloudFormation. This lets you define a template (in JSON or YAML) that says something like: "Create 3 EC2 instances, a security group, 1 S3 bucket, 1 RDS database" (or whatever infrastructure you want). When you run that template, you know you'll get the same thing every time. For deploying a static S3 website (like from this video), here's a good walk-through of how you could do that using a CloudFormation template: blog.stefanolaru.com/create-a-static-site-on-aws-with-cloudformation. Terraform is a similar concept, but works with all of the big cloud providers (AWS, Azure and Google Cloud Platform). There are also other tools in AWS for deploying code, things like CodeDeploy. Or Elastic Beanstalk makes it easy to build/deploy applications we well. Lots of ways to do things, but hopefully that helps! :)

@SofianMW 3 ай бұрын

thanks for the tuto!

@TinyTechnicalTutorials 3 ай бұрын

You bet! Thanks for watching! 🤓🙏🌟

@morenikealuko3735 11 ай бұрын

Thank you so much for you help! This was really informative. Do you have any videos on how to create the html you used for the static website?

@TinyTechnicalTutorials 11 ай бұрын

Thanks for the kind words, Morenike! 😊 I unfortunately don't have any HTML videos, but here are some videos that might help you get started: kzfaq.info?search_query=html+for+beginners

@jyolsanatony7406 Жыл бұрын

Thank you. It workes

@TinyTechnicalTutorials Жыл бұрын

Yay! I'm so glad! 😊

@akshaynazirkar4945 Жыл бұрын

Thank you 😊🙏

@TinyTechnicalTutorials Жыл бұрын

Thanks for watching, Akshay! 😊

@Alejandro00710 Жыл бұрын

Thanks for the content, for me is very interesting all AWS is offering and you do a mega job. If is posible can you teach us how works php in AWS, or is a service included, I am very curious about that.

@TinyTechnicalTutorials Жыл бұрын

Thanks so much, Alejandro! So glad you're enjoying the AWS videos! :) For PHP, take a look here: aws.amazon.com/developer/language/php/. There's more info about the SDK, plug-ins and more. And if you scroll down to the "Build" heading, there are some walk-throughs there to get you started with a simple app. Hope that helps!

@zilaxification Жыл бұрын

thank you very much

@TinyTechnicalTutorials Жыл бұрын

You're welcome! Thanks for watching! 😊

@user-mp9zn6zi7z 2 ай бұрын

Thanks for sharing the knowledge, one question, can I use my own domain to host on s3 bucket instead of AWS subdomain?

@TinyTechnicalTutorials 2 ай бұрын

Hi Samer! 👋 Sorry for the slow response! If you still need help, then yes, it's possible to use your own domain with a static S3 site. Here's a tutorial that should get you started: docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html. Hope it helps! Thanks for watching! 🙏🤓🌟

@user-mp9zn6zi7z 2 ай бұрын

@@TinyTechnicalTutorials Thanks a lot.

@kareempatel8250 Ай бұрын

What if I want to host a React js portfolio? How to do that?

@GLORSENZIO 9 ай бұрын

hi, in this case you are charged by aws for the space occupied by the site in s3 and not for the visits it receives, right?

@TinyTechnicalTutorials 9 ай бұрын

Hi! 👋 😊 It's mostly the storage you pay for, but also a little bit for requests made to the files. Here are the full pricing details: aws.amazon.com/s3/pricing

@muchimi Жыл бұрын

thank you!! my personal project involves hosting mp4 vid in S3, using cloudfront to distribute VOD. I'm also experiencing problems viewing the buckets via browser. hmmm also, can you suggest a solution for creating a front page with a shopping cart.

@TinyTechnicalTutorials Жыл бұрын

Hi muchimi! 😊 If you're using CloudFront, you'll need to set up the origin domain so that CloudFront can access the vids (but you can't access them directly in S3 by going to the S3 URL). I actually created a CloudFront video about that a couple weeks ago. It uses an image instead of a video, but the steps should be the same for you: kzfaq.info/get/bejne/fbuWdLSGz6eXkWQ.html. As far as the shopping cart, you won't be able to run any server-side/dynamic code if you're using S3. You can only use static content like HTML pages, images, maybe some CSS or JavaScript. But to use server-side code and a database, AWS has lots of other options. I did a quick search and found this video that might get you started (though I haven't watched the whole thing): kzfaq.info/get/bejne/gM2nfJVj3sXJdnU.html. Hope that helps!

@muchimi Жыл бұрын

@@TinyTechnicalTutorials ahh I glanced at that vid, which I'm starting to watch now, but I don't know code, like react or other languages. I did get my solutions arch assoc level a couple of years ago, but since I have no experience in the field , not job. this project is for myself to teach others my unique method of repairing windshields. so it sounds like I'll be needing several of aws in addition to stripe ... how am I going to learn react.. I feel so unbelievably light on tech skill sets

@TinyTechnicalTutorials Жыл бұрын

Hey muchimi! Yeah, there's lots to learn in AWS! 😊 For React (or any other topics, really), I'd suggest searching KZfaq. There's lots of great free content out there. Maybe "React for beginners" or something like that. Or Udemy is also a good low-cost option for a variety of topics.

@lakshmikrishnaja5968 Жыл бұрын

Hi,plz upload a video of AMI automation By using packer tool. S3 concept is neat and clear.easy to understand,by following ur video,I practiced the lab also. Thankuuuuu so much.for ur effort.

@TinyTechnicalTutorials Жыл бұрын

Thanks for the suggestion, Lakshmi! I've added it to my list for future videos. And I'm glad you were able to get the S3 lab working! :)

@bhagabangahir1966 6 ай бұрын

This is quite interesting one. I think we can directly use the resume you created with gpt 4.0 and directly we can host through S3. And the same we can use in our linked in profile😊

@TinyTechnicalTutorials 5 ай бұрын

Yes! Glad it was helpful! Thanks for watching! 🙏🤓🌟

@Mtncol19 5 ай бұрын

Hi there, I really like your videos and they re really helpful! I have come across a problem- I have tried to load your .html code from the S3 endpoint and it keeps coming up with a 404 error message. I have gone back and made new S3 buckets and repeated it in the Skillbuilder lab as well with their .html as well and it just won't load up and all I get is the .html/css script on the page rather than the simple .html message and/or picture. I don't know if I have done something wrong but it is quite frustrating, as you can imagine!! Sorry for the long message, but can you help at all? Thanks!

@Mtncol19 5 ай бұрын

FOund out the reason- I was using the MacOS native text editor and it wasn't liking the formatting for some reason. USed another IDE Visual Studio Code to help sort out the .HTML and it worked after that. 👍

@TinyTechnicalTutorials 5 ай бұрын

I'm so glad you were able to figure it out, and thanks for posting the solution for others. Strong work! 🤓💪🌟

@khalidelgazzar 2 ай бұрын

Beautiful 😊 .. Any chances of having another tutorial but hosting a Golden retriever this time insread of the kitten?😅😊

@TinyTechnicalTutorials 2 ай бұрын

LOL! I'll add some dog videos to my list for future videos! 🥰🐕

@veryfunny730 10 ай бұрын

HI, do you know if I hosted in amazon Can I sell products of another companies or just amazon products?

@TinyTechnicalTutorials 10 ай бұрын

Hi @littlecrazy710! 👋 Yeah, you can sell any products you want on an AWS-hosted website. No problem!

@sreyamuppalla9219 Жыл бұрын

hi! What is the difference between "Allowing public access to the bucket" and "Updating the bucket policy to allow read access to everyone" steps?

@TinyTechnicalTutorials Жыл бұрын

Hi Sreya! 😊 By default, S3 applies a "deny" policy to everything, even if you've turned OFF the "block public access" feature. So if you really DO want everyone to be able to read, you need to take the additional step of allowing read access. Here's a post that explains it pretty well: stackoverflow.com/questions/70473682/aws-s3-bucket-what-is-the-difference-between-block-public-access-and-a-blank. Hope that helps!

@sreyamuppalla9219 11 ай бұрын

@@TinyTechnicalTutorials Oh I see. So it's just an additional precaution. ty!

@TinyTechnicalTutorials 11 ай бұрын

Yep, you got it! 😊

@ponnamy 5 ай бұрын

Hello, what is the bandwidth limit of this free tier hosting? How much GB bandwidth do I get for each month?

@TinyTechnicalTutorials 5 ай бұрын

Hi ponnamy! 👋 On the Free Tier for S3, you get: -12 MONTHS FREE -5 GB of standard storage -20,000 Get Requests -2,000 Put Requests Hope that helps! 🤓

@tarunkumargupta2998 6 ай бұрын

It is very helpful video for me. But I want to ask :- can I deploy this static website on github?

@TinyTechnicalTutorials 6 ай бұрын

Yes, absolutely! I actually have a video about that here: kzfaq.info/get/bejne/mM-JibpiubO9cYk.html. The website code is hosted in GitHub, then I use Code Pipeline to pull the code from GitHub and deploy it to an S3 bucket. Hope that helps! Thanks for watching. 🤓🙏🌟

@youngzproduction7498 Жыл бұрын

Nice

@TinyTechnicalTutorials Жыл бұрын

Thank you! :)

@user-ci3nj9oe1j 11 ай бұрын

Cool, what if I wanted to create a simple contact-form with google recapcha?

@TinyTechnicalTutorials 11 ай бұрын

Hey gerardo! 😊 I haven't implemented reCAPTCHA myself, but I believe it requires server-side validation. And your contact form would likely require backend code too. So I don't think you'd be able to do that using only S3.

@user-ci3nj9oe1j 11 ай бұрын

@@TinyTechnicalTutorials you are correct, I managed to do it with a lambda function in javascript, and SNS. Thankyou!

@OganicaBean Жыл бұрын

I followed your tutorial and was able to create a test site. How to put publish it with my domain name? Is it still hosting free of charge if I put my domain name?

@TinyTechnicalTutorials Жыл бұрын

Hi Tropic Roast! 😊 The hosting will still be free, but you'll need to purchase a domain name and point it to the bucket. Here are some steps to help: docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started-s3.html

@OganicaBean Жыл бұрын

@@TinyTechnicalTutorials Thank you very much! I will do it. By the way, your teaching style is unique and effective.

@uploadvoice Жыл бұрын

Great, and now with terraform? 😊

@TinyTechnicalTutorials Жыл бұрын

Hi RNR! I'll add it to my list. Thanks for the suggestion! :)

@jj-hs2wy Ай бұрын

I got it Thankwwww

@TinyTechnicalTutorials Ай бұрын

You bet! Thanks for watching! 🤓🌟🙏

@jj-hs2wy Ай бұрын

how to find html file

@arun.sekher Жыл бұрын

No one mentions what is the concept of 'bucket' in AWS S3, every YTber takes it for granted.

@TinyTechnicalTutorials Жыл бұрын

Maybe this will help? kzfaq.info/get/bejne/o6qCotyBq7DanIk.html

@arun.sekher Жыл бұрын

@@TinyTechnicalTutorials Thank you for the video link. So a 'bucket' is nothing other than a top level container to identify a set or collection?

@TinyTechnicalTutorials Жыл бұрын

Yes, you can think of it as a container/folder. In reality, though, S3 stores things in a flat structure (i.e., there are not REALLY folders), but prefixes and delimiters make it seem that way. For example, if I were to store a JPG file named "cat.jpg" in a bucket named "images," the full name of the file is actually "images/cat.jpg." And if I had a second JPG file named "dog.jpg" in that same bucket, the name of that file would be "images/dog.jpg." Because both files are prefixed with "images/" then they're treated like they're in the same "folder." (Maybe more info than you need, but if you ever take an AWS certification, they sometimes test on whether you know that S3 is a flat structure. 😊 Hope it helps!)

@arun.sekher Жыл бұрын

@@TinyTechnicalTutorials It really helps. I am not an IT professional but have been using web hosts from the year 2000 or so and these jargons and concepts AWS uses intimidated and kept me away from using them for more than 7 years or so even if I wanted to start using them.

@TinyTechnicalTutorials Жыл бұрын

I totally understand! There's a lot of jargon (and acronyms!) in AWS. It's part of why I have so many "basics" videos, to help demystify it all! Glad it helped. 😊

@muhammadjunaidmalik3584 2 ай бұрын

how to bind it to a domain name ?

@TinyTechnicalTutorials 2 ай бұрын

Hi Muhammad! 👋 Sorry for the slow response. If you're still looking for help, maybe this tutorial will get you started? docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html

@amitkrmandal9974 10 ай бұрын

Hello Ma'am My name is Amit And I hail from India. Ma'am i got stucked aws s3 bucket website endpoint . How to resolve. I am Waiting for Your ans please.

@TinyTechnicalTutorials 10 ай бұрын

Hi Amit! 👋 Can you provide more context/details?

@Anugrahchola 6 ай бұрын

Mam i followed the same steps shown in the video but i got 404 not found Can you tell me how to solve this problem

@TinyTechnicalTutorials 6 ай бұрын

Were you able to sort this out?

@Anugrahchola 6 ай бұрын

@@TinyTechnicalTutorials no mam

@adamazaz6196 Жыл бұрын

What about the SSL?

@TinyTechnicalTutorials Жыл бұрын

Hi Adamaz! 😊 To use SSL, you can use CloudFront (you can't add an SSL certificate to an S3 bucket directly). Here's a pretty good walk-through: medium.com/@aidan.hallett/how-to-set-up-a-static-website-with-ssl-tls-and-a-custom-domain-using-aws-s3-and-cloudfront-145be108b431. Some of the screenshots are outdated, but there should be equivalent options on the current UI. Hope that helps!

@adamazaz6196 Жыл бұрын

@@TinyTechnicalTutorials Thank you