🚀 How to Use AWS S3 Bucket to Host a Static Website 🌐

Are you ready to launch your static website into the vast online universe? Look no further! In this guide, we'll unveil the secrets of using AWS S3 Bucket to seamlessly host your website. 🎉

Prerequisites: What You'll Need 📋

Before we begin our exhilarating journey, let's make sure you have the essentials at your fingertips:

1️⃣ An AWS account: If you don't have one yet, fear not! Signing up is as easy as a few clicks. Head over to the AWS website (https://aws.amazon.com/) and join the cloud revolution.
2️⃣ AWS CLI : AWS CLI installed and configured on your local machine: Prepare to wield the power of the command line as we navigate the AWS cosmos.
3️⃣ An static website: Ensure you've created a dazzling static website. In this article, we will be using React and Angular, but any static website or framework can be used.💡

Step 1: Create an S3 Bucket 🪣

To kick off our journey, we'll create an S3 bucket using the AWS CLI. Follow these steps and watch your bucket take flight:

1️⃣ Open your command line interface, ready to send commands to the AWS universe.
2️⃣ Type the following command and let it echo through the digital atmosphere, creating your S3 bucket:

aws s3api create-bucket --bucket your-bucket-name --region your-region

Replace your-bucket-name with a unique and captivating name for your bucket. Also, replace your-region with the AWS region of your choice.

Step 2: Configure the S3 Bucket 🛠️

Your bucket is now waiting to be molded into a spectacular host for your website. Let's shape it with these simple steps:

1️⃣ Issue the following command to enable static website hosting for your bucket:

aws s3 website s3://your-bucket-name/ --index-document index.html

Replace your-bucket-name with the name of your bucket. The above command. By running this command, you are instructing AWS to treat the specified S3 bucket as a website and configure it to serve the index.html file as the default page.

Step 3: Upload Your Website Files 🚀

Now that your bucket is configured, it's a great time to upload your website files:

1️⃣ If you are creating the website using some framework like: React or Angular, you need to create an optimized build, which will be deployed to S3. For the build command, please refer to the documentation of the framework. After preparing the build, navigate to the build directory.
2️⃣ Run the following command to upload the files to your S3 bucket:

aws s3 sync . s3://your-bucket-name

This command will upload all files and folders in the current directory to your bucket.

Step 4: Set Permissions 🔒

1️⃣ To make your website file publicly accessible, you first need to disable Block Public Access Configuration for the respective bucket. To do this, you need to run the following command by replacing your bucket name.

aws s3api put-public-access-block --bucket your-bucket-name --public-access-block-configuration "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"

2️⃣ Now you need to create a policy.json file as below and replace your-bucket-name with the name of your bucket.

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

2️⃣ Run the following command to set the bucket policy using the policy file:

aws s3api put-bucket-policy --bucket your-bucket-name --policy file://policy.json

Replace your-bucket-name with the name of your bucket.

Step 5: Configure Custom Domain (Optional) 🌐

If you want to host your website to a custom domain, you can follow below steps:

1️⃣ Go to your preferred DNS provider and create a new CNAME record.
2️⃣ Set the record's name (or host) to your desired domain (e.g., www.yourdomain.com).
3️⃣ Set the record's value to the endpoint of your S3 bucket. You can find the endpoint by running the following command:

aws s3api get-bucket-location --bucket your-bucket-name

Replace your-bucket-name with the name of your bucket.

Prepare for Launch! 🚀🌌

That's it! Your website is now hosted using an AWS S3 Bucket. It should be publicly accessible through the provided endpoint or your custom domain.✨🪐

To optimize the speed and performance of your website, leveraging a content delivery network (CDN) such as AWS CloudFront or Cloudflare is highly recommended. CDNs help reduce latency and enhance the overall user experience by caching content closer to the end-users. In an upcoming article, we will delve deeper into how you can leverage these CDNs to boost your website's speed and performance.