Hosting A Static Website On AWS

mabis12

Abisola Adesegun

Posted on October 28, 2024

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.

Image description

  • Click on Create Bucket.

Image description

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

  • Choose the region closest to your target audience.

Image description

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

Image description

  • Review settings and click Create Bucket.

Image description

Image description

Step 2: Upload Your Website Files

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

Image description

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

Image description

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

Image description

Image description

Step 3: Configure the Bucket for Static Website Hosting

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

Image description

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

Image description

  • 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.

Image description

Image description

Image description

Step 4: Set Permissions for Public Access

  • Go to the Permissions tab of your bucket.

Image description

  • Under Bucket Policy, click Edit.

Image description

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

Image description

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

Image description

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

Image description

Step 5: Testing and Final Touches

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

Image description

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

  • Consider enabling HTTPS through CloudFront for added security.

Image description

Image description

Step 6: Clean up

Empty then delete the bucket

Image description

Image description

💖 💪 🙅 🚩
mabis12
Abisola Adesegun

Posted on October 28, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Hosting A Static Website On AWS
aws Hosting A Static Website On AWS

October 28, 2024