DTT

Build a Static Website on Amazon S3

Published: April 22, 2019 (Updated: Apr 22, 2019)
#AWS #AWS S3 #Static Hosting

Enjoying this content? Subscribe to the Channel!

The Ultimate Guide to Hosting a Static Website for Free (or Super Cheap) on Amazon AWS S3

Introduction: Why Choose AWS S3 for Your Static Site?

Hey everyone, and welcome back to Darren’s Tech Tutorials! If you’re looking for a lightning-fast, highly scalable, and incredibly cost-effective way to host a basic static website (think portfolio sites, simple landing pages, or documentation), then you simply cannot beat Amazon Web Services’ Simple Storage Service—AWS S3.

S3 is primarily known as a powerhouse for cloud storage, but it doubles beautifully as a static web server. It handles massive traffic spikes without breaking the bank, often costing mere pennies per month for small sites.

In this comprehensive, step-by-step guide, we’re breaking down the entire process. We’ll turn a simple S3 bucket into a fully functioning, publicly accessible static website host.

Ready to get started? Let’s dive into the AWS Console!

Step 1: Creating Your AWS S3 Bucket

The first step in our journey is setting up the central storage unit for our website: the S3 Bucket.

  1. Log into the AWS Management Console: Navigate to the S3 service dashboard.
  2. Click ‘Create bucket’: You will be prompted to enter the details for your new bucket.
  3. Choose a Unique Name: Your bucket name must be globally unique across all of AWS. Pro Tip: To make it easier for future custom domain configuration, it’s best practice to name the bucket exactly the same as your desired domain name (e.g., myawesomestaticsite.com).
  4. Select an AWS Region: Choose the region closest to your target audience for the best performance.
  5. Initial Security Settings: By default, AWS heavily restricts public access. For static website hosting, we need to temporarily address this. Look for the “Block all public access” section and uncheck the box that says “Block all public access.” You will receive a warning confirming that you understand the risks of making this bucket public later—acknowledge this.
  6. Finalize Creation: Leave the rest of the settings as default and click ‘Create bucket.’

Step 2: Enabling Static Website Hosting

An S3 bucket is just storage until you tell it to act like a website. This is done through the bucket properties.

  1. Navigate to Your New Bucket: Click on the bucket you just created.
  2. Select the ‘Properties’ Tab: Scroll down until you find the Static website hosting card.
  3. Enable Hosting: Click the ‘Edit’ button and select Enable.
  4. Configure Index and Error Documents:
    • Index Document: This is the entry page for your site (e.g., when someone types yourdomain.com). Enter index.html.
    • Error Document (Optional): This page will display if a user hits a bad link. Enter error.html (or whatever your 404 page is named).
  5. Save Changes: Click ‘Save changes.’

Note: Once saved, AWS will provide you with the Endpoint URL for your website (e.g., http://mybucketname.s3-website-us-west-2.amazonaws.com). Save this URL; this is where your site will be accessible!

Step 3: Uploading Your Website Files

Now that the bucket is configured, it’s time to populate it with your actual website code.

  1. Go to the ‘Objects’ Tab: Inside your S3 bucket, click the ‘Objects’ tab.
  2. Upload Your Files: Click the ‘Upload’ button. You can drag and drop all your website files (HTML, CSS, JavaScript, images) directly into the upload area.
  3. Ensure Root Files are Present: Make absolutely sure that the index.html file (and error.html, if applicable) is uploaded directly to the root of the bucket, not nested within a subfolder.
  4. Complete the Upload: Follow the prompts to finish uploading the files.

Step 4: Applying the Bucket Policy (Granting Public Access)

Even though we disabled the ‘Block Public Access’ setting in Step 1, the individual files are still technically private by default. We need a Bucket Policy to tell S3 that everyone on the internet is allowed to view the objects within this bucket.

  1. Go to the ‘Permissions’ Tab: Located within your S3 bucket settings.

  2. Scroll to ‘Bucket Policy’: Click the ‘Edit’ button in this section.

  3. Insert the Policy: Copy and paste the following JSON code into the Policy editor.

    IMPORTANT: You must replace YOUR_BUCKET_NAME with the exact name of your S3 bucket (e.g., myawesomestaticsite.com).

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

What This Policy Does: This policy grants the s3:GetObject permission (the ability to download/view an object) to the Principal: * (everyone on the internet) for all resources (/*) inside your specified bucket.

  1. Save Changes: Click ‘Save changes.’ S3 will warn you that this bucket now has public access—this is expected.

Conclusion: Congratulations, Your Site is Live!

That’s it! In four simple steps, you have transformed raw cloud storage into a robust, high-availability website host.

To check your work, simply navigate to the Endpoint URL you saved in Step 2. Your index.html page should load instantly!

You’re now leveraging the power and scalability of AWS to host your project cheaply and efficiently. If you found this tutorial helpful and managed to launch your own site, let me know in the comments below! Don’t forget to Like this post and Subscribe to Darren’s Tech Tutorials for more clear, actionable guides!

Need the exact text files or troubleshooting help? You can find a full text tutorial and all necessary files on my website: https://darrenoneill.eu/?p=1397