Introduction:

Building and hosting a static website can be a quick and cost-effective way to share content. I choose Amazon S3 for hosting my static website because of its scalability, durability, and cost-effectiveness. In this guide, I’ll show you a step-by-step approach to creating your first static website using Amazon S3.

Prerequisites:

Before we start, you will need:

1. An AWS account. If you don’t have one, you can create it here in AWS Console.

2. Basic Knowledge of HTML and a text editor.

3. A simple static HTML file to upload, for example, an index.html file.

Steps

Step 1: Create an S3 Bucket

The First step is to create an S3 bucket to store our website files.

1. Log into the AWS Management Console.

2. Search for S3 in the search bar and click on the S3 service

   

3. Click on Create Bucket. You’ll need to give your bucket a globally unique name

4. Choose a region near your audience for faster website acess.

5. 

   Click Create Bucket

Step2: Configure Bucket access settings

1. Navigate to the permissions tab

2. scroll down to object ownership and choose ACLs enabled and “I acknowledge that ACLs will be restored”

3. Uncheck the Block all public access option

4. Choose to Save changes

Step 3: Enable Static Website Hosting

once the bucket is created, you need to enable static website hosting:

1. Click on the newly created bucket.

2. In the properties tab, scroll down to static website hosting.

3. Choose the edit and click on static website hosting enable option.

   

4. Enter index.html as the index document. Optionally, enter error.html for a custom error page.

   

5. Click Save Changes.

Step 4: Upload your websites

Now it is time to upload your website files to the s3 bucket

1. In the S3 Console, open your bucket.

2. Click the Upload button.

3. Choose the files you want to upload (e.g., index.html).

   

4. Click Upload to finish.

Step 5: Configure Bucket Policy

For your static website to be publicly accessible, you need to add a bucket policy that allows public read access to the files.

1. Go to the permission tab in your S3 Bucket.

2. Click on Bucket Policy.

3. Add the following JSON policy to allow public access to all the files in your bucket:

4. Replace your bucket name with your actual S3 bucket name.

5. Click Save.

Step 6: Test your Website

Once everything is configured, it is time to test your website:

1. In the Static website hosting section of your S3 bucket, you’ll see the Endpoint URL.

2. Copy and paste the URL into your browser

3. Your Static website should load, displaying the content you uploaded.

Troubleshooting:

While setting up the static website hosting using S3 hosting, you’ll have a couple of issues.

1. Website didn’t load.

   Solution: Please check the configuration of the bucket policy to allow public access.

2. Incorrect permissions on files.

   Solution: When uploading the files, ensure you select public access to make the files viewable by everyone.

   Basically you need to select the files (index.html) file from the object and select actions and click the Make public using ACL

Additional Note: Use cloudFront instead of public access.

If you want a more secure setup, use Amazon CloudFront. This allows public access to your website through cloudFront while keeping the S3 bucket private.

Outcome

After following the above steps, you’ll be able to successfully host a Static webiste using S3. The process was simple, and the website loaded quickly. One of the key benefits of using S3 is its Scalability. As the traffic to the website grows, no need to worry about capacity-s3 handles it automatically.