Hosting a Static Website on AWS S3 with Custom Domain and HTTPS

Introduction

In this article, I will guide you through the process of hosting a static website on Amazon Web Services (AWS) S3 bucket, mapping it to a custom domain, and enabling HTTPS. I recently went through this process and found it to be a bit complex, so I wanted to share my experience to help others.

Prerequisites

• An AWS account
• A static website built and ready for deployment
• A registered domain name with a third-party registrar (e.g., GoDaddy)

Step 1: Create an S3 Bucket and Upload Static Website

1. Sign in to the AWS Management Console and navigate to the Amazon S3 service.
2. Click “Create bucket” and provide a unique DNS-compliant name for your bucket.
3. Choose a region for your bucket and click “Create”.
4. Upload your static website files to the bucket and make the bucket public.

Step 2: Enable Static Website Hosting and Set Index Document

1. Go to the Properties tab of your bucket.
2. Scroll down to the “Static website hosting” box and click “Edit”.
3. Select “Enable” and enter “index.html” as the Index Document.
4. Click “Save changes”.

Step 3: Register a Domain Name with Route 53

1. Navigate to the Route 53 service in the AWS Management Console.
2. Click “Domain Registration” and then “Register Domain”.
3. Enter your desired domain name and follow the prompts to complete the registration process.

Step 4: Create A Records in Route 53

1. In the Route 53 dashboard, click “Hosted zones” and then click on your domain name.
2. Click “Create Record Set”.
3. In the Name field, leave it empty for the root domain (e.g., example.com) or enter “www” for the www subdomain.
4. Select “A - IPv4 address” for the Record Type.
5. In the Value field, enter the IP address of your S3 bucket (you can find this in the S3 bucket properties).
6. Click “Create” to create the A record.

Step 5: Update Nameservers in Your Domain Registrar

1. Go to your domain registrar’s website and navigate to the DNS settings for your domain.
2. Update the nameservers with the ones provided by Route 53.

Step 6: Request an SSL Certificate from AWS Certificate Manager

1. Navigate to the AWS Certificate Manager service in the AWS Management Console.
2. Click “Request a certificate” and follow the prompts to request a certificate for your domain name.

Step 7: Create a CloudFront Distribution

1. Navigate to the CloudFront service in the AWS Management Console.
2. Click “Create Distribution” and follow the prompts to create a distribution for your S3 bucket.
3. When prompted, select the SSL certificate you created in Step 6.
4. In the “Alternate Domain Names (CNAMEs)” field, enter your domain name.
5. In the “Default Cache Behavior Settings”, set “Viewer Protocol Policy” to “Redirect HTTP to HTTPS”.
6. Click “Create Distribution”.

Step 8: Update Route 53 to Use CloudFront Distribution

1. Go back to the Route 53 service and navigate to the Hosted Zone for your domain.
2. Create two new A records, one for the root domain (e.g., example.com) and one for the www subdomain.
3. Select “Alias” and choose the CloudFront distribution you created in Step 7.
4. Click “Create” to create the A records.

Step 9: Test Your Website

1. Open a web browser and go to your website using the domain name you registered.
2. Verify that your website loads correctly and that the URL shows HTTPS.

Conclusion

By following these steps, you can host your static website on AWS S3 bucket, map it to a custom domain, and enable HTTPS. This setup provides a scalable and cost-effective way to host your website with the added benefits of security and reliability.