SAGARFIVE

Projects

Host static website on aws s3 bucket

Step 1 – Create aws s3 bucket using default settings :


(i) Open S3 service by searching it  or  Go to aws dashboard > services > storage > s3

(ii) Click on Create bucket

(iii) Enter Bucket name : Bucket name should be global unique name

(iv) Keep all default settings, go down and click on Create bucket

(v) Once after bucket creation, you will be redirected to buckets webpage, here(on next screenshot) you can see the new bucket name in the buckets list

Step 2 – Upload files to s3 bucket :


(i) Click on the bucket name

(ii) Upload the static website files by drag and drop (or you can upload all files at a time and all folders at a time). If you do not have any static website files then download using below link, extract them and upload to s3 bucket.

⬇️ Download https://github.com/SagarFive/explore-world-bootstrap-website/archive/refs/heads/main.zip

(iii) Keep windows side by side , select all files, drag and drop to upload static website files to s3 and click on Upload at bottom

(iv) It takes some time to upload files to s3 , once after successful uploading of files, summary will be shown

Now click on the Destination(which is the bucket name)

Step 3 – Enable static hosting on bucket properties :


(i) Select Properties tab, scroll to bottom of that page and select Edit on Static web hosting

(ii) Enable the Static website hosting by selecting Enable

  • Add Index document file : which homepage file , usually index.html file is homepage for websites if your website homepage design is other than index.html , mention the file name which is available in the uploaded/s3 bucket files.
  • You can also mention the error page.

After the settings/configurations are completed. scroll down and click on Save changes

(iii) Static website hosting is enabled, we can see the successful dialogue on the screenshot below, and also at Static website hosting block we got a Bucket website endpoint(URL) to access the static website

(iv) Copy and save the static website endpoint nothing URL

🌐 http://explore-world.s3-website-us-east-1.amazonaws.com

If you try to access the website using the ENDPOINT/URL on the web browser, you will see access denied.

Reasons: We enabled public access for bucket , we need to enable public access all object with in the buckets using below any one of methods, then only we can access the static website on internet

(i) Using ACL : Enable ACL(Object Ownership) and                        Select all objects in buckets > actions > make public using ACL
(ii) Using Bucket policy : add a bucket policy to make all objects public access

Step 4 – Enabling Public access to bucket :


(i) Turn off the Block public access (bucket settings) on bucket > Permission > Block public access

By default, every bucket and its inside files are private. We need to explicitly enable the bucket public access to use it for static website hosting.Public access is granted to buckets and objects through using any one or all(i)access control lists (ACLs), (ii) bucket policies, (iii) access point policies, or all

(ii) Click on Edit to Enable public access

(iii) Untick the Block all public access and click on Save changes at bottom of the page

(iv) Confirm the settings: type confirm and click on Confirm

Step 5 – Enabling objects public access by enabling object ownership ACL :


(i) Select Permissions tab > Scroll and go to Object Ownership block and click on Edit

(ii) Select ACLs Enabled, Tick I acknowledge statement and click on Save changes at end of webpage.

(iii) Go to buckets (by clicking buckets on sidebar), Open/click on the bucket , Select all files and folders(objects) > Click on Actions > Select Make public using ACL

(iv) On Next step/page click on Make public button to confirm

Step 6 – Access the static website on web browser using internet :


(i) Open the S3 bucket static website endpoint(url) on the web browser

(We can get url/endpoint by following  step 3 , (iv) point)

We can see below, static website opened using endpoint

7. Trying on another method

Enabling objects public access by using bucket policy


(i) Turning off ACL Method : Edit Object Ownership  > Select ACLs Disabled

(ii) Try to access website using endpoint on web browser, it is not works

(iii) Add  bucket policy : Bucket > Permissions > Bucket policy > Edit > add policy

Bucket policy: To enable all files and folders public in the bucket,(replace bucket-name with your bucket name)

{“Version”:”2012-10-17″,”Statement”:[ {   “Sid”:”AddPerm”,   “Effect”:”Allow”,   “Principal”: “*”,   “Action”:[“s3:GetObject”],   “Resource”:[“arn:aws:s3:::bucket-name/*”] }]}

Click on Save changes at the end of the webpage.

(iv) Access the static website on web browser using internet :

8. Removing/deleting bucket


Once after practising , you need to delete the bucket, if you keep for a long time you will be charged (if you are on trial period also there are limitations),

So if you do not need anymore delete it by following the below steps.

(i) Get inside bucket, select all the files and folders(objects), delete them by clicking on Delete button

(ii) Confirm deleting the files in bucket on next step by typing delete and click on Delete objects

(iii) Get back to bucket list , select it and click on delete button to delete the bucket

(iv) Click on empty bucket configuration, if it asks, next step confirm it type permanently delete and select Empty

(v) Get back to bucket list again, select it and click on delete button to delete the bucket

(vi) Delete the bucket by confirming with typing bucket name and clicking on Delete bucket

It’s done!

Share

Facebook
LinkedIn
WhatsApp
Pinterest
Telegram
Email