Static Website Hosting Using AWS S3
In this story, we are hosting static website using S3 service
For a novice in AWS this is a small project get started.This is also first part of official of AWS in Website & Application.
Requirement for this project: AWS account, knowledge Static website.
Main few points of this Story: Static websites deliver HTML, JavaScript, images, video and other files to your website visitors, and contain no application code and no database work in back-end. Static websites are very low cost, provide high-levels of reliability, require almost no IT(Information-technology) administration, and scale to handle enterprise-level traffic with no additional work.
Type of Web-site?
There are two main types of “website-static and dynamic”. A static site is one that is usually written in plain HTML (Hypertext multiple languages)and what is in the code of the page is what is displayed to the user. A dynamic site is one that is written using a server-side scripting language like as P.H.P(Personal home page), A.S.P(Application server provider), J.S.P(Java-server Page), or ColdFusion.
What is web hosting?
Web hosting is a service that allows organizations and individuals to post a website or web page onto the Internet.web host, the web hosting service provider, is business that provides the technologies and services needed for the website or webpage to be viewed on the Internet. Websites are hosted stored, on special computers called servers. When Internet users want to view your website, all they need to do is type your website address or domain into their browser. Their computer will then connect to your server & your webpages will be delivered to them through the browser.
Most hosting companies require that you own your domain to host with them. If you do not have a domain, the hosting companies will help you purchase one.
Follow this is the step of Website Hosting.
step 1: login with your AWS account. (Educate account of AWS)
step 2: press AWS Account and get this screen. if you start to educate account you get 75$ credit in your account.
Step 3: press AWS Education Stater Account and get to this screen.
Step 4: press “AWS-Console’’ given in yellow button and final you are in the console of AWS.
Step 5: Search in Find service “S3” means Simple Storage Service OR Go STORAGE service and find S3. Get screen like this.
Step 6: Press “+ Create Bucket” button and get this screen.
Step 7: Type the unique name of bucket and press next and get to this screen.
Step 8: Set permission & press next and get to this screen.
Step 9: Press next and get to this screen.
Step 10: Your created bucket will show like this.hear in this screen much older bucket are present.
step 11: Press your bucket name and get a screen like this.
Step 12: Press the Upload button and upload your website. You can download direct static website given in this link (<- Press Link).
Its website is “One Page Website Templates” provide free and paid HTML template.
Download this template for example.Unzip this file.
Step 13: Press the upload button in the S3 bucket and get this screen.
Press upload.
Step 14: Upload your unzip HTML template simply drag and drop all this file.
Step 15: Select all this file and press open. this operation performed your all website-related file will upload in S3 bucket after uploading you can see this screen.
Step 16: Press next and Set permission. You can see here read Object & Object permission Read & Write are Enable make sure this all is checked.
Step 17: Press Next button and get this screen.This is set Properties for your file will where store.many type of storage are the present there but for simplicity choice “Standard”.
Step 18: Press Next button and get Review Screen Here you can see your file size. Given permission & Given properties and many more button here in header side finally press “Upload”.
Step 19: Your uploaded file show like this in your bucket.
Step 20: In the same window, you can see 4 types of button given to you.
Step 21: For Uploading your website publicly then set permission to host your website press Permission button given at upper side Blue button and you can see this screen.
Step 22: Go Static Website Hosting Menu and you get to this screen.
Step 23: Check & enable Static Host a Website and enter name of index.html file & error.html file.Like this and Press “save” Button.
Step 24: After saving this file you can see enable Static website Hosting this menu. And Bucket hosting is checked.
Step 25: Set Permission & make enable to access to all Public mean all user sees our hosted website in the browser. Go to Permission Button.
Step 26: In step number 25 you can see Block all public access so by default on public can not access your data or file was uploaded in the bucket. If we give access to show our data publicly then off Go “Edit” turn off this all permission like this and press “Save”.
Step 27: after pressing save button this pop-up menu comes on your screen.
Step 28: Press “Confirm” button and display the message on green color “Public access setting updated successfully”.
Step 29: Go main S3 console and select bucket all file. Go the “Action” button and press “Make Public”.
Step 30: After pressing “Make public” you can see all file are selected and press blue button are present in the downside of the menu “Make public”.
Step 31: Go Back your open your main S3 Bucket console. Open your bucket here my bucket name “unicknametypehear”.
Step 32: Go properties click Static website hosting and press given link.
Step 33: You can see your hosted website like this.
Step 34: But it is not your web-site its name “MARK PARKER” you need your name then open downloaded website in NOTEPAD++ (You can also download notepad ++ given link if you not have) or Sub Lime Editor or choice any text editor and changes per your rearmament.
Your Static Website hosting is complete if you modified file then follow this are steps.
I change the name “MARK PARKER” to Infinity_Anchor and type I love AWS.
Step 35: Delete your old index.html file in S3 Bucket like this.
Step 36: Upload Modified File And you can Direct Press UPLOAD Button and also next next ...
Step 37: Make once again this file in Make-public like this.
Step 38: Repeat step number “32”. And the press has given link and its show link this.
This all about this story. If you have any query about this topic or face error then contact me.
LinkedIn :- http://linkedin.com/in/morikuldip37
Mail :- morikuldip62@gmail.com
