AWS Builder Center

Builder Center

Web Content 🌐 - Building Your Personal Website Files

Web Content 🌐 - Building Your Personal Website Files

Learn how to build and customize your personal website files. Download our starter template, add your personal info, and then securely upload them to Amazon S3.

Ana Cunha

Developer Advocate @ AWS
Welcome to Day 3 of the AWS Builder Challenge #2  🚀! Today you will create your website content: the HTML, CSS, and images that will become your personal website. Don't worry if you have never written HTML before, we will provide you with a complete template to customize.
In about 30 minutes, you will download a personal website template, customize it with your personal information, and upload it to your secure S3 bucket. We are not just copying files, we are learning how to organize web content properly and maintain security while building.
By the end of today, you will have your complete website content stored securely in the cloud. Let's get started!
Note: The template provided is completely optional. If you're comfortable with HTML and CSS, feel free to create your own website files from scratch or use your existing code. 🎨

What you will accomplish today

  • Download the starter website template from GitHub
  • Customize the HTML with your personal information
  • Upload your website files to your private S3 bucket
  • Verify your files remain private and secure

What you will need

  • AWS account from Day 1  💻
  • S3 bucket from Day 2  📁
  • Computer to download website files from GitHub  🌐
  • Text editor to customize your website (VSCode , Notepad, TextEdit, etc.) ✏️
  • Photo of yourself (optional) 📸

Step 1: Download the website template 📥

First, we will get the website template that includes all the HTML, CSS, and styling you need for your personal website. Feel free to use your own files here if you comfortable with HTML and CSS.
  1. Go to https://github.com/anacunha/aws-builder-challenge-personal-website 
  2. Click the green Code button
  3. Select Download ZIP
  4. Extract the ZIP file to your computer
  5. You should see these files:
    • index.html (main webpage)
    • styles.css (styling)
    • profile-photo.svg (placeholder profile image)
    • README.md (instructions)

Step 2: Customize your website ✏️

Now it's time to make the website your own by replacing the placeholder content with your personal information and fun facts.

Update index.html

Replace the placeholders

Open the index.html file in any text editor and replace "Your Name" by your actual name.
1
2
3
<!-- Change this -->
<title>Your Name - Personal Website</title>
<h1>Your Name</h1>

Update your AWS Builder Center profile link

Change @youralias to be your AWS Builder Center alias. If you're unsure of what is your alias, you can see it on https://builder.aws.com/profile .
1
2
<!-- Change this -->
<a href="https://builder.aws.com/community/@youralias" target="_blank" class="aws-link">View AWS Builder Profile</a>

Customize the fun facts

Change the fun facts provided to be actual fun facts about you (you can use new emojis too).
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Change this -->
<div class="fact-card">
<h4>🚀 Your First Fact</h4>
<p>Replace with something interesting about you!</p>
</div>
<div class="fact-card">
<h4>🎯 Your Second Fact</h4>
<p>Maybe a hobby or skill you're learning?</p>
</div>
<div class="fact-card">
<h4>💡 Your Third Fact</h4>
<p>Something fun or unique about your journey!</p>
</div>

Update the footer

Replace "Your Name" by your actual name.
1
2
<!-- Change this -->
<p>&copy; 2025 Your Name. Built with ❤️ on AWS</p>

Add your profile photo (optional)

If you want your page to be more personalized, you can change the profile picture to be your own photo.
  • Find a cool picture of you (square photos work best)
  • Copy your picture to the same folder where you have index.html and style.css
  • Rename your picture to profile.jpg or profile.png
  • Update the src in index.html to match the same file name of your picture
1
2
<!-- Change this -->
<img src="profile.png" alt="Your Name" class="profile-photo">

Step 3: Preview your website locally 👀

Before uploading the files to AWS, let's test your website on your computer to make sure everything looks good.
  1. Click on index.html to open the file in your browser
  2. Check that:
    • Your name appears correctly
    • Fun facts show your content
    • Links work
    • Photo displays (if you changed your picture)
    • Styling looks good

Step 4: Upload your website files to S3 ☁️

Now that everything is looking good, it's time to move your website files to the cloud. We will upload them to the secure S3 bucket you created on Day 2. 

Access your S3 bucket

  1. Go to the Amazon S3 Console 
  2. Click on your bucket from Day 2
  3. Go to the Permissions tab and verify that Block all public access is On ✅
  4. Go back to the Objects tab

Upload your website files

  1. Click on the Upload button in your bucket
  2. Click on Add files
  3. Navigate to the folder on your computer where you have your website files
  4. Select the following files:
    • index.html
    • style.css
    • Your profile photo (or profile-photo.svg if you don't have one)
  5. Do not change the default settings.
  6. Click on Upload

Verify upload

After the upload completes, you should see:
  • index.html ✅ Succeeded
  • style.css✅ Succeeded
  • profile.png✅ Succeeded
You can also navigate back to your bucket Objects and check that they files have been correctly uploaded.

Step 5: Test security 🔒

Let's verify that your files are properly secured and not publicly accessible.
  1. Click on index.html in your S3 bucket.
  2. Copy the Object URL (should look similar to https://your-bucket-name.s3.region.amazonaws.com/index.html)
  3. Open this URL in a new tab.
  4. Check that you see Access Denied 🔐 (this is correct and expected)
Why this is important: Your files are securely stored and not publicly accessible. Tomorrow, we'll use CloudFront to serve them securely with HTTPS.

Checklist

Check the items below to make sure you have completed today's challenge:
  • [ ] Downloaded website template from GitHub
  • [ ] Customized index.html with your information
  • [ ] Added your profile photo (optional)
  • [ ] Tested website locally in your computer
  • [ ] Uploaded all files to private S3 bucket
  • [ ] Verified files are private (Access Denied when accessing directly)
You are done for the day! 🎉 Your personalized website is now securely stored in AWS S3. Tomorrow we'll make it live for the world to see!
# cloud-launch-challenge-1
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article