Building a Static Website with AWS S3: A Step-by-Step Guide
Tags: aws, cloud, cloudcomputing, beginners
Published: 2024-03-08 17:18:12

In today's post, we're going to explore how you can leverage Amazon Simple Storage Service (S3) to create and host a static website. Follow along as we break down the process into simple, actionable steps.

**What is a Static Website?**
A static website consists of web pages with fixed content, typically coded in HTML, CSS, and JavaScript. Unlike dynamic websites, which generate content on the server-side, static websites deliver pre-built files directly to the user's browser.

**Why Use AWS S3?**
Amazon S3 provides a cost-effective and highly scalable solution for hosting static websites. With S3, you can store your website files securely, benefit from high availability and reliability, and take advantage of AWS's global content delivery network (CDN) for fast content delivery to users worldwide.

**Step-by-Step Guide to Creating a Static Website with AWS S3**

**Step 1: Prepare Your Website Files**

Download the necessary HTML, CSS, JavaScript, and other assets for your static website here: https://drive.google.com/drive/folders/1wmWMvpUIefdQ3nrtpFrMH4uCTm2IQqsv

**Step 2: Upload Your Website Files to S3**

Sign in to the AWS Management Console and navigate to the Amazon S3 service.

Click create a new S3 bucket by clicking on the "Create bucket" button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b4rlm5xo71yyagekfbb.png)

Choose a unique bucket name and select the region where you want to store your data.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru9h5tbtp5xyf4s5c79s.png)

Leave all other settings at their default values, Scroll down and click "Create bucket."

Once the bucket is created, open it and click on the "Upload" button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nym4t06sf5dmx2efdfr7.png)

Select your earlier dowloaded website files from your local machine and upload them to the S3 bucket.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w30nd86umqmc3zcng849.png)

**Step 3: Configure Bucket Permissions**

In the bucket tab, navigate to the "Permissions" tab to edit the "Block public access option"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kjvrky1xf4f26abwhy6.png)

Untick the "Block all public access" option and save changes

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lipeihrzqr2j942wjxtn.png)

Still on the permissions tab of your bucket, Scroll down and click on "Bucket Policy" to add a policy that allows public read access to your website files.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4obv2ksmxh2mgsz6nog.png)

Copy the bucket policy in JSON below and Replace "your-bucket-name" with the name of your S3 bucket.

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4fd0xzmrr62hzxyveyt.png)

Click "Save" to apply the bucket policy.

**Step 4: Enable Static Website Hosting**

Navigate to the "Properties" tab, 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtvh0b78xq2d73so81ed.png)

Scroll down to the "Static website hosting" section and click on "Edit."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l0i6mytwqrf746idlct.png)

Select Enable in the "Static website hosting" option and Hosting type as "Host a static website".

Enter the name of your main HTML file and Error file (e.g., index.html, error.html) as the default document.

The Error file can be optional but since we have the file uploaded earlier, we might as well include it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu91r0iyoshadi32cisi.png)

Click "Save changes" to enable static website hosting for your S3 bucket.

**Step 5: Access Your Website**

Once static website hosting is enabled and permissions are configured, S3 will provide a website endpoint URL.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4ni62zklfyy2tmm1bqe.png)

Copy the website endpoint URL and paste it into your browser's address bar to access your static website.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nm1p3jhfofu82n258cv2.png)

Congratulations! You've successfully created and hosted a static website using AWS S3. Now you can share your website with the world and take advantage of AWS's scalability and reliability for seamless web hosting.

Stay tuned for more AWS tutorials and best practices to optimize your cloud infrastructure and enhance your web development projects.

**Please remember to disable and delete all resources after use so as to not incure cost on your AWS account.**