Logo

Static Site Hosting on AWS

Deploy your static sites using AWS S3 and CloudFront for scalable and reliable hosting.

There are two common methods to deploy your static site on AWS: using S3 only, or S3 with CloudFront for better performance and custom domains.

Method 1: Host Directly on S3

1. Prepare Your Static Site

  • •
    Click on 'Save & Download' in ThemesForApp builder dashboard to get your site files.
  • •
    Unzip the downloaded file to access your static site files (HTML, CSS, JS, assets).

2. Create an S3 Bucket

  • •
    Sign in to the AWS Management Console.
  • •
    Go to S3 and click 'Create bucket'.
  • •
    Enter a unique bucket name and select a region.
  • •
    Uncheck 'Block all public access' (required for static site hosting).
  • •
    Create the bucket.

3. Upload Your Site Files

  • •
    Click on Save and Download in ThemesForApp builder dashboard to get your site files.
  • •
    Unzip the downloaded file to access your static site files (HTML, CSS, JS, assets).
  • •
    Open your S3 bucket.
  • •
    Click 'Upload' and add all your static site files and folders.
  • •
    Click 'Upload' to start the process.

4. Configure Bucket for Static Website Hosting

  • •
    Go to the 'Properties' tab of your bucket.
  • •
    Scroll to 'Static website hosting' and click 'Edit'.
  • •
    Enable static website hosting.
  • •
    Set the index document (e.g., index.html) and error document (e.g., 404.html).
  • •
    Save changes.

5. Make Files Public

  • •
    Go to the 'Permissions' tab.
  • •
    Edit the bucket policy to allow public read access. Example 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.
  • •
    Save the policy.

6. Access Your Site

  • •
    Go back to the 'Properties' tab.
  • •
    Copy the 'Bucket website endpoint' URL.
  • •
    Open it in your browser to view your live site.

Method 2: Use S3 with CloudFront (Recommended for Custom Domains & HTTPS)

1. Complete Steps 1-3 from Method 1

  • •
    Prepare your static site files and upload them to an S3 bucket.

2. Create a CloudFront Distribution

  • •
    Go to the AWS CloudFront console.
  • •
    Click 'Create Distribution'.
  • •
    For 'Origin domain', select your S3 bucket (choose the one without 'website' in the name for best security).
  • •
    Set 'Viewer protocol policy' to 'Redirect HTTP to HTTPS'.
  • •
    Set default root object to 'index.html'.
  • •
    Click 'Create distribution'.

3. (Optional) Add a Custom Domain and SSL

  • •
    In CloudFront, go to your distribution and click 'Edit'.
  • •
    Add your custom domain under 'Alternate domain names (CNAMEs)'.
  • •
    Request or import an SSL certificate in AWS Certificate Manager (ACM) for your domain.
  • •
    Attach the certificate to your CloudFront distribution.
  • •
    Update your domain's DNS to point to the CloudFront distribution's domain name.

4. Access Your Site

  • •
    Once deployed, access your site via the CloudFront domain or your custom domain.