Skip to main content

Cloudflare + AWS S3 Hosting

Learn how to host your avatar on your own domain using AWS S3 and Cloudflare.

Overview​

This tutorial will guide you through hosting your avatar embed on your own website using:

  • AWS S3 for static file hosting
  • Cloudflare for DNS management and CDN
  • Custom domain like https://avatar.mywebsite.com

Prerequisites​

  • An AWS account
  • A Cloudflare account
  • A domain name managed by Cloudflare
  • Your avatar embed code from oktalkto.me

Step 1: Create AWS S3 Bucket​

1.1 Access AWS S3 Console​

  1. Log in to AWS Management Console
  2. Navigate to S3 service
  3. Click Create bucket

1.2 Configure Bucket Settings​

Critical: For static website hosting, the bucket name must match your domain name exactly.

  1. Bucket configuration:

    • Bucket name: avatar.mywebsite.com (must match your domain exactly)
    • Region: Choose closest to your users (e.g., us-east-1)
    • Object Ownership: ACLs enabled > Bucket owner preferred

  2. Public access settings:

    • ❌ Uncheck Block all public access
    • ✅ Check I acknowledge that the current settings might result in this bucket and the objects within becoming public

  3. Advanced settings:

    • Bucket Versioning: Disable (optional)
    • Tags: Add tags if needed
    • Encryption: Server-side encryption (optional)

  4. Click Create bucket

1.3 Configure Bucket for Website Hosting​

  1. Select your newly created bucket
  2. Go to Properties tab
  3. Scroll to Static website hosting
  4. Click Edit
  5. Configure:
    • Static website hosting: Enable
    • Hosting type: Host a static website
    • Index document: index.html
    • Error document: index.html (optional)
  6. Click Save changes

1.4 Set Bucket Policy​

  1. Go to Permissions tab
  2. Click Edit under Bucket policy
  3. Add the following policy (replace avatar.mywebsite.com with your bucket name):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::avatar.mywebsite.com/*"
        }
    ]
}
  1. Click Save changes

Step 2: Create Your Avatar Website​

2.1 Create index.html File​

Create a local file called index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Avatar</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }
        
        .avatar-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            border: none;
            background: transparent;
        }
        
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #00ffff;
            font-size: 18px;
            z-index: 1000;
        }
        
        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #00ffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @media (max-width: 768px) {
            .avatar-container {
                width: 100vw;
                height: 100vh;
            }
        }
    </style>
</head>
<body>
    <div class="loading" id="loading">Loading Avatar...</div>
    
    <!-- Replace YOUR_API_KEY and YOUR_PROFILE_ID with your actual values -->
    <iframe 
        class="avatar-container" 
        src="https://oktalkto.me/embed.html?apiKey=YOUR_API_KEY&profileId=YOUR_PROFILE_ID"
        frameborder="0"
        allow="microphone; camera; autoplay; encrypted-media; fullscreen"
        allowfullscreen
        onload="document.getElementById('loading').style.display='none'">
    </iframe>
    
    <script>
        // Optional: Add custom tracking or analytics
        console.log('Avatar loaded successfully');
        
        // Handle iframe communication (optional)
        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://oktalkto.me') return;
            
            // Handle messages from avatar if needed
            console.log('Message from avatar:', event.data);
        });
    </script>
</body>
</html>

2.2 Customize Your Avatar​

  1. Replace YOUR_API_KEY with your actual API key from your avatar platform
  2. Replace YOUR_PROFILE_ID with your actual profile ID from your avatar settings
  3. You can get these values from your avatar profile page
  4. Customize the styling, colors, and branding as needed

Step 3: Upload to AWS S3​

3.1 Upload Files​

  1. In AWS S3 Console, select your bucket
  2. Click Upload
  3. Click Add files
  4. Select your index.html file
  5. Click Upload

3.2 Set Object Permissions​

  1. Click on the uploaded index.html file
  2. Go to Permissions tab
  3. Under Access control list (ACL):
    • Public access: Everyone (public access)
    • Objects: ✅ Read
  4. Click Save changes

3.3 Test S3 Website Endpoint​

  1. Go to Properties tab of your bucket
  2. Scroll to Static website hosting
  3. Copy the Bucket website endpoint (e.g., http://avatar-mywebsite-com.s3-website-us-east-1.amazonaws.com)
  4. Test the URL in your browser

Step 4: Configure Cloudflare DNS​

4.1 Add CNAME Record​

  1. Log in to your Cloudflare dashboard
  2. Select your domain
  3. Go to DNS > Records
  4. Click Add record
  5. Configure:
    • Type: CNAME
    • Name: avatar (for avatar.mywebsite.com)
    • Target: avatar-mywebsite-com.s3-website-us-east-1.amazonaws.com (your S3 website endpoint without http://)
    • Proxy status: ✅ Proxied (orange cloud)
  6. Click Save

4.2 Configure SSL/TLS Settings​

  1. In Cloudflare, go to SSL/TLS > Overview
  2. Set SSL/TLS encryption mode to Flexible
  3. Go to SSL/TLS > Edge Certificates
  4. Enable Always Use HTTPS

Step 5: Test Your Setup​

5.1 Verify DNS Propagation​

  1. Wait 5-10 minutes for DNS propagation
  2. Test your URL: https://avatar.mywebsite.com
  3. You should see your avatar loading

5.2 Test Different Devices​

  • Desktop browsers
  • Mobile devices
  • Different network connections

Step 6: Advanced Configuration (Optional)​

6.1 CloudFront Distribution (Enhanced Performance)​

For better performance, set up AWS CloudFront:

  1. Go to CloudFront service in AWS Console
  2. Click Create distribution
  3. Configure:
    • Origin Domain: Your S3 bucket website endpoint
    • Origin Protocol Policy: HTTP Only
    • Allowed HTTP Methods: GET, HEAD
    • Cache Policy: Caching Optimized
  4. Update Cloudflare CNAME to point to CloudFront distribution

6.2 Custom Error Pages​

Create custom error pages for better user experience:

  1. Create 404.html with user-friendly error message
  2. Upload to S3 bucket
  3. Configure in S3 Static website hosting settings

6.3 Performance Optimization​

Add these Cloudflare optimizations:

  1. Speed > Optimization
    • Enable Auto Minify for HTML, CSS, JS
    • Enable Brotli compression
    • Enable Early Hints
  2. Caching > Configuration
    • Set Browser Cache TTL: 1 day
    • Set Edge Cache TTL: 1 month

Step 7: Security Enhancements​

7.1 S3 Bucket Security​

  1. Block public access to bucket (keep objects public)
  2. Enable CloudTrail for access logging
  3. Set up S3 Access Logging

7.2 Cloudflare Security​

  1. Security > Settings
    • Set Security Level: Medium
    • Enable Bot Fight Mode
    • Configure Rate Limiting if needed

Troubleshooting​

Common Issues​

403 Forbidden Error:

  • Check bucket policy allows public read access
  • Verify object permissions are set to public read
  • Ensure bucket name matches exactly

Avatar not loading:

  • Check if your avatar ID is correct
  • Verify CORS settings in avatar profile
  • Ensure domain is whitelisted in oktalkto.me

SSL Certificate Issues:

  • Wait up to 24 hours for SSL certificate provision
  • Check SSL/TLS settings in Cloudflare
  • Verify CNAME record is proxied (orange cloud)

DNS not resolving:

  • Check CNAME record points to correct S3 endpoint
  • Verify DNS propagation (use DNS checker tools)
  • Ensure Cloudflare proxy is enabled

Getting Help​

If you encounter issues:

  1. Check browser console for errors
  2. Test with different browsers
  3. Verify all configuration steps
  4. Use AWS CloudTrail for S3 access logs
  5. Contact support with specific error messages

Cost Considerations​

AWS S3 Pricing​

  • Storage: ~$0.023 per GB/month
  • Requests: $0.0004 per 1,000 GET requests
  • Data Transfer: First 100 GB free, then $0.09 per GB

Cloudflare​

  • Free tier: Sufficient for most use cases
  • Pro tier: $20/month for enhanced features

Domain​

  • Varies by registrar (~$10-15/year)

Monitoring and Analytics​

7.1 AWS CloudWatch​

  1. Enable S3 request metrics for monitoring
  2. Set up CloudWatch alarms for high traffic
  3. Monitor Error rates and Response times

7.2 Cloudflare Analytics​

  1. Monitor traffic patterns in Cloudflare dashboard
  2. Set up Rate Limiting based on usage
  3. Review Security events and Bot traffic

Next Steps​

  • Set up multiple avatars with different paths
  • Implement custom analytics tracking
  • Add authentication for private avatars
  • Configure custom branding and styling
  • Set up automated backups and versioning
  • Implement CI/CD pipeline for updates