Deploying A Static Website with AWS S3

anson_ly

Anson Ly

Posted on May 29, 2024

Deploying A Static Website with AWS S3

Introduction
Deploying a static website using Amazon S3 is a cost-effective and efficient way to host web content. In this guide, I’ll walk you through the steps to set up and deploy a static website on AWS S3. This process is ideal for hosting simple HTML, CSS, and JavaScript files without the need for server-side processing.

Step 1 Create a S3 Bucket
First I created an S3 bucket that will hold my website files.

Step 2: Upload Website Files
Next, you need to upload your website files to the S3 bucket. Select your bucket from the list and click the “Upload” button. Add your HTML, CSS, and JavaScript files. Once you’ve added the files, click “Upload” to add them to your bucket.

Step 3: Configure the Bucket for Static Website Hosting
Now, you need to configure the bucket to host your website. Navigate to the bucket’s properties by clicking on the “Properties” tab and scrolling down to the “Static website hosting” section. Enable static website hosting by selecting “Use this bucket to host a website”. Specify the index document (e.g., index.html) and optionally specify an error document (e.g., error.html). Finally, click “Save”.

Step 4: Access Your Static Website
Now, your static website is ready to be accessed. Go back to the “Properties” tab and in the “Static website hosting” section, you’ll find the URL of your website. Open this URL in your browser to see your static website live.

Here is the website using Github. Link

Conclusion
Deploying a static website with AWS S3 is straightforward and offers a scalable, cost-effective solution for hosting web content. By following the steps outlined above, you can have your static site up and running in no time. For enhanced security and performance, consider integrating AWS CloudFront and using a custom domain with Route 53. Happy hosting!

💖 💪 🙅 🚩
anson_ly
Anson Ly

Posted on May 29, 2024

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

Sign up to receive the latest update from our blog.

Related