How to implement Static Website Hosting in S3?
Implement static website hosting in S3 by creating a bucket, disabling 'Block all public access', enabling static website hosting with an index document, uploading site files, and applying a bucket policy for public read access.
Amazon S3 can host static websites (HTML, CSS, JavaScript, images) without needing a web server. This is a cost-effective way to deploy sites like portfolios, landing pages, or documentation[citation:5]. The process involves configuring an S3 bucket specifically for website hosting, managing public access settings carefully, and applying the correct permissions to make your content accessible to visitors.
- 1
Sign in to the AWS Management Console and open the Amazon S3 console[citation:2][citation:7].
- 2
Click 'Create bucket'[citation:7]. Enter a globally unique bucket name (must be unique across all AWS accounts) and select your preferred AWS Region[citation:6][citation:7].
- 3
For object ownership, the recommended setting is 'ACLs disabled' (preferred for simplified permissions) unless you have a specific need for legacy Access Control Lists[citation:7].
- 1
By default, 'Block all public access' is enabled for security. To host a public website, you need to disable this setting[citation:1][citation:6][citation:7].
- 2
Under the 'Block Public Access settings for this bucket', uncheck 'Block all public access'[citation:7].
- 3
Acknowledge the warning that this will make the bucket public[citation:7].
- 4
Complete the bucket creation with default values for other settings[citation:5][citation:7].
- 1
Navigate to the bucket's 'Properties' tab[citation:2][citation:5].
- 2
Scroll down to the 'Static website hosting' section and click 'Edit'[citation:2][citation:3].
- 3
Select 'Enable' for static website hosting[citation:2][citation:3].
- 4
For 'Hosting type', choose 'Host a static website'[citation:2][citation:3].
- 5
Specify 'Index document' (required) – typically 'index.html'[citation:2][citation:5]. Important: Enter just 'index.html' without any leading slash (/)[citation:2][citation:3].
- 6
Optionally, specify 'Error document' – e.g., 'error.html' for custom error pages[citation:6][citation:9][citation:10].
- 7
Click 'Save changes'[citation:2][citation:3]. Note the generated 'Bucket website endpoint' URL – this is where your site will be accessible[citation:5][citation:7].
- 1
Open your bucket and click 'Upload'[citation:7].
- 2
Add your website files: the main 'index.html' and any supporting files (CSS, JavaScript, images, folders)[citation:5][citation:7].
- 3
Use 'Add files' for individual files and 'Add folder' to maintain folder structures[citation:7].
- 4
Click 'Upload' to complete[citation:7].
- 1
After enabling static hosting, your site will not yet be accessible—you'll receive '403 Access Denied' because S3 objects remain private by default[citation:5][citation:6].
- 2
To fix this, go to the bucket's 'Permissions' tab[citation:5][citation:7].
- 3
Scroll to 'Bucket policy' and click 'Edit'[citation:5][citation:7].
- 4
Paste the following policy (replace 'your-bucket-name' with your actual bucket name)[citation:5][citation:6][citation:7]:
- 5
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/" } ] }
- 6
Important: Keep the '/*' at the end of the ARN to grant access to all objects in the bucket[citation:10].
- 7
Click 'Save changes'[citation:5].
Return to the 'Properties' tab, find the 'Static website hosting' section, and copy the 'Bucket website endpoint' URL[citation:5][citation:7]. Paste this URL into a browser. Your static website should now load successfully[citation:5][citation:10].
- 1
This configuration grants public read access to all objects in your bucket. Only use this for static website content that should be publicly accessible[citation:7][citation:10].
- 2
For production deployments, AWS recommends using Amazon CloudFront as a CDN in front of your S3 bucket. This enables HTTPS, provides caching, and allows you to keep your bucket private using Origin Access Control (OAC)[citation:1][citation:2][citation:3].
- 3
After completing your lab or if the website is no longer needed, delete the bucket to avoid ongoing storage costs[citation:5].