Setting Up a Static Website on Amazon S3 with a CDN

by

In today’s digital landscape, having a fast, reliable, and scalable website is paramount. Static websites — those primarily made up of HTML, CSS, and JavaScript without server-side processing — have gained popularity for their simplicity and performance. Amazon S3 (Simple Storage Service) offers a robust solution for hosting static websites, while integrating a Content Delivery Network (CDN) through Amazon CloudFront, can enhance your website’s performance significantly. In this blog post, we will walk through the steps to set up a static website on AWS S3 and distribute it using CloudFront.

Step 1: Setting Up Your Amazon S3 Bucket

  1. Log in to the AWS Management Console: Start by logging in to the AWS Management Console.
  2. Create an S3 Bucket:
    • Navigate to the S3 service.
    • Click on “Create Bucket”.
    • Enter a unique bucket name (this must be globally unique across all of AWS).
    • Choose the region where you want the bucket to reside.
    • Uncheck the “Block all public access” option (this is necessary for a public static site).
  3. Enable Static Website Hosting:
    • Select your newly created bucket and go to the “Properties” tab.
    • Scroll down to the “Static website hosting” section and enable it.
    • Provide the name for your index document (typically index.html) and an error document (for example, 404.html).
  4. Upload Your Website Files:
    • Click on the “Objects” tab of your bucket.
    • Click “Upload” and select the files for your static site (HTML, CSS, JavaScript, images, etc.).
    • After uploading, ensure that all files have the correct permissions. Change the permissions to make the content public.
  5. Set Bucket Policy for Public Access:
    • You will need to set a bucket policy to allow public access to your S3 bucket. Here’s a sample 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 the name of your bucket.

Step 2: Setting Up CloudFront as a CDN

  1. Navigate to CloudFront in the AWS Console:
    • Go to the CloudFront service in the AWS Management Console.
  2. Create a New Distribution:
    • Click on “Create Distribution” and choose the “Web” option.
    • In the “Origin Settings”, for the “Origin Domain Name”, select your S3 bucket from the dropdown list (this should automatically append s3.amazonaws.com).
    • Set a unique name for your distribution and choose the required settings (default values are usually sufficient for a basic site).
  3. Configure Default Cache Behavior:
    • Specify the allowed HTTP methods (GET, HEAD are generally enough for static sites).
    • Leave the Viewer Protocol Policy to “Redirect HTTP to HTTPS” to ensure a secure connection.
  4. Set Distribution Settings:
    • For the “Default Root Object,” enter index.html.
    • Configure any additional settings (like price class, logging, etc.) as per your requirements.
  5. Create the Distribution:
    • Click on “Create Distribution”. It may take a few minutes for the distribution to be deployed.

Step 3: Accessing Your Static Site

  1. Check CloudFront Distribution Status:
    • Once the status is “Deployed”, find your CloudFront distribution’s URL (it typically looks like xxxxxx.cloudfront.net).
  2. Access Your Static Site:
    • Open a web browser and enter your CloudFront URL. You should see your static site hosted via S3 and served through CloudFront.

Step 4: (Optional) Point Your Domain to CloudFront

If you want to use your own domain name for your static site:

  1. Register a Domain: Ensure you have a domain registered, either through AWS Route 53 or another domain registrar.
  2. Update DNS Settings:
    • In your domain registrar (or Route 53), create a CNAME record that points to your CloudFront distribution URL.
  3. Enable SSL:
    • For better security, consider enabling SSL via AWS Certificate Manager (ACM) and associating it with your CloudFront distribution.

Conclusion

Setting up a static website on AWS S3 and distributing it via CloudFront can significantly enhance your website’s speed and availability. The combination of Amazon S3’s reliable storage and CloudFront’s global CDN ensures that your site remains highly accessible, no matter where your users are located. Whether you’re hosting personal projects, portfolios, or business sites, this modern approach is cost-effective and scalable, making it an ideal solution for static website hosting. Start exploring the possibilities with AWS today!

Leave a Comment