Hosting a static website on Amazon S3 (AWS howto)

By | January 3, 2020


Hello everyone! In this video I’m going to
show you how you can host static websites on Amazon S3. But before we do that, let’s
first take a look at what S3 is. Well S3 is a cloud storage service, built by Amazon,
that allows you to store an unlimited amount of files in the cloud. And being the cloud,
you of course only pay for what you use. So why would you use S3 instead of a regular
webhost? Well first of all S3 has great performance. It’s also very secure since you don’t have
PHP or a MySQL database running that can be compromised. It’s low cost in the sense that
you only pay for what you use and it can scale very well. It can scale from 1 request per
second to dozens of requests per second. So what’s next in this tutorial? I’m going to
show you how you can create a bucket. We’re going to enable the static website hosting
feature, we’re going to set a bucket policy allowing all our files to be accessed through
a browser. And than we’re going to test our website and see if it actually works. So let’s begin. So for the purpose of this video, I’ve created
a simple website that I’m going to host on S3, called “My awesome website”. And this
is what it looks like. It’s basically two simple pages with “Hello world, this is my
awesome website’s homepage. There’s even a second page which you check out here”. And
you can click and than it navigates to page2.html and than you can back if you want, back to
the homepage. Okay so let’s now host our static website
on Amazon. Let’s go to the AWS management console, which is at console.aws.amazon.com.
And I’m going to open up the S3 management console here. As you can see I have a lot
of buckets where I can store files. And for my website I’m going to create a new bucket.
I’m going to click “Create Bucket” and I’m going to call it “www.myawesomewebsite.com”.
I’m going to leave the region by default, Ireland. I live in Europe so this is a very
good region. I’m not going to set up logging, so I’m just going to go for “Create”. And Amazon is now creating my bucket and boom,
there you have it. My bucket has been created. So the first thing that we’re going to do
is enable static website hosting for this bucket. So I’m going to click on “Static website
hosting” and I’m going to click “Enable” and now Amazon wants to know what our index and
error documents are. So my index document is very traditional, it’s called “index.html”
and my error document is called “404.html”. These are two files that should be in this
bucket, for the website to work. So I’m going to click “Save” and right now my bucket and
my website is accessible through this URL. So it’s called [reads URL]. So if I click
on it, I see “403 forbidden”. That’s pretty logical because there’s nothing in the bucket
yet. So let’s go into the bucket, let’s click on the name. And I’m going to upload some
files, so here I’m going to say “Add files” and I’m going to select all my files here,
my HTML files. You can’t actually upload folders to this but we’re going to do that manually.
Okay, so there are my files. Now I’m going to create a folder “CSS” and in that folder
I’m going to upload my stylesheet. And there you have it, my website is completely uploaded
to Amazon S3. Now let’s take a look if that website is already
up and running. So let’s go to my website and hit refresh. No, I still got “403 forbidden”.
Why is that? Well, Amazon makes sure that all the files that you upload are not publicly
accessible straight away. This is a security feature. You have two choices: either you
can make every file public – which you can do, you click on a file, open it’s properties
and than you can set the permissions and you can allow anyone to get your object OR you
can do this instantly for all files in your bucket. I think that’s a much nicer solution,
so let’s go for that! So to do that, let’s click on your bucket name and let’s go the
properties – which is by default selected – and we’re going to select “Permissions”.
We’re going to add a bucket policy. So now Amazon asks you which policy I have to add.
Well I have already created a policy here, which is stored on my desktop. And this is
the policy that you need to make all files in your bucket publicly accessible. I will
share this in the video’s description. So basically what you’re saying is that we’re
allowing anyone to read or get an S3 object, and we’re going to allow it for all files
in this bucket, which is the name of my bucket. So let’s save that and let’s save here as
well. And now if I’m gonna go back to my website and I hit refresh, sure enough there is my
website! Hello World! I can navigate to the other page and I can navigate back and all
is very well. Now let’s also test our error document. So here we navigate to “index.html”.
Let’s say I want to go to “blabla.html” which is a file that does not exist. If I hit enter,
Amazon automatically redirects me to my error document. I created this file: “404, oops,
page gone missing”. And so that’s it! We hosted our static website on Amazon S3. I hope you
enjoyed this video! Thanks for watching!

