host a static website on amazon aws
In this post i will guide you how to use Amazon Simple Storage Service, or S3, to host a static website. This is an example of "serverless," because you don't have to worry about managing the servers or patching them. First of all sign in to the Amazon management console in order to use their services. Navigate through Amazon AWS on your web browser or simply click this link click here . Let's get started.
Step 1: Create an S3 bucket and configure it as an static website
Sign in to the AWS Management Console and in the Find Services search box type S3 and choose S3
click Create bucket.
In the Bucket name feild, type a unique DNS-compliant name for your new bucket.
For example: thiru-simple-storage-bucket *NOTE: Use your own initials and the current date.*
For Region choose Asia Pacific (Mumbai). In fact s3 doesn't require any location.
2. Click Next. Leave the current settings alone:
3. Click Next again.
4. Under Public access settings for this bucket de-select the following:
Block new pubilc ACLs and uploading pubilc objects.
Remove pubilc accss granted through public ACLs.
Block new public bucket policies.
Block public and cross-account access if bucket has public policies.
5. Click Next.6. Click Create bucket.
7. Click on the bucket and select the Properties pane, choose Static Website Hosting.
8. Click the endpoint. It should open in a new tab and show an error 403 forbidden. Which is exactly what we would expect right now, as no permissions have been added yet.
Select Use this bucket to host a website.
Under Index document type in index.html.
Under Error document type in error.html
9. Click Save. So we can move on to adding public permissions to this bucket.
Select the Permissions tab and choose Bucket Policy.
Paste the following code below in the Bucket policy editor. Make sure to change the Resource arn with your bucket name.
You must change arn:aws:s3:::thiru-simple-storage-bucket/* to your bucket name.
10. Click Save.
11. This bucket will now have public access as it will host our web objects.
Try it now. Go to that tab where your website is hosted (where we had the 403 forbidden message), and press refresh.
You will notice you can now see absolutely nothing. i.e you will get a 404 error.
This is because we have nothing in our bucket to show, so the browser is telling us, "nope can't find anything here". At least this proves that the bucket is now public and we did everything right so far.
Now let's get the website up there.
Download the sample website template https://drive.google.com/open?id=1AyQuoHRz8y8WCvZUBtlKov0p8U4YL1JA
Unzip it on your local machine.
Click the Overview tab and click on your bucket thiru-simple-storage-bucket. (Keep in mind your bucket will have its own unique name that you gave it).
Click Upload and drag the files needed for the site from your local file explorer.
Tip: you can press "add files" button, but i recommend dragging.
Leave the permissions settings alone as the defaults.
Scroll down to Metadata.
For Header choose Cache-Control and for the value enter max-age=0 and click save.
Double Check it.
verify connectivity by browsing to your tab (website) where you had the 404 error.
You should see our Website loaded on the browser.
Leave a comment
Get trained in Learny Technologies and develop your own applications.
New batch starts from Nov 18th.