[Deploy website]Introduction

Here is a step-by-step guide to deploying your Astro application using AWS S3 and CloudFront. This setup utilizes the AWS Cloudfront flat rate dustribution, which provides 1TB of data transfer and 10,000,000 requests per month on free tier.

Prerequisites

  • An AWS Account.

  • An Astro project ready to build.

  • AWS CLI installed (optional, but makes uploading easier)

[Phase 1]Prepare Your Astro Application

Astro builds static sites by default. Ensure your configuration is set to output static files.

  1. Open astro.config.mjs and ensure it looks like this:

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static', // Default behavior
  build: {
    format: 'directory' // Generates about/index.html instead of about.html
  }
});

2. Build your project:

This creates a dist/ folder containing your website files.

npm run build

[Phase 2]Create a Private S3 Bucket

We will create a private bucket. CloudFront will fetch content securely using Origin Access Control (OAC).

  1. Go to the Amazon S3 Console and click Create bucket.

  2. Bucket name: Give it a unique name (e.g., my-astro-site-2024).

  3. Region: Choose a region close to you (e.g., us-east-1).

  4. Block Public Access settings: Keep “Block all public access” CHECKED. (We do not want the bucket to be open to the world directly).

  5. Click Create bucket.

  6. Open your new bucket and click Upload. Drag and drop the contents of your dist/ folder (not the folder itself) into S3.

Create s3 bucket

[Phase 3]Create a CloudFront Function (Crucial for Astro)

Since S3 is private, requesting your-site.com/about will fail because S3 looks for a file named about, but Astro created about/index.html. We need a tiny “URL Rewrite” function to fix this.

  1. Go to the CloudFront Console -> Functions (on the left sidebar).

  2. Click Create function.

    • Name: AstroIndexRewrite.

    • Runtime: cloudfront-js-2.0.

  3. Paste the following code:

Screenshot 2026-01-21 at 11.42.57 PM

 

  1. Click Create function.

    • Name: AstroIndexRewrite.

    • Runtime: cloudfront-js-2.0.

  2. Paste the following code:

async function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check if the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } 
    // Check if the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }

    return request;
}

4. Click Save changes and then Publish function.

[Phase 4]Create CloudFront Distribution

  1. Go to CloudFront -> Distributions -> Create distribution.

  2. This will allow you to choose plan you required.
Screenshot 2026-01-21 at 11.49.54 PM

  1. I choose free plan.

  2. Add Distribution name

  3. Choose Distribution type.
Screenshot 2026-01-21 at 11.53.46 PM

 

  1. Origin domain: Click the input and select your S3 bucket from the list.

  2. Origin access: Select “Origin access control settings (recommended)”.

    • Click Create control setting (keep defaults) and click Create.

  3. Viewer protocol policy: Select “Redirect HTTP to HTTPS”.

Screenshot 2026-01-21 at 11.57.31 PM

 

  1. Web Application Firewall (WAF): Select “Do not enable security protections” (unless you want to pay extra for WAF).

  2. Click Create distribution.

Screenshot 2026-01-22 at 12.05.47 AM

 

  1. Function associations:

    • Scroll down to Viewer request.

    • Function type: CloudFront Function.

    • Function ARN: Select AstroIndexRewrite (the function you made in Phase 3).

  2. Web Application Firewall (WAF): Select “Do not enable security protections” (unless you want to pay extra for WAF).

  3. Default root object: Type index.html.

  4. Price Class: Use “Use all edge locations (Best Performance)”. This is covered by the 1TB Free Tier.

  5. Click Create distribution.

Screenshot 2026-01-22 at 12.02.31 AM
Screenshot 2026-01-22 at 12.02.55 AM

[phase 5]Grant CloudFront Permission to S3

After creating the distribution, you will see a blue banner at the top of the screen saying “The S3 bucket policy needs to be updated”.

  1. Click Copy policy in that banner.

  2. Go back to your S3 Bucket -> Permissions tab.

  3. Scroll down to Bucket policy, click Edit, and paste the policy you copied.

  4. It should look like this (but with your specific IDs):

