It's always good to understand exactly what you're here to do.

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project!

Don't be too nervous - you'll also get a quiz at the end of this project, to recap what you've learnt.

Alright! Let's start by opening up an iconic AWS service called Amazon S3 🪣. This is where you'll store the files that make up your website.

In this step, get ready to:

• Log in to the AWS console.
• In the AWS Management Console, search for S3.

• Select the AWS Region closest to you. You can find this at the top right corner of your AWS Management console, right next to your name.

• Choose Create bucket.
• For Bucket name, enter

• Make sure to replace enter your name with your name.

💡 Why do I have to enter my name in the bucket name?
An S3 bucket name is globally unique. After you create a bucket, no other AWS account in the entire world can use your bucket's name (unless you delete the bucket).

This also means that when you create your bucket, you need to make sure the bucket's name is unique too.

• For Object Ownership, choose ACLs enabled.

💡 Ooo what are ACLs (Access Control Lists)?
An ACL = a set of rules that decides who can get access to a resource.

Enabling ACLs in this S3 setup lets you control who can access and do things with the objects (i.e. website files) you upload into your bucket.

With ACLs, different AWS accounts can own and control different files in your bucket.

💡 What is the yellow pop up saying?
A yellow warning banner will pop up when you enable ACLs. This banner tells you that it's simpler to use another tool called bucket policies.

It's true that bucket policies make it really easy to control access for an entire bucket (e.g. making the entire bucket and everything inside public), but ACLs are the way to go if you want to manage access for each object in your bucket individually.

In this project, we're using ACLs to show you how they work.

• Choose Bucket owner preferred.
• For Block Public Access settings for this bucket, clear the check box for Block all public access.

💡 A yellow banner has popped up!
This banner is telling us that the bucket and its objects might become public if we untick the checkbox. This is what we want to host 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.”

• For Bucket Versioning, choose Enable.

• Choose Create bucket.

Phew, that's your S3 bucket all created.

Time to get those website's files inside your bucket! 📑 ➡ 🪣

In this step, get ready to:

• In the Buckets section, choose the name of your new bucket.
• Download these files to your computer so we can add them into your bucket (right click on each link, and select Save link as...):
  
  • index.html
  • NextWork - Everyone...love_files.zip

💡 What is HTML?
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.

• Open the Downloads folder in your local computer.
• Unzip the .zip file you've downloaded.

💡 Hot tip: If you're a Windows/Linux user

1. Click into the unzipped folder
2. Check whether there's a subfolder inside with the same name.
3. Upload that subfolder in the next step!

• Return to the Amazon S3 console with your bucket page open. Choose the Objects tab Objects.
• Choose Upload.
• Choose Add files.
• Choose index.html.
• Choose Add folder.
• Choose the unzipped folder - NOT the zip file itself!
• You might get a popup that tells you that all files in that folder will be uploaded ("Do you want to upload 44 files?"). Select Upload if you need to!
• Choose Upload in your AWS console.

• S3 will get to work right away!
• While we wait for your files to upload...

• Choose Close underneath the green Upload succeeded banner.

• Woohoo! Great succcess.

S3 bucket? Created ✅

Website files? Uploaded ✅

Next up, let's make your website available on the internet by setting up static website hosting!

In this step, get ready to:

💡 What does website hosting mean?
Website hosting is what makes your website public on the internet.

Even if you perfect an HTML file, no one else can see it when it's stored as a local file on your computer! Website hosting = storing your HTML file (and the other files for your website) on a web server, so it's accessible online.

By configuring your S3 bucket for hosting, we're telling this bucket: "please create a URL that will take anyone to a page that displays the HTML file I just uploaded."

• Make sure you're back in your bucket's page. If you're not sure, choose General purpose bucckets on the left hand side navigation bar, and then choose the bucket you created for this project.
• Choose the Properties tab.
• Scroll allllllllll the way down to the Static website hosting panel.
• Choose Edit.

• Configure the following settings:
  • Static web hosting: Choose Enable.
  • Hosting type: Choose Host a static website.
  • Index document: Enter index.html

• Choose Save changes.
• In the Static website hosting panel, click on the URL under Bucket website endpoint.

💡 What's a bucket website endpoint?
A bucket website endpoint is just like a regular website URL. It lets people visit your S3 bucket's files as a website.

• An error! 👀

💡 Why did I get this error?
Objects (in this case, the HTML and images files you uploaded) are private by default. This default setting helps keep your account's data secure.

The error message you're seeing is telling you that your static website is being hosted by S3, but the actual HTML/image files you've uploaded are still private. It's kind of like having a bucket on display, so everyone can see the bucket - but the contents are covered up, preventing anyone from seeing what's inside.

To solve this error, we need to set the permission of the objects to public - this is why we enabled ACLs in Task 1!

Ooof, we're sooo close to making your website available online.

The only missing ingredient is to make your website files publicly accessible, so everyone has permission to view your website.

In this step, get ready to:

• Keep the error message tab open and switch back to the Amazon S3 console tab.
• Do you still remember how to view your S3 bucket's objects? Try finding your bucket's Objects page and making your objects public using ACLs.
  
  

.... feeling a little stuck?

• You'll know it's working when you see an awesome website like the one below.

Fun fact: This website is one of the original NextWork designs from when we first launched! Can you spot the difference? New logo, new colours, new look... we've come so far. 🫶

Welcome to your 🤫 exclusive 🤫 secret mission!

Your mission, should you choose to accept it, is to use bucket policies to control access to index.html.

💎 In this secret mission, get ready to:

• Set up a bucket policy that stops people from deleting your index.html file.
• Test your policy.
• Showcase your secret mission in your project documentation.

You've just completed the main part of today's project and hosted your very own static website on Amazon S3.

WOOHOOOOOOOOO YOU DID IT! 👏

Make sure you delete all your resources to avoid getting charged. This is a super important task for every single project you set up.

We challenge you to try to give this a go yourself 💪

Do you think you can delete the resources you've created today?

Now it's time to share and let people know just what an amazing job you've done.

1. Share it on LinkedIn 😎‍.

It's so easy to share your documentation - all you have to do is:

• SelectMission Accomplished at the end of this page 👇

• Download your documentation as a PDF.

• Select the LinkedIn icon to open a pre-populated post, all ready to go!

• Select the X at the bottom of the post - it's blocking you from uploading documentation.

• Click on the plus icon at the bottom of the panel.

• Then select the page icon, which helps you Add a document.

• Voilà! Upload your document and give it a nice title.
• Select Done and Post to share your progress!

2. Celebrate in the NextWork community!

Share your PDF in the NextWork community.

Completing a project is literally one of the biggest achievements and milestones that everyone celebrates. Show us your amazing work. 👀

Woohooooo!! You are an absolute legend and should be very proud of yourself. That was not easy work but you gave it a go, did your best, and absolutely crushed it.

Let's recap what you've achieved today:

In this lab, you created a personalised, publicly accessible static website. You...

• Created an S3 bucket.
• Uploaded HTML and image files to an S3 bucket.
• Hosted a static website on an S3 bucket.
• Turned on public access for your bucket's objects for the 🌏 whole world 🌏 to see your website.

High five! We'll see you in the next project. 🙌

🚀 p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

1. Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
2. Search for the text Return to later.
3. Jump straight to your incomplete tasks!
4. 🙋‍♀️ Still stuck? Ask the community!