Mastering Static Website Hosting and Management with Amazon S3

·

3 min read

What is a Static Website

A static website is a site that delivers pages using a set number of pre-built files crafted from HTML, CSS, and JavaScript. A static website lacks backend server-side processing and a database. Any 'dynamic' functionality linked with the static site is carried out on the client side.

Navigating the Build

  1. Deploy Your S3 Bucket

  2. Enable Static Website on Your Bucket

  3. Allow Public Access

  4. Apply the Bucket Policy

  5. Set Up Your Index File

  6. Set Up Your Error File

  7. Testing

  8. Clean Up

Deploy S3 bucket

Connect to the Amazon S3 Console and navigate to the Create bucket and click it.

-> Select your region
-> Enter your bucket name
-> Scroll down to the end of the page
-> Click Create bucket button.

Enable Static Website on Your Bucket

-> Click on your bucket
-> Select the properties tab
-> Scroll down the end of the properties tab page

-> Select Edit button on the Static website hosting form.

In the Static website hosting settings page:
-> Enable the static web hosting
-> Select the radio button for "Use the bucket endpoint as the web address".
-> In Index document text box enter the file name of the index document. eg: index.html
-> In error document text box, enter the file name of the error document. eg: error.html
-> Scroll down and click on save changes

Allow Public Access

By default, Amazon blocks all public access to S3 buckets. To host the static website on an S3 bucket, we need to edit the block public access settings and allow it.
-> Select and click on the bucket name
-> Select the permission tab
-> Click Edit, under Block public access (bucket settings)

-> Clear Block all public access
-> Select Save changes
-> Type "confirm" in the pop up screen and select "confirm"

Apply the Bucket Policy

Due to the enabled public access, it is necessary to secure our bucket with a bucket policy. The policy will grant only public read access to our bucket, allowing anyone on the internet to access it.

-> Select the bucket and choose the permission tab
-> Select Edit under Bucket Policy

-> Add the required policy in policy editor
-> Make confirm the ARN of the bucket.
-> Scroll down and select Save Changes

Set Up Your Index File

Now the time to upload your index file to the S3 bucket. File name should be the exact name that you provider earlier in the index document file name section.
-> Select your bucket
-> Select Object tab
-> Upload the file by clicking the upload button or drag and drop the file to console

-> Verify your file
-> Select upload button in down of the page

-> Select he close button on the upload status page

Set Up Your Error File

Upload your error document to the bucket the same way you uploaded the index document.
-> Now you can see both the index and error document in the bucket

Testing

-> Select your bucket properites
-> Scroll down and slect your Bucket website endpoint under Static website hosting section

-> Use a new browser window and open the endpoint website
-> It will open your index document

Clean up

As this is a testing environment, you may not need to retain the AWS resources used for creating this static website. Therefore, delete the AWS resources you allocated to avoid incurring further charges.
Note: After deleting these resources, your website will no longer be available.