DEV Community

Cover image for Hosting a Website on S3 Your Guide to a Simple, Scalable Solution
Sumsuzzaman Chowdhury
Sumsuzzaman Chowdhury

Posted on

Hosting a Website on S3 Your Guide to a Simple, Scalable Solution

Looking for a cost-effective and scalable way to host your static website? Look no further than Amazon S3! This versatile service, often used for storage, also excels at hosting static websites. It's a great choice for blogs, portfolios, landing pages, and other sites that don't require dynamic server-side processing.

Here's a step-by-step guide to get you started:

1. Create Your S3 Bucket:

  • Log in to the AWS Management Console and navigate to the S3 service.
  • Click on "Create bucket" and give your bucket a unique name that aligns with your website's purpose. This name will also be part of your website's URL.
  • Select the region that best suits your website's audience, considering factors like latency and data compliance regulations.

2. Enable Static Website Hosting:

  • Select the bucket you just created.
  • Head to the "Properties" tab and click on "Edit" under the "Static website hosting" section.
  • Enable the "Static website hosting" option.
  • Specify your index document (usually "index.html") and an optional error document (e.g., "404.html").
  • Click on "Save changes" to activate these settings.

3. Upload Your Website Files:

  • It's time to bring your website to life! Click on the "Upload" button and transfer your website's files (HTML, CSS, JavaScript, images, etc.) into the bucket.
  • Ensure that your index and error files are placed at the root of the bucket for proper website navigation.

4. Set Permissions for Public Access:

  • To make your website accessible to the world, you'll need to configure permissions.
  • Go to the "Permissions" tab of your bucket and click on "Bucket Policy."
  • Paste the following policy to grant public read access:
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::your-bucket-name/*"
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • Replace "your-bucket-name" with the actual name of your bucket and save the policy.

5. Visit Your Website:

Congratulations, you've successfully set up your static website on S3!

Explore Additional Features:

Custom Domain: For a professional touch, use a custom domain instead of the S3 endpoint URL. Configure a DNS record (e.g., CNAME) to point your domain to the S3 bucket endpoint. AWS Route 53 streamlines domain management and integration with S3.

HTTPS: Enhance security and trust by enabling HTTPS using AWS Certificate Manager (ACM) to create a free SSL/TLS certificate and configure it with your S3 bucket.

Versioning and Access Control: Protect your data with versioning and fine-tune access control using IAM policies for your S3 resources.

Take advantage of S3's simplicity, scalability, and cost-effectiveness to host your static website with ease!

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay