Project-13: Hosting a Static Website Using Route 53 and Enhancing It with SSL & CloudFront

When hosting a static website, AWS provides multiple ways to serve your content efficiently. In this guide, we'll first set up a static website using only Amazon Route 53, and then enhance it by adding SSL (HTTPS) and CloudFront for security and performance.

Part 1: Hosting a Static Website Using Only Route 53

Step 1: Upload Your Static Website to S3

Name the bucket the same as your domain (in my case it is cloudgirl.studio).

In the Properties tab, enable Static Website Hosting.

In the Permission tab, edit the bucket policy if you want to access your website through the bucket end point:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        }
    ]
}

Upload your HTML, CSS, and JS files to the bucket.

Step 2: Configure Route 53 to Point to Your S3 Bucket

Navigate to Hosted Zones and select your domain. Click Create Record and configure it:

Your website should now be accessible via your domain name!

Hosting a static website using only Route 53 and an S3 bucket is not an ideal approach for production environments because HTTPS Limitation, No DDoS Protection– S3 static website hosting only works with HTTP, and it does not support HTTPS natively. If you want HTTPS, CloudFront is required, and CloudFront does not need the bucket to be named after the domain.

Part 2: Securing the Website with SSL and CloudFront

Again create bucket with whatever name you want and previous settings and upload static website content

Step 1: Request an SSL Certificate in ACM

Enter your domain name in my case it is cloudgirl.studio keep the default settings and click on Request.

Alert!! AWS Certificate Manager (ACM) must be in the N. Virginia (us-east-1) region if you are using it with CloudFront because CloudFront is a global service that only integrates with ACM certificates issued in this specific region.

Create the record CNAME in Route53

Wohoo we are done with ssl certificate process you can verify this in Route53 your domain hosted zone.

Step 2: Create a CloudFront Distribution

Origin Domain Name: Enter your website’s S3 bucket endpoint. Only click on highlighted settings and leave other as it is:

Choose Custom SSL Certificate and select the ACM certificate

Unlike traditional web servers, Amazon S3 does not automatically serve an index.html file when accessing a directory. You must explicitly define it in CloudFront

Your cloud front distribution will look like this:

If you go to the domain name you will see the a secure website but it is still using cloud front distribution random name:

Step 3: Update Route 53 to Point to CloudFront

Now its time to give our domain name to cloud front distribution. Go to Route 53 → Hosted Zones and edit the previous record or create the new one. in my case I am creating a new record**.** one record for www.cloudgirl.studio and one for only cloudgirl.studio because both domain names were included in the CloudFront distribution setup

After creating the record, you can verify it using nslookup:(optional)

Run the following command on terminal: nslookup cloudgirl.studio

Step 4: Test Your Website:

After propagation, visit your website via https://cloudgirl.studio and https://www.cloudgirl.studio to check everything

Conclusion

Initially, we hosted the website using Route 53 only, which lacked HTTPS and other performance benefits. Then, we enhanced it with CloudFront and SSL for security and performance. Now, your static site is fast, secure, and ready for production!