Logo

dev-resources.site

for different kinds of informations.

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

Published at
8/18/2024
Categories
aws
route53
cloudfront
s3
Author
jaideep247
Categories
4 categories in total
aws
open
route53
open
cloudfront
open
s3
open
Author
10 person written this
jaideep247
open
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/*"
            ]
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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!

cloudfront Article's
30 articles in total
Favicon
Lee esto antes de implementar S3 y CloudFront usando Terraform.
Favicon
Lee esto antes de implementar S3 y CloudFront usando Terraform.
Favicon
Building an S3 Static Website with CloudFront Using Terraform
Favicon
AWS CloudFront: A Comprehensive Guide
Favicon
Configuring AWS WAF, CloudFront, and S3 Bucket for Secure Access
Favicon
Setting Up Custom Domain for API Gateway & CloudFront
Favicon
Apply SSL Certificate on AWS ACM (also Cloudflare)
Favicon
How to Fix Next.js CloudFront Permission Denied: Complete Guide to Static Export URL Issues
Favicon
Building Testable CloudFront Functions with TypeScript
Favicon
CloudFront and S3: SignatureDoesNotMatch , the request signature we calculated does not match the signature you provided
Favicon
Mastering Custom Responses in Amazon CloudFront to Block Behavior — Default(*)
Favicon
Unlock CloudFront's New Logging Potential with Athena Partition Projection
Favicon
Discovering the Latest Features of AWS CloudFront: Enhancing Performance and Security
Favicon
Create an Asset Store with a Custom Domain using AWS CDK, Route53, S3 and CloudFront
Favicon
New Feature: Amazon CloudFront no longer charges (No Billing) for requests blocked by AWS WAF
Favicon
Reduce the amount of code in AWS CDK: Apply OAC in Amazon CloudFront L2 constructs
Favicon
Amazon Web Services (AWS) has announced today a new edge location in #Qatar
Favicon
Hosting a Static Website On S3 bucket With CloudFront.
Favicon
Setting up AWS S3 and CloudFront with Signed URLs using CDK
Favicon
Leveraging Lambda@Edge to seamlessly manage frontend maintenance window like a pro
Favicon
How to Resolve 403 Access Issues When Deploying a SPA on AWS with S3 and CloudFront
Favicon
Cloud Resume Challenge: Hosting a React CV using S3, CloudFront, Route 53, Lambda, DynamoDB and GitHub actions for CI/CD
Favicon
Deploying Static Website to AWS: A Step-by-Step Guide with S3, Route 53, and CloudFront
Favicon
Resolve Lambda URL Error - signature not match when using POST/PUT
Favicon
Setting Up and Securing CloudFront for S3 Static Sites with Custom Subdomains Using AWS Cloud Development Kit(CDK)
Favicon
How to Host a Static Website on AWS Using S3, Route 53, CloudFront, and Certificate Manager
Favicon
RTT Reduction Strategies for Enhanced Network Performance
Favicon
Dynamically Choosing Origin Based on Host Header and Path with AWS CloudFront and Lambda@Edge
Favicon
Understanding Speed: A Beginner's Guide to AWS CloudFront
Favicon
Deploy a Static React Site Using AWS S3 and CloudFront

Featured ones: