Skip to main content

Cloudflare + Azure Storage Hosting

Learn how to host your avatar on your own domain using Azure Blob Storage and Cloudflare.

Overview​

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

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

Prerequisites​

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

Step 1: Create Azure Storage Account​

1.1 Access Azure Portal​

  1. Log in to Azure Portal
  2. Click Create a resource
  3. Search for Storage account
  4. Click Create

1.2 Configure Storage Account​

Note: Unlike GCP and AWS, Azure Storage account names do not need to match your domain name exactly. Azure uses different methods for custom domain configuration.

  1. Basics:

    • Subscription: Choose your subscription
    • Resource group: Create new or select existing
    • Storage account name: avatarmywebsite (must be globally unique, 3-24 characters, lowercase letters and numbers only)
    • Region: Choose closest to your users
    • Performance: Standard
    • Redundancy: Locally redundant storage (LRS)

  2. Advanced:

    • Security: Enable secure transfer required
    • Blob public access: Enabled
    • Minimum TLS version: Version 1.2

  3. Networking:

    • Connectivity method: Public endpoint (all networks)

  4. Data protection: Use defaults

  5. Encryption: Use defaults

  6. Tags: Add tags if needed

  7. Click Review + create, then Create

1.3 Enable Static Website Hosting​

  1. Once deployment is complete, go to your storage account
  2. In the left menu, go to Data management > Static website
  3. Click Enabled
  4. Configure:
    • Index document name: index.html
    • Error document path: index.html
  5. Click Save
  6. Note the Primary endpoint URL (e.g., https://avatarmywebsite.z13.web.core.windows.net/)

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 Azure Blob Storage​

3.1 Upload Files via Azure Portal​

  1. In your storage account, go to Data storage > Containers
  2. Click on $web container (automatically created for static websites)
  3. Click Upload
  4. Select your index.html file
  5. Click Upload

3.2 Alternative: Upload via Azure Storage Explorer​

  1. Download Azure Storage Explorer
  2. Connect to your Azure account
  3. Navigate to your storage account > Blob Containers > $web
  4. Upload your index.html file

3.3 Alternative: Upload via Azure CLI​

# Install Azure CLI if not already installed
az login

# Upload file to static website container
az storage blob upload \
    --account-name avatarmywebsite \
    --container-name '$web' \
    --name index.html \
    --file ./index.html \
    --content-type 'text/html'

3.4 Test Azure Storage Endpoint​

  1. Go to your storage account > Data management > Static website
  2. Copy the Primary endpoint URL
  3. Test the URL in your browser to verify your avatar loads

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: avatarmywebsite.z13.web.core.windows.net (your Azure storage endpoint without https://)
    • 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 Azure CDN Integration​

For enhanced performance, set up Azure CDN:

  1. In Azure Portal, go to CDN profiles
  2. Click Create CDN profile
  3. Configure:
    • Name: avatar-cdn
    • Pricing tier: Standard Microsoft
    • Resource group: Same as storage account
  4. Create CDN endpoint:
    • Name: avatar-mywebsite
    • Origin type: Storage static website
    • Origin hostname: Your storage static website endpoint
  5. Update Cloudflare CNAME to point to CDN endpoint

6.2 Custom Error Pages​

Create custom error pages:

  1. Create 404.html with user-friendly error message
  2. Upload to $web container
  3. Configure in Static website 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 Azure Storage Security​

  1. Access Control:
    • Enable Secure transfer required
    • Set Minimum TLS version to 1.2
  2. Monitoring:
    • Enable Storage Analytics for logging
    • Set up Azure Monitor alerts

7.2 Cloudflare Security​

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

Step 8: Monitoring and Analytics​

8.1 Azure Monitor​

  1. Go to Monitor > Metrics
  2. Select your storage account
  3. Monitor:
    • Transactions for request count
    • Availability for uptime
    • Ingress/Egress for bandwidth usage

8.2 Azure Storage Analytics​

  1. In storage account, go to Monitoring > Diagnostic settings
  2. Enable logging for:
    • StorageRead events
    • StorageWrite events
    • StorageDelete events

8.3 Cloudflare Analytics​

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

Troubleshooting​

Common Issues​

404 Not Found:

  • Verify index.html is uploaded to $web container
  • Check static website hosting is enabled
  • Ensure file name is exactly index.html

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 Azure endpoint
  • Verify DNS propagation (use DNS checker tools)
  • Ensure Cloudflare proxy is enabled

403 Forbidden Error:

  • Verify static website hosting is enabled
  • Check that blob public access is enabled
  • Ensure container $web exists and is accessible

Getting Help​

If you encounter issues:

  1. Check browser console for errors
  2. Test with different browsers
  3. Verify all configuration steps
  4. Use Azure Monitor for storage metrics
  5. Contact support with specific error messages

Cost Considerations​

Azure Storage Pricing​

  • Storage: ~$0.018 per GB/month (Hot tier)
  • Transactions: $0.0004 per 10,000 operations
  • Data Transfer: First 100 GB free, then $0.087 per GB

Azure CDN (Optional)​

  • Standard Microsoft: $0.087 per GB data transfer
  • Premium Verizon: $0.13 per GB data transfer

Cloudflare​

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

Domain​

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

Backup and Disaster Recovery​

8.1 Azure Backup​

  1. Enable Soft delete for blob storage
  2. Set up Point-in-time restore for containers
  3. Configure Cross-region replication for high availability

8.2 Automated Backups​

# Azure CLI script for backup
az storage blob download-batch \
    --account-name avatarmywebsite \
    --source '$web' \
    --destination ./backup \
    --pattern "*.html"

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 deployments with Azure DevOps
  • Implement geo-redundancy for global availability
  • Add custom domain SSL certificates via Azure
  • Set up monitoring alerts and notifications