Hosting A Static Website On AWS
Abisola Adesegun
Posted on October 28, 2024
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
Posted on October 28, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.