How to Host a Static Website on AWS Using S3, Route 53, CloudFront, and Certificate Manager

If you're new to cloud technology and want to host a static website using AWS, this step-by-step guide will walk you through the process. I recently went through it myself, and I hope sharing my experience will help you get started.

Why Use AWS for Hosting?

Amazon Web Services (AWS) offers a wide range of tools to host static websites easily and securely. Services like S3 for storage, Route 53 for domain management, Certificate Manager for SSL certificates, and CloudFront for global content delivery all work together to ensure your site is fast, secure, and accessible worldwide.

Let’s dive into the steps I followed!

Step 1: Storing Your Website Files in an S3 Bucket

AWS S3 (Simple Storage Service) is a great place to store static website files like HTML, CSS, JavaScript, and images. Here's how you can set it up:

1. Create an S3 Bucket:

• Log into your AWS Management Console.
• Navigate to S3 and click Create Bucket.
• Input the name of the bucket and ensure it’s the same as the domain name you purchased so the example.com domain should be represented as example.com and select the region closest to you.

2. Upload Website Files:

• After creating the bucket, click into it and upload your website files (HTML, CSS, etc.).

3. Enable Static Website Hosting:

• Go to the Properties tab of your bucket.
• Under Static website hosting, choose Enable and enter your index and error documents (usually index.html and error.html).

4. Configure Bucket Permissions:

• You’ll need to make the bucket publicly accessible so visitors can view your site.
• Navigate to Permissions, click Bucket Policy, and add the following policy

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

Important: Replace "Bucket-Name" with the actual name of your S3 bucket. This policy allows the public to access the files in your bucket, making the website available to everyone.

Step 2: Managing the Domain with Route 53

To connect your domain to your S3 bucket, you’ll use AWS Route 53. Here’s how to set it up:

1. Register Your Domain (if you haven’t already):

• In Route 53, go to Domains and register a new domain or transfer an existing one.

2. Create a Hosted Zone:

• Once your domain is registered, go to Hosted Zones in Route 53.
• Create a new hosted zone for your domain.

3. Set Up DNS Records:

• Add an A Record to point your domain to the S3 bucket. If you're using CloudFront (which we’ll set up later), you’ll need to point this record to CloudFront instead.

Step 3: Setting Up SSL with Certificate Manager

To ensure your site is secure and uses HTTPS, you need to set up an SSL certificate using AWS Certificate Manager:

1. Request a Certificate:

• In the Certificate Manager section of AWS, request a new public certificate.
• Enter your domain name (and any subdomains like www.yourdomain.com).

2. Attach the SSL Certificate to CloudFront (coming up in the next step).

Step 4: Speeding Things Up Globally with CloudFront

To make your website load faster for users around the world, you can use AWS CloudFront, a content delivery network (CDN) service. Here’s how:

1. Create a CloudFront Distribution:

• In the CloudFront section of AWS, create a new distribution.
• Choose S3 Bucket as the origin and enter the bucket URL from Step 1.

2. Enable HTTPS:

• Under SSL Certificate, choose the certificate you created earlier with AWS Certificate Manager.

3. Set Up Caching and Behavior Rules:

• Define how CloudFront caches your content, like how often it checks for updates to your website files.

4. Update Route 53 DNS Settings:

• Go back to Route 53 and edit your DNS records to point to the CloudFront distribution, ensuring your domain loads via CloudFront.

Step 5: Testing Your Setup

Once everything is configured, visit your domain to see if it’s working! The website should load via HTTPS, and with CloudFront, it should load quickly no matter where your visitors are located.

Feel free to reach out if you have any questions or feedback. Let’s keep learning!