Hosting A Static Website On AWS

Table of Contents
Step 1: Create an S3 Bucket
Step 2: Upload Your Website Files
Step 3: Configure the Bucket for Static Website Hosting
Step 4: Set Permissions for Public Access
Step 5: Testing and Final Touches
Step 6: Clean up

Setting up a static website on AWS is a straightforward process, primarily involving Amazon S3 (Simple Storage Service), with optional configurations for additional services such as CloudFront for content delivery. Here’s a step-by-step guide:

Step 1: Create an S3 Bucket

• Log in to AWS and go to the S3 Console.

• Click on Create Bucket.

• Name your bucket (for example: static-website122). This name must be globally unique.

• Choose the region closest to your target audience.

• In the bucket settings, disable Block all public access since a static website needs to be publicly accessible.

• Review settings and click Create Bucket.

Step 2: Upload Your Website Files

• Click on your newly created bucket and navigate to the Objects tab.

• Click Upload to add your static website files (HTML, CSS, JavaScript, images, etc.).

• Make sure the files are uploaded correctly by organizing them as needed.

Step 3: Configure the Bucket for Static Website Hosting

• In your S3 bucket, go to the Properties tab.

• Scroll down to Static website hosting and click on it.

• Select Enable and configure the following: Index document: Enter the name of your main HTML file (e.g., index.html). Error document (optional): Enter a custom error file (e.g., 404.html). Copy the Bucket website endpoint. This URL is the link to your static site.

Step 4: Set Permissions for Public Access

• Go to the Permissions tab of your bucket.

• Under Bucket Policy, click Edit.

• Add a bucket policy like the following to allow public access to the files:

• Replace your-bucket-name with the name of your S3 bucket.

• Save the changes. This allows anyone to access your website files via HTTP.

Step 5: Testing and Final Touches

• Access your site through the S3 bucket URL or CloudFront domain.

• Test various pages to make sure all resources load as expected.

• Consider enabling HTTPS through CloudFront for added security.

Step 6: Clean up

Empty then delete the bucket