Host a Website on AWS S3

Step-by-step

Tick each task as you finish it, your progress saves on this device.

1. 1. Set a billing alarm (Crucial First Step)

   In the AWS Console search bar, type "Budgets" and select AWS Budgets. Click "Create budget", choose "Zero spend budget" (or customize a $1 monthly cost budget), and enter your email address. This guarantees you will be emailed if your account ever generates a charge.

   Done when: A budget alert is active and tracking your account spend

2. 2. Make a simple web page

   You need something to host. Open a text editor (like Notepad) or our Code Sandbox, write `<h1>Welcome to my Cloud Website</h1>`, and save the file to your computer desktop as exactly `index.html`.

   Done when: You have a local file named index.html ready to upload

3. 3. Create an S3 bucket

   In the AWS Console, search for "S3". Click "Create bucket". A bucket name must be globally unique across all of AWS (e.g., `teki-[your-name]-[random-numbers]`). Leave the region as default. Scroll down to "Block Public Access settings" and UNCHECK "Block all public access" (acknowledge the warning). Click "Create bucket".

   Done when: An empty bucket is created with public access unblocked

   Show hint

4. 4. Upload your index.html

   Click on your new bucket name. Click the orange "Upload" button. Click "Add files", select the `index.html` file from your desktop, and click "Upload" at the bottom. Wait for the success banner.

   Done when: index.html is listed in the Objects tab of your bucket

5. 5. Enable Static Website Hosting

   Click the "Properties" tab of your bucket. Scroll all the way to the bottom to "Static website hosting". Click "Edit", select "Enable", and type `index.html` in the Index document field. Save changes. Scroll down again; you will now see a "Bucket website endpoint" URL. Click it! (It will likely say 403 Forbidden-we fix this next).

   Done when: Static website hosting is enabled and you have your endpoint URL

6. 6. Attach a Public Read Bucket Policy

   To fix the 403 error, we must explicitly grant read access. Go to the "Permissions" tab. Scroll to "Bucket policy" and click Edit. Paste the following JSON, replacing `YOUR-BUCKET-NAME` with your actual bucket name:\n\n```json\n{\n "Version": "2012-10-17",\n "Statement": [\n {\n "Sid": "PublicReadGetObject",\n "Effect": "Allow",\n "Principal": "*",\n "Action": [\n "s3:GetObject"\n ],\n "Resource": [\n "arn:aws:s3:::YOUR-BUCKET-NAME/*"\n ]\n }\n ]\n}\n```\nSave changes.

   Done when: The bucket policy is saved and the bucket is marked "Public"

   Show hint

7. 7. View your live website

   Go back to Properties, scroll down, and click your Bucket website endpoint URL again. You should now see your HTML page live on the internet! Share the link with a friend to prove it works.

   Done when: Your webpage loads successfully via the AWS endpoint URL

8. 8. Clean up to stay free

   Cloud rule #1: Delete what you are not using. Go to the Objects tab, select `index.html`, and click Delete. Confirm by typing "permanently delete". Then go back to the list of buckets, select your bucket, click Delete, and type the bucket name to confirm. Your account is completely clean.

   Done when: The bucket and its contents are entirely deleted from AWS

Reflect

If you can answer these in your own words, the lab stuck.

• Why did we have to unblock public access AND add a bucket policy?
• What is the difference between an S3 "bucket" and an "object"?
• Why is setting a billing alarm the first step of any cloud project?