DEV Community

Cover image for Hosting A Static Website On AWS
Abisola Adesegun
Abisola Adesegun

Posted on

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
jamilaliahmed profile image
Jamil Ali Ahmed

Great guide! Setting up a static website on AWS can be a bit tricky, but your steps make it easy to follow. If you’re looking for an even simpler way to manage cloud hosting, Cloudways offers a managed AWS platform that handles a lot of the heavy lifting for you, ideal for those who want to focus on content rather than configuration.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more