Exercise 2: Create a Website on Amazon S3

Natasha Ong
This is some text inside of a div block.
4 min read

Exercise Overview:

In this exciting exercise, you'll be on a journey to create a snazzy website hosted in Amazon S3. Get ready to roll up your sleeves!

  • We'll kick things off by creating an S3 bucket that's blocked off public access.
  • Next, it's time for a little file uploading party – we'll be uploading an HTML* file and some images!
  • To top it all off, you'll sprinkle some magic by enabling static website hosting*.
*HTML (HyperText Markup Language) is used to create and design web pages. It's your way of telling the website where you want to display your text, images, videos and more. Think of HTML as the blueprint that shapes what you see when you visit a website.
**Static website hosting is what makes your website public on the internet. Even if you've spent hours and hours perfecting an HTML file, no one else can see it if it's just a file on your computer! Website hosting = storing your HTML file (and other files for your website) on a web server, so it's accessible online.


By the end of this exercise, you should be able to:

  1. Upload an object to an S3 bucket.
  2. Make the S3 bucket and its contents public and accessible.
  3. Deploy a static website in an S3 bucket.

Task 0: Accessing the AWS Management Console

  1. Sign in to your IAM user and access your AWS Management Console.

Task 1: Create an S3 bucket

In this task, you will create an S3 bucket.

1. Once you're in the AWS Management Console, navigate to the Amazon S3 console.

2. Inside the S3 console, click Create bucket (if you can't find it, it's at the top-right corner if your browser is on full screen).

3. On the Create bucket page, provide a unique name for the bucket in Bucket name. (Remember the name must be unique across all buckets in AWS.) For example, use a name like myfirstbucket82464329083.

4. AWS Region: select the Region closest to you.

5. In the Object Ownership feature, select the radio button before the ACLs disabled (recommended).

We enabled ACLs in the last exercise, but as we mentioned, disabling ACLs = simpler permission management. It also helps prevent any unintended data exposure. Bucket policies are an easier way to manage access to your bucket.

6. For Block Public Access settings for this bucket, uncheck the box before the Block all public access.

7. A yellow banner has popped up. It's telling us the bucket and it's objects might become public if we do this (which is what we want for a public website). Check the box that says “I acknowledge that the current settings might result in this bucket and the objects within becoming public.”

8. Click Create bucket.

Task 2: Upload an S3 bucket

  1. Click on the S3 bucket's name you created in Task 1 and choose Upload.
  2. On the Upload page, click Upload.
  3. Upload an HTML and image file - download this image and HTML file. To save the HTML file, right click on the link and select "Save link as..." from the options. Or, you could open the link in a new tab, and press Command + S (Mac) or Control + S (Windows) on your keyboard.
  4. Click Add files. 
  5. Extract the zip file and upload the two files (.jpg file and index.html) to the S3 bucket. You should see something like this:

6. Click Upload.

7. Once the files are successfully uploaded, click Close.

Task 3: Test S3's static website hosting

Setting up a static website on Amazon S3 doesn't stop at making a bucket. You also need to configure its policies to make sure your website is accessible to the right people. In this task, you'll make a bucket policy and test the static website hosting to ensure a seamless and secure user experience.

1. Now that you're back to your S3 bucket's page, go to the Properties tab and click Edit under Static website hosting. You'll need to scroll to the bottom to find this section.

2. Static website hosting is disabled - we need to enable it. Select Enable. Notice when you enable it there’s additional information we need to enter:

3. Static website hosting: Enable.

4. Hosting type: Host a static website.

5. Index document: index.html

6. Click Save changes.

7. Scroll back down to the Static website hosting section. Notice the URL (i.e. website link) generated after you enable static website hosting. Open it in a new tab or copy and paste it into your web browser to view the output.

Oo - an error! 

Why? It's because the objects (i.e. the HTML and images files) are not set up for public access. It doesn't matter that we've set up our S3 bucket as public because the objects themselves are private. To solve this error, we need to set the permission of the objects to public.

Let's fix that spicy error.

Task 4: Add a new bucket policy

Don't close the tab that's showing the error message, but let's click back to the tab with our AWS Management Console.

1. Navigate to the Permissions tab and click Edit under Bucket policy.

2. In the Edit bucket policy window, we need to enter a policy that is written into a code. No stress - we're not writing code today!

3. To generate a policy without writing code, simply click on Policy generator.

4. In the AWS Policy generator window, you can generate your policy by selecting your needed requirements. In this exercise, we need to generate a policy for S3:

  • Select Type of Policy: S3 Bucket Policy
  • Effect: Allow
  • AWS Service: Amazon S3
  • Actions: GetObject
The GetObject action allows permissions to retrieve (download) objects from the bucket. Essentially, it controls who can read or download the file from the bucket.
  • The Principal specifies who is allowed or denied access to the resources. It can be an AWS user, an AWS account, or a service that will assume the permissions defined in the policy.
  • Amazon Resource Name (ARN): head back to the Bucket policy page and copy the bucket ARN. After you paste the ARN to the ARN section of the policy generator, add an /* at the end of your Bucket ARN.
An ARN is a unique identifier for an S3 bucket - it's like a driver's license number that only you would have. Copying the bucket's ARN into the policy generator guarantees that the policy is tailored to the specific bucket. This step prevents errors and ensures the policy applies to the correct bucket.

When you add /* at the end of an ARN in the bucket policy generator, it means the policy applies to all things inside the bucket, not just the bucket itself. This way, you can control permissions for the objects in the bucket too.

5. Choose Add Statement. Notice the /* at the end of the ARN

6. Click Generate Policy.

7. Copy the generated policy, return to your bucket policy page, and paste it into the Bucket policy area.

In summary, this bucket policy allows any user ("Principal": "*"), to download objects ("Action": "s3:GetObject") from the S3 bucket named "sampledemo13903849". The policy applies to all objects within the bucket (because we wrote "/*" at the end of the "Resource": "arn:aws:s3:::bucketname/*").

8. Click Save changes.

9. Now, let’s test it. Refresh the page where you received an AccessDenied message from the previous task. If you've closed the page, navigate to Properties and click the URL under the Static website hosting section again.

The output should be the same as below:

Looking good! 😎

Task 4: Delete the resources

In this task, let's delete the S3 object and bucket so you're not racking up any charges in your AWS account.

We challenge you to try to give this a go yourself! Do you think you can delete the resources you've created today?

Tip: Before you delete the S3 bucket, the S3 bucket must be empty - delete first the S3 objects.

If you're feeling stuck (no worries, we've all been there), here's a little guide:

  1. To delete an S3 object, head back to your browser tab with the AWS Management Console. Select the Objects tab. Select the checkboxes next to the objects that you uploaded and choose Delete. Type permanently delete to confirm, and then click Delete objects.
  2. Now, head back to the Buckets page (it's on the left-hand pane), click on the circle next to the one you created, and choose Delete. Type your bucket's name to confirm the deletion, and then click Delete bucket.

Nice work, you've completed this hands-on exercise! You've successfully:

  • Created an S3 bucket.
  • Uploaded HTML and image files to an S3 bucket.
  • Hosted a static website on an S3 bucket.
  • Made an S3 bucket's objects public.