DEV Community

Nivetha Gopalakrishnan
Nivetha Gopalakrishnan

Posted on

Day 1 – Session 1: S3 Setup, Portfolio Hosting and CloudFront

#aws #cloud

Today I learned how to create an Amazon S3 bucket, upload files, host a portfolio website, and configure Amazon CloudFront.

1. Create an S3 Bucket

First, I logged in to the AWS Management Console and opened the Amazon S3 service.

Steps:

  1. Go to the AWS Console.
  2. Search for S3.
  3. Click Create bucket.
  4. Enter a unique bucket name.

Example:

nivi-22034-15
Enter fullscreen mode Exit fullscreen mode
  1. Select the required AWS Region.
  2. Keep the remaining settings as required.
  3. Click Create bucket.

The S3 bucket was created successfully.

S3 Bucket Creation

2. Upload the First Image

After creating the bucket, I uploaded an image to test S3 storage.

Steps:

  1. Open the S3 bucket.
  2. Click Upload.
  3. Click Add files.
  4. Select an image from the local computer.
  5. Click Upload.
  6. Verify that the image is available inside the bucket.

Example:

nivi-22034-15/
└── image.jpg
Enter fullscreen mode Exit fullscreen mode

This helped me understand how files are stored as objects inside an S3 bucket.

3. Create and Upload the Portfolio index.html

After successfully uploading the image, I created a basic portfolio website using index.html.

The portfolio contains basic sections such as:

  • About Me
  • Skills
  • Projects
  • Contact

I then uploaded the index.html file to the S3 bucket.

The bucket structure became:

nivi-22034-15/
├── index.html
└── profile.jpg
Enter fullscreen mode Exit fullscreen mode

Portfolio uploaded to S3

4. Configure S3 for Static Website Hosting

Next, I configured the S3 bucket for static website hosting.

Steps:

  1. Open the S3 bucket.
  2. Go to the Properties tab.
  3. Find Static website hosting.
  4. Click Edit.
  5. Select Enable.
  6. Select Host a static website.
  7. Enter the following: 
Index document: index.html
Error document: 404.html
Enter fullscreen mode Exit fullscreen mode
  1. Click Save changes.

After saving the configuration, AWS provided an S3 website endpoint.

I opened the endpoint in the browser and verified that my portfolio was loading correctly.

5. Configure S3 Bucket Permissions

To access the website files, I configured the required S3 permissions.

I went to:

S3 → Bucket → Permissions

For the static website, I configured the bucket according to the required public-access settings.

I added the following bucket policy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::nivi-22034-15/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

This policy allows users to read the objects stored inside the S3 bucket.

6. Test the Portfolio Website

After configuring S3, I opened the S3 website endpoint in a browser.

The index.html page loaded successfully, and I verified that the uploaded image was also displayed correctly.

Portfolio hosted on S3

The basic flow was:

Browser
   ↓
S3 Website Endpoint
   ↓
index.html
   ↓
Portfolio
Enter fullscreen mode Exit fullscreen mode

7. Amazon CloudFront Configuration

After successfully hosting the portfolio on S3, I configured Amazon CloudFront.

CloudFront is a Content Delivery Network (CDN) provided by AWS. It helps deliver website content to users with lower latency and also supports HTTPS.

Steps:

  1. Open the AWS Management Console.
  2. Search for CloudFront.
  3. Open the CloudFront service.
  4. Click Create distribution.
  5. Select the S3 bucket as the origin.
  6. Select my S3 bucket: 
nivi-22034-15
Enter fullscreen mode Exit fullscreen mode
  1. Configure the required origin settings.
  2. Set the Default root object as: 
index.html
Enter fullscreen mode Exit fullscreen mode
  1. Configure the required CloudFront settings.
  2. Create the distribution.

CloudFront then generated a distribution domain name similar to:

https://xxxxxxxxxxxx.cloudfront.net
Enter fullscreen mode Exit fullscreen mode

I opened the CloudFront URL in the browser and verified that my portfolio was loading successfully.

8. Final Setup

After completing the configuration, my portfolio was hosted using Amazon S3 and delivered through Amazon CloudFront.

The flow was:

User
 ↓
CloudFront
 ↓
S3 Bucket
 ↓
index.html
 ↓
Portfolio Website
Enter fullscreen mode Exit fullscreen mode

9. What I Learned

In Day 1 – Session 1, I learned:

  • How to create an S3 bucket.
  • How to upload an image to S3.
  • How to upload index.html.
  • How to configure static website hosting.
  • How to configure an S3 bucket policy.
  • How to test a website using the S3 website endpoint.
  • What Amazon CloudFront is.
  • How to create a CloudFront distribution.
  • How to connect an S3 bucket with CloudFront.
  • How to set index.html as the default root object.
  • How to access the portfolio through the CloudFront URL.

Overall, this session gave me hands-on experience with Amazon S3 and CloudFront for hosting and delivering a static portfolio website.

AWS #S3 #CloudFront #AWSCloud #CloudComputing #DevOps #WebDevelopment #Portfolio

Top comments (0)