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!

route53 Article's
30 articles in total
Favicon
Dominio personalizado en Amazon API Gateway. Dominio desde GoDaddy.
Favicon
How to Simplify DNS Management in a Multi-Account Environment with Route 53 Resolver
Favicon
How to Add an Elastic (Static) IP to Your EC2 Instance And Update Your DNS Records on Route53
Favicon
Amazon Route 53: AWS's Powerful DNS Service 🌐🚀
Favicon
AWS Private Zones To The Max
Favicon
Migrate a hosted zone to a different AWS account in few seconds!!
Favicon
Before You Dive into Route 53: Learn These DNS Terms
Favicon
How to Add DNS Records for Your Domain in Route53
Favicon
How to Set Up a Public Hosted Zone on Amazon Route 53 When Your Domain Is Registered with Another Registrar
Favicon
Convert http to https in AWS
Favicon
Amazon Route 53 Resolver endpoints now support DNS-over-HTTPS (DoH) with Server Name Indication (SNI) validation
Favicon
Automated DNS Record Management for Kubernetes Resources using external-dns and AWS Route53
Favicon
Automating AWS DNS Firewall Domain List Updates Using S3, Lambda, and CLI
Favicon
Issue 65 of AWS Cloud Security Weekly
Favicon
Unlocking the Power of AWS Route 53: Your Complete Guide to DNS Management
Favicon
How to Use AWS Route 53 for Free
Favicon
Setup AWS EC2 and Configure Route 53: Domain Redirection Made Easy!
Favicon
Deploying Static Website to AWS: A Step-by-Step Guide with S3, Route 53, and CloudFront
Favicon
Cross-Account VPC Associations with Route53 Private Hosted Zone and Addressing Terraform State Update Issue
Favicon
AWS Route53: A Beginner’s Guide
Favicon
Configuring a Custom Domain for API Gateway with AWS Cloud Development Kit (CDK): SSL Certificate Use and Route 53 Integration
Favicon
How to Host a Static Website on AWS Using S3, Route 53, CloudFront, and Certificate Manager
Favicon
Managing your GoDaddy domain with Route53
Favicon
Using a custom domain name in a Private REST API Gateway
Favicon
How to migrate DNS records from CloudFlare to AWS Route53 with Terraform&Terragrunt
Favicon
Multi-Account/Environment DNS Zones
Favicon
Creating a custom domain name for AWS Elastic Beanstalk application
Favicon
Failover Mechanism in Amazon Route 53 Private Hosted Zones
Favicon
Free dynDNS for your NAS: auto-update DNS with your latest IP
Favicon
Advanced Techniques in AWS API Gateway and Route 53

Featured ones: