Devesh's blog

Web Hosting and Static Content Delivery with AWS S3

DEVESH NEMADE's photo
DEVESH NEMADE
·

3 min read

AWS S3 is not just a storage service—it can also be used for static website hosting. This means that you can host your HTML, CSS, JavaScript, and media files directly from S3 without needing a traditional web server. AWS S3 is highly scalable, reliable, and cost-effective for hosting static content like blogs, portfolios, product landing pages, documentation, and more.

Steps to Host a Static Website on S3

Hosting a static website on AWS S3 involves a few straightforward steps. Here's how you can do it:

Step 1: Create an S3 Bucket

  1. Go to the S3 Console:

    • Open the Amazon S3 console and click on Create bucket.

  2. Name the Bucket:

    • Enter a unique name for your bucket. The bucket name should follow DNS naming conventions (lowercase letters, numbers, hyphens). For example, example.com or my-static-website.

  3. Select Region:

    • Choose the AWS region where you want to host your website. It’s best to choose a region closest to your target audience to reduce latency.

  4. Configure Bucket Settings:

    • In the Bucket settings for Block Public Access, uncheck the option to block all public access. This is important because you'll need public access to your website content.

    • AWS will display a warning, but you should click on the acknowledgment checkbox to confirm that you understand the implications.

  5. Create the Bucket:

    • After configuring the settings, click Create bucket.

Step 2: Upload Website Content

  1. Navigate to Your Bucket:

    • Click on the bucket you just created.

  2. Upload Static Files:

    • Upload all the files for your static website, including HTML files, CSS, images, and JavaScript.

    • If you have a file like index.html (the homepage) and error.html (the error page), make sure to upload them to the root of your bucket.

Step 3: Enable Static Website Hosting

  1. Go to the Properties Tab:

    • Open the Properties tab for your bucket.

  2. Enable Static Website Hosting:

    • Scroll down to the Static website hosting section and click Edit.

    • Select Enable.

    • Choose Host a static website.

  3. Configure Index and Error Documents:

    • For Index Document, enter index.html.

    • For Error Document, enter error.html (optional, but recommended to handle 404s).

  4. Save Changes:

    • Click Save changes to enable static website hosting.

Step 4: Set Bucket Policy for Public Access

In order for the static website to be publicly accessible, you need to set a bucket policy allowing public access to the objects in your bucket.

  1. Go to Permissions Tab:

    • Open the Permissions tab for your S3 bucket.

  2. Add Bucket Policy:

    • Under Bucket Policy, add the following JSON policy to allow public read access to all objects in your bucket:
{

  "Version": "2012-10-17",

  "Statement": [

    {

      "Sid": "PublicReadGetObject",

      "Effect": "Allow",

      "Action": "s3:GetObject",

      "Resource": "arn:aws:s3:::your-bucket-name/*"

    }

  ]

}

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

Save the Policy

Click Save to apply the policy.

Step 5: Access the Website

After enabling static website hosting and configuring the bucket policy, your static website will be available at the URL provided by S3. You can find the website URL in the Static website hosting section of the bucket's Properties tab.

The URL will look like:

http://your-bucket-name.s3-website-us-east-1.amazonaws.com

Now, you have successfully hosted a static website on S3!

Key Benefits:

  • Low-cost hosting for static websites with no need for web servers.

  • Custom domain support for professional branding.

This setup provides a simple, cost-effective, and highly available solution for static web hosting on AWS.

Let me know if you need further assistance or clarifications!

Web Hosting and Static Content Delivery with AWS S3