{
    "Version": "2012-10-17",
    "Statement": {
        "Sid": "AllowCloudFrontServicePrincipalReadOnly",
        "Effect": "Allow",
        "Principal": {
            "Service": "cloudfront.amazonaws.com"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
        "Condition": {
            "StringEquals": {
                "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DIST_ID"
            }
        }
    }
}
Screenshot 2026-01-22 at 12.09.36 AM

Phase 6: Verify Deployment

  1. Go to your CloudFront Distribution dashboard.

  2. Copy the Distribution Domain Name (e.g., d12345abc.cloudfront.net).

  3. Open it in your browser.

    • Homepage should load.

    • Navigate to a sub-page (e.g., /about). It should load correctly without the .html extension thanks to the CloudFront Function.

[phase 6]Connect GoDaddy domain to CloudFront

Connecting your GoDaddy domain to CloudFront requires three distinct phases. You cannot simply point the DNS to CloudFront immediately; you must first prove you own the domain by generating a free SSL certificate in AWS.

 

Here is the step-by-step process.

Phase 1: Request a Free SSL Certificate (AWS)

CloudFront requires an SSL certificate to serve your custom domain (HTTPS).

 

  1. Log in to the AWS Console and switch your region to US East (N. Virginia) us-east-1.

    • Critical: CloudFront only accepts certificates from this specific region.

  2. Search for Certificate Manager (ACM).

     

  3. Click Request. Select Request a public certificate and click Next.

  4. Domain names: Enter your domain in two formats:

    • your-domain.com

    • *.your-domain.com (covers www and others)

  5. Validation method: Select DNS validation.

  6. Click Request.

  7. You will see a list of certificates. Click the Certificate ID you just created.

  8. In the Domains section, you will see “CNAME name” and “CNAME value”. Keep this page open; you need these for GoDaddy.

     

Phase 2: Verify Ownership in GoDaddy

You must add the CNAME record from Phase 1 into GoDaddy to prove you own the domain.

 

  1. Log in to GoDaddy -> Domain Portfolio.

     

  2. Select your domain and click DNS -> Manage Zones (or “Edit DNS”).

     

  3. Click Add New Record:

    • Type: CNAME

    • Name: Paste the CNAME name from AWS.

      • Note: GoDaddy auto-appends your domain. If AWS gives you _12345.your-domain.com, only paste _12345 into the Name field.

    • Value: Paste the CNAME value from AWS exactly as is.

    • TTL: 1 Hour.

       

  4. Click Save.

  5. Wait 5-10 minutes. Go back to the AWS Certificate Manager console. The status should change from “Pending validation” to “Issued”.

Phase 3: Connect CloudFront to Your Domain

Now that you have a certificate, you can tell CloudFront to use it.

 

  1. Go to the CloudFront Console and click your Distribution ID.

  2. Under General, click Edit.

  3. Alternate Domain Names (CNAMEs): Click Add item and enter:

    • www.your-domain.com

    • your-domain.com

  4. Custom SSL Certificate: Click the dropdown and select the certificate you created in Phase 1.

  5. Scroll to the bottom and click Save changes.

Point GoDaddy to CloudFront

Now we send the actual traffic from GoDaddy to AWS. As discussed, we will use the www method because it is the most stable way to handle root domains on GoDaddy.

Step A: Point www to CloudFront

  1. Go to your GoDaddy DNS Management page.

  2. Look for an existing record with Name www.

    • If it exists: Click the Pencil icon to edit it.

    • If not: Click Add New Record and choose Type CNAME.

  3. Name: www

  4. Value: Paste your CloudFront Distribution Domain Name (e.g., d12345abc.cloudfront.net).

    • Tip: You can find this on the main CloudFront dashboard under “Domain Name”.

  5. TTL: 1 Hour.

  6. Click Save.

Step B: Forward the Root Domain (@) This ensures that if someone types your-domain.com (without www), they don’t get an error.

  1. Still in GoDaddy, scroll down to the section labeled Forwarding. (Sometimes it is a tab or a separate menu item called “Forwarding” depending on the GoDaddy interface version).

  2. Look for Domain (not Subdomain) and click Add Forwarding.

  3. Destination URL:

    • Select https:// from the dropdown.

    • Enter: www.your-domain.com

  4. Forward Type: Permanent (301).

  5. Settings: Select “Update my nameservers and DNS settings to support this change” (if asked).

  6. Click Save.

Part 3: Final Verification

It usually takes about 15 to 30 minutes for these changes to propagate across the internet.

  1. Open a new browser tab (incognito mode is best to avoid caching).

  2. Type www.your-domain.com -> It should load your Astro site securely with the lock icon.

  3. Type your-domain.com -> It should automatically flip to www and load your site.

Do you wnt us to setup Website for you for a cheaper cost ?? 
Then
Drop msg below.