61 thoughts on “Hosting a static website on Amazon S3 (AWS howto)

  1. Shah Rukh Hasan Post author

    Thank you for making it so easy. Love it.
    Question? Kindly please explain how can deploy a php based no-database site on AWS and how much it cost to host a static site on AWS /month?
    – Thanks a bunch for sharing your insights on AWS 🙂

    Reply
  2. Muqit Ur Rehman Post author

    Error : "Policy has invalid resource ", is displayed on saving policy , please help me how to get valid resource

    Reply
  3. Shi Shu Post author

    Nice tutorial. But why the css style is not working in the video?

    Reply
  4. Appernetic io Post author

    It is easier and free to use Github as a host with no disadvantages, and if you want to automate it I have created a service that does everything from setting up a Hugo site, git init, GitHub pages configuration to cloning a theme and managing it all. Check out this video: https://www.youtube.com/watch?v=mzyWcLxgZms

    Reply
  5. Bobby Walker Post author

    would love to see a video showing connecting a domain name to your amazon s3 endpoint url with godaddy domain name 🙂

    Reply
  6. நவநீத குமார் Post author

    In properties we have to choose ,enable web-hosting option, And need to provide our index & error page name in that so that it will work, which is not mentioned in the video

    Please correct me if my understanding is wrong here !!!

    Reply
  7. Shkelzen Muca Post author

    hey ! please can you help me with amazonaws ? do you have facebook or twitter ?

    Reply
  8. Marcos Alexander Gonzalez Post author

    THANKS, AFTER HOURS OF SEARCHING, FINALY FOUND A SIMPLE AND CLEAR TUTORIAL HOW TO UPLOAD AND PUBLISH MY HTML USING THIS TOOL

    Reply
  9. Siddharth Shubham Post author

    Thank You ! I have one question how can i can access the bucket content from my own domain name?

    Reply
  10. Balaji Mohandass Post author

    My website connects with MySQL database . what shall I do ?

    Reply
  11. Rajat Kulshreshtha Post author

    I want to host a website like by only its own name no amazon or anything else in domain name i.e when user types www.mywebsite.com, it should redirect it to the webpage, what should I do?

    Reply
  12. Sanket Thakare Post author

    great and simple video sir… can you share your code you used in website….

    Reply
  13. Mega caffeineman Post author

    I bought my domain name in amazon how can i direct my s3 to that domain name?

    Reply
  14. Elijah Kennedy Post author

    I just wanted to say congratulations on making a really great tutorial. I love the way you walk through every step as if using AWS for the first time (like somebody watching this tutorial would) and then addressing errors as they come up naturally. Really great format for learning >>> I really appreciate you >>> I will definitely check out your other videos.

    Reply
  15. jburns47 Post author

    Great video. The video in the following link will answer a lot of other commenters questions – click on the YouTube version in the video window. https://uncubed.com/daily/learn-howto-host-website-cheap-amazons-aws/#.WULkLw__R6w.email

    Reply
  16. Thaina Rodrigues Post author

    Thank your very much for the information!

    Reply
  17. Carlos Miguel Pérez-Reyes Post author

    The CSS never load!!! 😉

    Reply
  18. 56k - früher war alles langsamer Post author

    Hey, nice tutorial – aws can be very confusing because of it's millions of options. But now everyone can use it for static websites.

    Reply
  19. ADK Post author

    Thanks a ton! I didn't realize it was this simple , thanks to you.

    Reply
  20. krishna chavali Post author

    error.html is loading as individal file,but not when there is an error

    Reply
  21. krishna chavali Post author

    When an error occurs, Amazon S3 is not returning HTML error document.

    Reply
  22. Philip Miller Post author

    short and sweet/ Very good. So much easier than trying to plow through Amazon's thick documentation.

    Reply
  23. Shank Possible Post author

    i have a domain name and i want to host a static website on same with minimal traffic like 100 visits per month , is aws s3 a good option

    Reply
  24. amallal t l Post author

    So the domain name url would be containing this".amazon.blablabla.."?

    Reply
  25. Louisa Guo Post author

    Very simple and clear and straightforward. Thank you. 🙂

    Reply
  26. Sai reddy Post author

    what if the index.html is in a folder in a bucket

    Reply
  27. Seymone Gugneja Post author

    Thank you so much!!! I have a final due tomorrow and I couldn't figure this out at all. You made it so easy to understand!

    Reply
  28. Karteek Chandra Post author

    Very nicely explained. Thanks.Keep up the good work

    Reply
  29. William G. Lewis Post author

    How would you update content after the website is created? I tried editing the index.html file and I still don't see my updates.

    Reply
  30. Martin Walker Post author

    Awesome video, thank you for posting and sharing!

    Reply
  31. ANVIN P S Post author

    very simply explained thanks. is it difficult to update html pages stored on s3?
    do s3 free tier supports high traffic?
    please answer

    Reply
  32. Wolf Solo Post author

    Thanks for the video, greatly recommend people watching for creating your website. Again, happy thanks even though its been years ago. Great job!

    Reply
  33. Mohammmad Sahib Post author

    Awesome vedio tutorial. Very helpful for the beginner

    Reply
  34. Pranay Singh Post author

    my website connects to Postgresql , is it static ? can it be hosted on s3.???
    I have made the website using Django, having used html, css, js, popper.

    Reply
  35. sandeep kumar Post author

    Your CSS file is not working here in S3 but it was working in your computer……

    Reply
  36. Joseph Rhodes Post author

    This is great. Saved me a lot of grief. Thanks so much.

    Reply
  37. Sagar Chowdhury Post author

    can u please share the code snipets for the index,htl,404.html etc

    Reply
  38. Tushar Niras Post author

    check out this guy's other videos too….. thanks me later

    Reply
  39. hodaya ohayon Post author

    it says "Access denied" what have i done wrong?? please help:)

    Reply
  40. Nuno Neves Post author

    This guide is outdated, the S3 creation user journey is changed, and blocks policy edition by default.
    That gave me a permission denied error that took me a while to debug.
    The solution was to uncheck all the public access settings boxes – then edit the policy – then block new edits in the public access settings again!

    Reply
  41. Gopinath Mahankali Post author

    How to Create Domain. Please Help me

    Reply
  42. Tanmay Naik Post author

    Did anybody notice the CSS didn't seem to work?

    Reply
  43. Puneet Rajani Post author

    Hi this was short and precise. Thanks!
    Could you please share the zip for your static html website too!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *