Deploy to AWS S3 - Opal Editor

Amazon S3 (Simple Storage Service) provides reliable, scalable static website hosting. Opal Editor integrates with AWS S3 to deploy your sites directly to S3 buckets configured for website hosting.

Prerequisites

Before deploying to AWS S3:

An AWS account (sign up at aws.amazon.com)
AWS access key ID and secret access key
An S3 bucket or permission to create one
A completed build ready for deployment

Authentication Setup

AWS S3 requires programmatic access credentials.

Create IAM User

Go to AWS IAM Console > Users
Click “Add user”
Enter username (e.g., “opal-editor”)
Select “Programmatic access”
Click “Next: Permissions”

Attach Permissions

Attach a policy with S3 permissions. You can:

Use AmazonS3FullAccess for full S3 access (easier but less secure)
Create a custom policy with specific bucket permissions (recommended)

Custom policy example:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:ListBucket",
        "s3:PutBucketWebsite",
        "s3:PutBucketPolicy"
      ],
      "Resource": [
        "arn:aws:s3:::your-bucket-name",
        "arn:aws:s3:::your-bucket-name/*"
      ]
    }
  ]
}

Save Credentials

Complete the user creation
Copy the Access Key ID
Copy the Secret Access Key (shown only once!)
Store both securely

Add to Opal Editor

Create a new AWS API authentication in Opal Editor:

Enter Access Key ID as apiKey
Enter Secret Access Key as apiSecret

Keep your AWS credentials secure. They provide access to your AWS resources and can incur costs if misused.

Destination Configuration

Configure your S3 deployment destination:

{
  "remoteAuthId": "your-auth-id",
  "label": "My S3 Website",
  "meta": {
    "bucketName": "my-website-bucket",
    "region": "us-east-1"
  }
}

Configuration Fields

bucketName (required): S3 bucket name
- Must be globally unique across all AWS accounts
- Must be lowercase
- Can contain letters, numbers, hyphens, and periods
- 3-63 characters long
region (required): AWS region for the bucket
- Default: us-east-1
- Common regions: us-east-1, us-west-2, eu-west-1, ap-southeast-1

S3 bucket names must be globally unique. If your desired name is taken, try adding a suffix like -web or -site.

Deployment Process

Configure S3 bucket

Set up your deployment:

Choose or create an S3 bucket
Select AWS region
Bucket will be created if it doesn’t exist

Build your site

Complete a build in Opal Editor:

Source files are processed
Static HTML is generated
Assets are prepared

Automatic bucket configuration

Opal Editor automatically:

Enables static website hosting
Configures public read access
Sets index document to index.html
Sets error document to 404.html (if exists)

Upload files

Deployment uploads:

All files are uploaded in parallel
Content types are automatically detected
Progress is tracked in real-time

Access your site

Your site is live at:

S3 website URL: http://{bucketName}.s3-website.{region}.amazonaws.com
Custom domain (if configured)

How It Works

The AWS S3 deployment agent (RemoteAuthAWSAPIAgent) manages:

Bucket Management: Creates bucket if needed
Website Configuration: Enables static website hosting
Public Access: Configures bucket for public read access
File Upload: Uploads all files with correct content types
URL Generation: Returns the S3 website URL

Bucket Configuration

Opal Editor automatically configures buckets:

// Automatic configuration:
- Website hosting enabled
- Index document: index.html
- Error document: 404.html (if present)
- Public read access granted
- Bucket policy for website access

File Upload

Files are uploaded with optimizations:

Parallel uploads: All files uploaded simultaneously
Content-Type detection: MIME types automatically set
Public read ACL: Files accessible to public
Progress tracking: Real-time upload status

Content Type Detection

Automatic MIME type detection:

.html → text/html
.css → text/css
.js → application/javascript
.json → application/json
.png → image/png
.jpg, .jpeg → image/jpeg
.svg → image/svg+xml
.woff, .woff2 → font/woff, font/woff2
And many more…

Features

Static Website Hosting

S3 static website hosting provides:

Fast content delivery
High availability
Automatic scaling
Pay-per-use pricing

Bucket Versioning

Enable versioning for:

Backup of previous versions
Recovery from accidental deletion
Rollback capability

Access Logs

Track website access:

Enable server access logging
Analyze visitor patterns
Monitor bandwidth usage

Cost-Effective

S3 pricing is very affordable:

Pay only for storage used
Pay only for bandwidth
No minimum fees
Free tier available (first 12 months)

Public Access Configuration

Opal Editor configures public access automatically, but you may need to:

If you see “S3BlockPublicAccessError”:

Your AWS account has Block Public Access enabled
This is an account-level or bucket-level setting
You need to disable it for website hosting

To fix Block Public Access issues:

Check account settings

Go to S3 Console
Click “Block Public Access settings for this account”
Check if blocking is enabled

Update account settings

If account-level blocking is on:

Click “Edit”
Uncheck “Block all public access”
Or selectively uncheck specific options
Save changes

Check bucket settings

For specific bucket:

Select your bucket
Go to “Permissions” tab
Edit “Block public access”
Uncheck required options

Troubleshooting

Bucket Name Already Exists

S3 bucket names are globally unique. If “Bucket already exists”:

Try a different bucket name
Add a unique suffix (date, random string)
Check if you already own a bucket with that name

Solution: Choose a unique bucket name or use an existing bucket you own.

Access Denied Errors

If you see access denied:

Verify AWS credentials are correct
Check IAM user has S3 permissions
Ensure bucket policy allows access
Verify region matches bucket location

Website Not Accessible

If site doesn’t load:

Verify bucket is configured for website hosting
Check Block Public Access settings
Verify bucket policy allows public read
Ensure index.html exists in bucket
Check URL format is correct

Incorrect Content Types

If files serve with wrong content type:

Verify file extensions are correct
Check MIME type detection logic
Manually set content type in S3 console if needed

Region Mismatch

If you see region errors:

Ensure configured region matches bucket region
Update region in destination configuration
Recreate bucket in desired region if needed

Best Practices

Use specific IAM permissions: Create custom policy with minimal required permissions
Enable versioning: Protect against accidental deletion
Configure CloudFront: Add CDN for better performance (see below)
Set up custom domain: Use Route 53 or your DNS provider
Monitor costs: Use AWS Cost Explorer to track spending
Enable logging: Track access and troubleshoot issues
Use lifecycle policies: Automatically delete old versions to save costs

Advanced Configuration

CloudFront CDN

Improve performance with CloudFront:

Create CloudFront distribution

Go to CloudFront Console
Create new distribution
Origin domain: Your S3 website endpoint
Configure caching behavior

Configure custom domain

Add alternate domain name (CNAME)
Request/add SSL certificate
Update DNS to point to CloudFront

Update deployment

After CloudFront setup:

Invalidate cache after deployments
Configure cache behavior
Set TTL for different file types

Custom Domain with Route 53

Set up custom domain:

Register or transfer domain to Route 53
Create hosted zone for your domain
Add A record pointing to S3 bucket (or CloudFront)
Update destination configuration to use custom domain

Bucket Policy

Opal Editor applies this bucket policy:

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

This allows public read access to all objects in the bucket.

CORS Configuration

If loading assets from other domains:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]

Add this in S3 Console > Bucket > Permissions > CORS.

Redirect Rules

Configure redirects for:

Redirecting www to non-www (or vice versa)
Custom error pages
URL rewriting

Add in S3 Console > Bucket > Properties > Static website hosting > Redirection rules.

Cost Optimization

Storage Classes

For static websites, use:

S3 Standard: Best for frequently accessed content
S3 Intelligent-Tiering: Automatically moves objects between tiers

Lifecycle Policies

Create lifecycle rules:

Delete old deployment versions
Move infrequent access files to cheaper storage
Expire incomplete multipart uploads

Data Transfer

Reduce costs:

Use CloudFront CDN (free tier available)
Compress assets before deployment
Enable S3 Transfer Acceleration for faster uploads

Monitoring

CloudWatch Metrics

Monitor your S3 bucket:

Request metrics (GET, PUT, DELETE)
Bandwidth usage
Error rates
Bucket size

Access Logs

Enable server access logging:

Go to bucket properties
Enable Server access logging
Choose target bucket for logs
Analyze access patterns

Get Started

Core Features

Publishing

Advanced

​Prerequisites

​Authentication Setup

​Destination Configuration

​Configuration Fields

​Deployment Process

​How It Works

​Bucket Configuration

​File Upload

​Content Type Detection

​Features

​Static Website Hosting

​Bucket Versioning

​Access Logs

​Cost-Effective

​Public Access Configuration

​Troubleshooting

​Bucket Name Already Exists

​Access Denied Errors

​Website Not Accessible

​Incorrect Content Types

​Region Mismatch

​Best Practices

​Advanced Configuration

​CloudFront CDN

​Custom Domain with Route 53

​Bucket Policy

​CORS Configuration

​Redirect Rules

​Cost Optimization

​Storage Classes

​Lifecycle Policies

​Data Transfer

​Monitoring

​CloudWatch Metrics

​Access Logs

​Related Resources

Build docs developers (and LLMs) love

Prerequisites

Authentication Setup

Destination Configuration

Configuration Fields

Deployment Process

How It Works

Bucket Configuration

File Upload

Content Type Detection

Features

Static Website Hosting

Bucket Versioning

Access Logs

Cost-Effective

Public Access Configuration

Troubleshooting

Bucket Name Already Exists

Access Denied Errors

Website Not Accessible

Incorrect Content Types

Region Mismatch

Best Practices

Advanced Configuration

CloudFront CDN

Custom Domain with Route 53

Bucket Policy

CORS Configuration

Redirect Rules

Cost Optimization

Storage Classes

Lifecycle Policies

Data Transfer

Monitoring

CloudWatch Metrics

Access Logs

Related Resources