Configuring 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 we…


This content originally appeared on DEV Community and was authored by Abisola Adesegun

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


This content originally appeared on DEV Community and was authored by Abisola Adesegun


Print Share Comment Cite Upload Translate Updates
APA

Abisola Adesegun | Sciencx (2024-10-28T11:38:34+00:00) Configuring A Static Website On AWS. Retrieved from https://www.scien.cx/2024/10/28/configuring-a-static-website-on-aws/

MLA
" » Configuring A Static Website On AWS." Abisola Adesegun | Sciencx - Monday October 28, 2024, https://www.scien.cx/2024/10/28/configuring-a-static-website-on-aws/
HARVARD
Abisola Adesegun | Sciencx Monday October 28, 2024 » Configuring A Static Website On AWS., viewed ,<https://www.scien.cx/2024/10/28/configuring-a-static-website-on-aws/>
VANCOUVER
Abisola Adesegun | Sciencx - » Configuring A Static Website On AWS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/28/configuring-a-static-website-on-aws/
CHICAGO
" » Configuring A Static Website On AWS." Abisola Adesegun | Sciencx - Accessed . https://www.scien.cx/2024/10/28/configuring-a-static-website-on-aws/
IEEE
" » Configuring A Static Website On AWS." Abisola Adesegun | Sciencx [Online]. Available: https://www.scien.cx/2024/10/28/configuring-a-static-website-on-aws/. [Accessed: ]
rf:citation
» Configuring A Static Website On AWS | Abisola Adesegun | Sciencx | https://www.scien.cx/2024/10/28/configuring-a-static-website-on-aws/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.