This is a fun project I worked on where I learned how to host a simple website using Amazon Web Services (AWS). First, I created a storage space called an S3 bucket to hold my website files. Then, I configured the bucket to allow public access so the site could be viewed online. To make it load faster, I used CloudFront, which helps speed up content delivery. By completing this project, I was able to set up a fully functional website hosted on AWS for free!

I’ll be providing a detailed step-by-step guide below for anyone who wants to follow along and use it as a reference to do the same.

What You’ll Need:

  1. AWS Account: You’ll need an account with Amazon Web Services (AWS) to access the S3 and CloudFront services.
  2. Website Files: Have your website files ready to upload, including an index.html file and any folders like css, img, or vendor.
  3. Basic Knowledge of AWS Management Console: Know how to log in and navigate around AWS services like S3 and CloudFront.
  4. Web Browser: Preferably use Chrome or Firefox to upload files to S3.
  5. Optional: AWS CLI (Command Line Interface): If there are issues with file uploads, you may use AWS CLI to upload files directly through the command line.

Create an S3 Bucket

  1. Log in to AWS Console: Go to the AWS Management Console, and in the search bar, type "S3" and select it.
  2. Create a Bucket: On the S3 dashboard, click the “Create bucket” button.
  3. Name the Bucket: In the General configuration, type a unique bucket name (e.g., my-123456789-bucket) and select a region.
  4. Allow Public Access: Under "Block Public Access", uncheck the option to block all public access (since we are hosting a static website).
  5. Create the Bucket: Click “Next” and then “Create bucket”.
  6. Access Your Bucket: Once created, click on your bucket’s name to open it.

Upload Files to S3 Bucket

  1. Upload Starter Code: In your bucket, click on the “Upload” button.
  2. Add Files & Folders: Click “Add files” to upload the index.html file, and “Add folder” to upload the css, img, and vendor folders one by one. Do not upload the folder itself—upload the contents one at a time.
  3. Confirm Upload: Once the files are successfully uploaded, you should see them listed in the bucket.

Secure Your Bucket Using IAM

  1. Go to Permissions Tab: Open the “Permissions” tab and notice that your bucket allows public access.
  2. Set Bucket Policy: Click on the “Edit” button under the “Bucket Policy” section, and paste the following policy (replacing your-website with your bucket name):

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "AddPerm",

"Effect": "Allow",

"Principal": "",

"Action": ["s3:GetObject"],

"Resource": ["arn:aws:s3:::your-website/"]

}

]

}

*This allows your website to be accessed publicly.

Configure S3 for Static Website Hosting

  1. Go to Properties Tab: In your bucket, open the “Properties” tab and scroll down to the “Static website hosting” section.
  2. Enable Static Website Hosting: Click “Edit”, enable hosting, and set the index document and error document both to index.html.
  3. Save and Copy the Endpoint: After saving, copy the website endpoint for future use. This is the URL where your static website will be hosted.

Distribute Website via CloudFront

  1. Go to CloudFront Service: In AWS, search for “CloudFront” and select it.
  2. Create a Distribution: Click “Create Distribution” and then “Get Started” under the delivery method.
  3. Set Origin Domain: For the origin, paste your bucket’s static website hosting URL (e.g., your-bucket-name.s3-website-region.amazonaws.com).
  4. Use Default Settings: Leave all other options on default and click “Create Distribution”.
  5. Wait for Deployment: Once the status changes to “Deployed”, copy the CloudFront domain name.

Access Your Website

  1. Open in Browser: Open a browser and paste the CloudFront domain name (e.g., https://dgf7z6g067r6d.cloudfront.net) to view your website.

Check list:

  1. S3 Bucket created, visible in the AWS console.
  2. Website files uploaded to the bucket and public access granted.S3 Bucket created, visible in the AWS console.
  3. S3 bucket configured for static website hosting.
  4. Website distributed via CloudFront and accessible to anyone online through a web browser.
  5. *Remember to terminate all resources after completing the project to avoid accruing charges. This includes terminating the S3 bucket and invalidating the CloudFront distribution. It's also a good practice to regularly monitor your AWS billing dashboard to ensure no unnecessary resources are consuming costs.