How to Deploy a Static Website on Amazon AWS

This guide will walk you through the process of deploying a static website using Amazon Web Services (AWS). We'll cover everything from purchasing a domain to setting up automated deployment using AWS CLI.

Table of Contents

1. Prerequisites
2. Purchase Domain from Namecheap
3. Set Up AWS S3 Bucket
4. Configure AWS CloudFront
5. Set Up AWS Certificate Manager
6. Configure AWS Route 53 7.Generate AWS Access Keys
7. Set Up AWS CLI
8. Create Deployment Script

Prerequisites

• An AWS account
• Basic knowledge of command-line interface
• Your static website files ready for deployment

Purchase Domain from Namecheap

Go to Namecheap and search for your desired domain name. Add the domain to your cart and complete the purchase process.

Set Up AWS S3 Bucket

1. Log in to your AWS Management Console.

2. Navigate to S3 and click "Create bucket".

3. Name your bucket (e.g., your-domain-com).

4. Configure bucket settings:

• Uncheck "Block all public access"
• Enable versioning
• Leave other settings as default

5. Create the bucket.

6. Go to the bucket's "Permissions" tab and add the following bucket policy:

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

Replace your-bucket-name with your actual bucket name.

Configure AWS CloudFront

1. Go to CloudFront in the AWS Console and click "Create Distribution".

2. Choose "Web" as the delivery method.

3. For "Origin Domain Name", select your S3 bucket.

4. Set "Compress Objects Automatically" to "Yes".

5. Under "Default Cache Behavior Settings":

• Viewer Protocol Policy: Redirect HTTP to HTTPS

• Allowed HTTP Methods: GET, HEAD

• Cache Policy and Origin Request Policy: Use the defaults

  

6. Under "Distribution Settings":

• Price Class: Choose your preferred option
• Alternate Domain Names (CNAMEs): Enter your domain name
• SSL Certificate: We'll set this up in the next step

7. Create the distribution.

Set Up AWS Certificate Manager

Warning! AWS Certificate Manager must be created in the US-EAST-1 Region Warning! AWS Certificate Manager must be created in the US-EAST-1 Region Warning! AWS Certificate Manager must be created in the US-EAST-1 Region

1. Go to AWS Certificate Manager.

2. Click "Request a certificate".

3. Choose "Request a public certificate" and click "Next".

4. Enter your domain name and any subdomains (e.g., www.yourdomain.com).

5. Choose "DNS validation" and click "Request". You'll see validation records. Keep this page open for the next step.

Configure AWS Route 53

1. Go to Route 53 in the AWS Console.

2. Click "Create Hosted Zone".

3. Enter your domain name and create the zone.

4. You'll see NS (Name Server) records. Copy these.

5. Go back to Namecheap, find your domain, and update the nameservers with the ones from Route 53.

6. In Route 53, create a new record set:

• Name: leave blank (or enter www if you want a www subdomain)
• Type: A - IPv4 address
• Alias: Yes
• Alias Target: Select your CloudFront distribution

7. Add the CNAME records for SSL certificate validation (from the Certificate Manager step).

Generate AWS Access Keys

1. Go to IAM (Identity and Access Management) in the AWS Console.
2. Click on your user name.
3. Go to the "Security credentials" tab.
4. Under "Access keys", click "Create access key".
5. Download the key file and keep it secure.

Set Up AWS CLI

1. Install AWS CLI following the official guide.
2. Open your terminal and run:

aws configure

3. Enter your AWS Access Key ID and Secret Access Key when prompted.
4. For default region, enter your preferred region.
5. For default output format, you can leave it blank or enter json.

Create Deployment Script

Create a file named deploy.sh in your project root with the following content:

#!/bin/bash

# Variables
BUCKET_NAME="your-bucket-name"
DISTRIBUTION_ID="your-cloudfront-distribution-id"

# Remove existing files in the bucket
aws s3 rm s3://$BUCKET_NAME --recursive

# Upload new files to the bucket
aws s3 sync . s3://$BUCKET_NAME --exclude "*.sh" --exclude ".git/*" --exclude "README.md"

# Invalidate CloudFront cache
aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths "/*"

echo "Deployment complete!"

Replace your-bucket-name and your-cloudfront-distribution-id with your actual values. To use this script:

1. Make it executable: chmod +x deploy.sh
2. Run it from your project directory: ./deploy.sh

This script will delete all existing files in your S3 bucket, upload your new files, and invalidate the CloudFront cache to ensure your changes are immediately visible.