In today's digital age, having a personal or business website is essential. Whether you’re a developer showcasing your portfolio, a blogger sharing your thoughts, or a small business reaching out to potential customers, a website serves as your digital identity. But what if you don't need a complex, dynamic site? This is where static websites come into play. They’re simple, fast, and cost-effective. And with AWS S3 (Amazon Simple Storage Service), hosting a static website has never been easier. Here’s a step-by-step guide on how to get your site up and running using AWS S3.

What is a Static Website? 🖥️

A static website consists of fixed content—HTML, CSS, and JavaScript files—that doesn't change dynamically based on user input. This makes static websites fast, secure, and easy to host.

Why Use AWS S3? 🗑️📂

AWS S3 is a cloud storage service that offers several advantages for hosting a static website:

• Scalability: Automatically handles any amount of traffic.

• Affordability: Pay only for the storage and bandwidth you use.

• Reliability: Highly durable and available.

• Easy to Set Up: Simple steps to get your website online.

Step-by-Step Guide to Hosting a Static Website on AWS S3 📂

Step 1: Create an AWS Account

If you don't already have an AWS account, go to aws.amazon.com and sign up. You'll need to provide a credit card for billing, but AWS offers a free tier that includes generous usage limits.

Step 2: Create an S3 Bucket

1. Open the S3 Console: Log in to your AWS account and navigate to the S3 console from the AWS Management Console.

   

2. Create a New Bucket: Click the "Create bucket" button. Give your bucket a unique name 'my-website-bucket-devops-blogs' and you can also choose a region close to your target audience by selecting Directory - New\

   Here I am selecting default- General purpose

   

3. Configure Bucket Settings: You can leave most settings as default, but make sure to uncheck the "Block all public access" option under "Bucket settings for Block Public Access". Confirm the settings and create the bucket.

   

4. Follow the rest default settings and create the bucket.

Step 3: Upload Your Website Files

1. Select Your Bucket: In the S3 console, click on your newly created bucket.

2. Upload Files: Click the "Upload" button and add your HTML, CSS, and JavaScript files. You can upload files individually or as a batch.

   Here I am just uploading index.html file as below, which is sufficient for now

    <header> <h1> Welcome to <a href="https://kshitijaa.hashnode.dev/" target="_blank"> Kshitija-Bartakke-Malwade-Blogs!</h1> </header>
   

   

   Click on Upload --> Add Files --> Add files and browse the file from your local and add it

   

   As you see below, index.html file can be uploaded after clicking on Upload.

   

   Now, your bucket will look like below.

   

Step 4: Configure the Bucket for Website Hosting

1. Enable Static Website Hosting: In your bucket's settings, go to the "Properties" tab and click on "Static website hosting".

   

   Currently "Static website hosting" is Disabled, Click on Edit

   

2. Set Index and Error Documents: Specify the default index document (e.g., index.html) and an optional error document (e.g., error.html). Save the changes.

   

Step 5: Make Your Website Public

1. Set Bucket Policy: Go to the "Permissions" tab and click on "Bucket Policy". Add a bucket policy to allow public read access to your files. Here's a sample policy:

    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::my-website-bucket-devops-blogs/*"
        }
      ]
    }
   

   Replace my-website-bucket-devops-blogs with the name of your bucket.

   

2. Save and Confirm: Save the policy. Your website is now publicly accessible.

Step 6: Access Your Website

Your static website is now live! You can access it using the URL provided in the "Static website hosting" section of your bucket properties. It will look something like this: http://my-website-bucket-devops-blogs.s3-website-us-east-1.amazonaws.com

Your static website is UP and Running! 💃◝(ᵔᵕᵔ)◜

---

Conclusion 📝

Hosting a static website using AWS S3 is a straightforward and cost-effective solution. With just a few steps, you can have your site up and running, ready to be shared with the world. AWS S3's reliability and scalability make it an excellent choice for static websites, ensuring that your content is always available to your audience.

---

Thanks for spending your valuable time in learning to enhance your knowledge!😃🙏

---

Share this with your colleagues and friends! ➤🤝

---

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲🔗╰┈➤

Hashnode: kshitijaa.hashnode.dev

LinkedIn: linkedin.com/in/kshitija-bartakke-malwade-3..

---