Hosting a static website on AWS S3 (Simple Storage Service)Bucket
Static websites are limited in interactivity as they lack server-side processing. User interactions are primarily limited to navigating through the pre-defined pages.
Benefits of hosting your website on S3:
1. S3 supports hosting static websites directly, allowing you to leverage its simplicity and performance for serving static HTML, CSS, JavaScript, and media files.
2. S3 can be integrated with Amazon CloudFront, enabling you to serve your website’s content globally with low latency through the AWS content delivery network.
3. S3 bucket hosting is often more cost-effective compared to traditional web hosting services, as you only pay for the storage and data transfer you use, with no additional server or infrastructure costs.
Some Drawbacks:
- Limited Server-side Processing: S3 is primarily designed for static content hosting and lacks server-side processing capabilities. If your website requires dynamic server-side processing or database access, you may need to consider alternative hosting options.
Steps:
First we will create S3 bucket on AWS:
unchecked to block public access as you want to allow public access to your site:
If you want to keep data even it deleted then enable versioning option as it just put delete or overwrite marker on object when it deleted or overwrtite but it charges you extra.
Once bucket is created upload all the content of your website like images, css, index.html file etc as objects.
Objects uploaded:
Enable ACL in object ownership:
Note: AWS recommends to use bucket policies to allow public access instead of enable object ACL, you can write policies in JSON format.
Now go to all objects mark all objects click on action tab and select make pubic using ACLs.
Now enable static website option enable.
Bucket⇒ properties⇒ static website hosting (enable it). Also write the name of your index.html file there:
Now copy the bucket endpoint and paste in your browser to access website.
Our static website is accessible through bucket endpoint:
