AWS Project: How to Create a Static Website for Free Using Amazon S3, Step by Step
ฝัง
- เผยแพร่เมื่อ 30 เม.ย. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
![[LIVE] BABYMONSTER(베이비몬스터) - SHEESH | 두시탈출 컬투쇼](http://i.ytimg.com/vi/6q-_9s6a_1g/mqdefault.jpg)
I came accross to your tutorials and loved them. Straight to the point and nice voice. Thanks a lot.
Wow, thanks so much! Really appreciate the support! 😊🌟🙏
Worked flawlessly for my silly static webpage. Now I know how S3 works! for static websites! THX as always!
Yay! Great to hear! :)
Thank you for all your efforts. I am following all your AWS related videos.
Thank you so much, Rajavel! Glad you're enjoying them! :)
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!
Yay!! Glad it was helpful. Thanks for watching, and for the nice comment! 🤓🙏🌟 Also good luck with the internship!
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.
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! 🙏🌟🤓
This tutorial is much easier than the user guide on AWS' site. Just needed to get a static page up and running, thanks!
So glad it helped! Thanks for watching! 🙏🤓🌟
Great tutorial, pretty helpful. Thanks so much !
Glad it was helpful! Thanks for watching!! 🌟🙏🤓
Great Efforts & it will useful for beginners !!
Thanks so much for the nice comment! 🙏
Thank you for creating this. I'm following you
Yay!! Welcome to the channel, and thanks so much for watching!! 🙏🤓🌟
Thank you very much indeed!! Great Tutorial
You bet! I'm so glad it was helpful. And love the name, @gusinthecloud! 😊🔥☁
Wonderful tutorial and explanation, thank you infinitely ☺️
You're very kind! Thanks for the support! 🙏🌟
Thanks, and nicely done!
Thank you too! Glad it helped!! 💪🔥
thanks for the tuto!
You bet! Thanks for watching! 🤓🙏🌟
Thanks for sharing the knowledge, one question, can I use my own domain to host on s3 bucket instead of AWS subdomain?
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.
Oh, fabulous!! I'm so glad it helped! 💪🔥🤓
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)😬
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! :)
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?
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: th-cam.com/users/results?search_query=html+for+beginners
Beautiful 😊 .. Any chances of having another tutorial but hosting a Golden retriever this time insread of the kitten?😅😊
Thank you 😊🙏
Thanks for watching, Akshay! 😊
Thank you. It workes
Yay! I'm so glad! 😊
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.
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!
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.
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! :)
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😊
Yes! Glad it was helpful! Thanks for watching! 🙏🤓🌟
thank you very much
You're welcome! Thanks for watching! 😊
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?
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
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.
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: th-cam.com/video/GUfAQUjA3a0/w-d-xo.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): th-cam.com/video/JgwI22y_eFA/w-d-xo.html.
Hope that helps!
@@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
Hey muchimi! Yeah, there's lots to learn in AWS! 😊 For React (or any other topics, really), I'd suggest searching TH-cam. 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.
Nice
Thank you! :)
HI, do you know if I hosted in amazon Can I sell products of another companies or just amazon products?
Hi @littlecrazy710! 👋 Yeah, you can sell any products you want on an AWS-hosted website. No problem!
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!
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. 👍
I'm so glad you were able to figure it out, and thanks for posting the solution for others. Strong work! 🤓💪🌟
It is very helpful video for me.
But I want to ask :- can I deploy this static website on github?
Yes, absolutely! I actually have a video about that here: th-cam.com/video/biYVW1TMYAU/w-d-xo.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. 🤓🙏🌟
how to bind it to a domain name ?
Cool, what if I wanted to create a simple contact-form with google recapcha?
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.
@@TinyTechnicalTutorials you are correct, I managed to do it with a lambda function in javascript, and SNS. Thankyou!
No one mentions what is the concept of 'bucket' in AWS S3, every YTber takes it for granted.
Maybe this will help? th-cam.com/video/mDRoyPFJvlU/w-d-xo.html
@@TinyTechnicalTutorials Thank you for the video link. So a 'bucket' is nothing other than a top level container to identify a set or collection?
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!)
@@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.
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. 😊
hi! What is the difference between "Allowing public access to the bucket" and "Updating the bucket policy to allow read access to everyone" steps?
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!
@@TinyTechnicalTutorials Oh I see. So it's just an additional precaution. ty!
Yep, you got it! 😊
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?
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
@@TinyTechnicalTutorials Thank you very much! I will do it. By the way, your teaching style is unique and effective.
Hello, what is the bandwidth limit of this free tier hosting? How much GB bandwidth do I get for each month?
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! 🤓
Great, and now with terraform? 😊
Hi RNR! I'll add it to my list. Thanks for the suggestion! :)
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.
Hi Amit! 👋 Can you provide more context/details?
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
Were you able to sort this out?
@@TinyTechnicalTutorials no mam
What about the SSL?
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!
@@TinyTechnicalTutorials Thank you
I did everything you did in this video and I just get a 404 message! Wtf???
Just responded on the other video! 😊
wow its really work thank you i am beginners and its really useful for me 🥰
Yay!! I'm so glad it was helpful. Thanks for watching!! 🤓🌟🙏