anthropic-fonts 1.1.0

package/docs/DEPLOYMENT.md

@@ -0,0 +1,622 @@
+# 🚀 Deployment Guide
+
+Complete step-by-step instructions for deploying Anthropic Fonts CDN to production.
+
+## Table of Contents
+
+1. [GitHub Pages + jsDelivr (Free & Fast)](#github-pages--jsdelivr)
+2. [Cloudflare R2 (Affordable & Fast)](#cloudflare-r2)
+3. [AWS S3 + CloudFront (Enterprise)](#aws-s3--cloudfront)
+4. [Self-hosted (NGINX/Apache)](#self-hosted)
+5. [Vercel/Netlify (Static Hosting)](#vercelnetlify)
+
+---
+
+## GitHub Pages + jsDelivr
+
+**Best for:** Open-source projects, free CDN with global coverage
+
+### Step 1: Initialize Git Repository
+
+```bash
+cd /path/to/AnthropicFont
+git init
+git add .
+git commit -m "Initial commit: Anthropic Fonts CDN"
+```
+
+### Step 2: Add Remote & Push
+
+```bash
+git remote add origin https://github.com/devchauhann/fonts.git
+git branch -M main
+git push -u origin main
+```
+
+### Step 3: Enable GitHub Pages
+
+1. Go to **Settings** → **Pages**
+2. Set source to `main` branch, `/cdn` folder
+3. GitHub will provide your Pages URL: `https://devchauhann.github.io/AnthropicFont/`
+
+### Step 4: Use jsDelivr CDN (Recommended)
+
+jsDelivr automatically serves your GitHub files with global CDN:
+
+```html
+<!-- Static CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css">
+
+<!-- Dynamic CSS API -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/api/css?family=AnthropicSans&weights=400;700">
+
+<!-- Font Files -->
+https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@700.woff2
+```
+
+### Step 5: Create a Release (Optional but Recommended)
+
+```bash
+git tag v1.0.0
+git push origin v1.0.0
+```
+
+Then use versioned URLs:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.0.0/cdn/v1/css/all.css">
+```
+
+### ✅ Pros & Cons
+
+**Pros:**
+- Free forever
+- Global CDN (jsDelivr has 300+ servers)
+- No configuration needed
+- Automatic version management via Git tags
+- Perfect for open-source
+
+**Cons:**
+- Slightly slower than commercial CDNs
+- Rate limited (but generous)
+- Depends on GitHub uptime
+
+---
+
+## Cloudflare R2
+
+**Best for:** Affordable, fast, easy setup, no egress costs
+
+### Step 1: Create Cloudflare Account
+
+1. Sign up at https://dash.cloudflare.com
+2. Navigate to **R2** → **Create bucket**
+3. Bucket name: `anthropic-fonts`
+
+### Step 2: Upload Files
+
+```bash
+# Install wrangler CLI
+npm install -g wrangler
+
+# Authenticate
+wrangler login
+
+# Upload fonts
+wrangler r2 cp cdn/v1/fonts/* r2://anthropic-fonts/fonts/ --recursive
+wrangler r2 cp cdn/v1/css/* r2://anthropic-fonts/css/ --recursive
+wrangler r2 cp cdn/v1/data.json r2://anthropic-fonts/data.json
+```
+
+### Step 3: Create Public URL
+
+1. In R2 bucket settings, click **Settings**
+2. Find **Public access** → Create a **Public R2 URL**
+3. Example: `https://pub-abc123def.r2.dev`
+
+### Step 4: Configure CORS Headers
+
+In Bucket → **Settings** → add CORS rule:
+
+```json
+{
+  "AllowedOrigins": ["*"],
+  "AllowedMethods": ["GET", "HEAD"],
+  "AllowedHeaders": ["Content-Type"],
+  "MaxAgeSeconds": 31536000
+}
+```
+
+### Step 5: Use in Production
+
+```html
+<link rel="stylesheet" href="https://pub-abc123def.r2.dev/css/all.css">
+
+<!-- Or with custom domain -->
+<link rel="stylesheet" href="https://fonts.example.com/css/all.css">
+```
+
+### Step 6: Connect Custom Domain (Optional)
+
+1. Add DNS CNAME pointing to R2 bucket
+2. In Cloudflare, enable **Web3 IPFS gateway** for redundancy
+
+### ✅ Pros & Cons
+
+**Pros:**
+- Very affordable ($0.015/GB stored, $0.04/GB downloaded)
+- **No egress fees** (major advantage!)
+- Easy setup
+- Cloudflare's global network
+- 99.99% uptime SLA
+
+**Cons:**
+- Requires Cloudflare account
+- Manual sync needed for updates
+- Not ideal for frequently changing files
+
+---
+
+## AWS S3 + CloudFront
+
+**Best for:** Enterprise, high-traffic, ultimate control
+
+### Step 1: Create S3 Bucket
+
+```bash
+# Install AWS CLI
+pip install awscli
+
+# Configure credentials
+aws configure
+
+# Create bucket (use globally unique name)
+aws s3 mb s3://anthropic-fonts-cdn --region us-east-1
+```
+
+### Step 2: Upload Files
+
+```bash
+# Upload all files
+aws s3 sync cdn/v1/ s3://anthropic-fonts-cdn/v1/ \
+  --cache-control "max-age=31536000,immutable" \
+  --content-encoding gzip
+
+# Or with specific content types
+aws s3 cp cdn/v1/fonts/ s3://anthropic-fonts-cdn/v1/fonts/ \
+  --recursive \
+  --include "*.woff2" \
+  --cache-control "max-age=31536000,immutable"
+```
+
+### Step 3: Configure S3 Bucket Policy
+
+Create bucket policy for public read access:
+
+```json
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Sid": "PublicReadGetObject",
+      "Effect": "Allow",
+      "Principal": "*",
+      "Action": "s3:GetObject",
+      "Resource": "arn:aws:s3:::anthropic-fonts-cdn/*"
+    }
+  ]
+}
+```
+
+### Step 4: Create CloudFront Distribution
+
+```bash
+# Using AWS CLI or console
+aws cloudfront create-distribution --distribution-config file://cloudfront-config.json
+```
+
+**Or via Console:**
+
+1. Go to **CloudFront** → **Create distribution**
+2. Origin domain: `anthropic-fonts-cdn.s3.amazonaws.com`
+3. Viewer protocol: HTTPS only
+4. Cache policy: CachingOptimized (1 year)
+5. Create distribution
+
+### Step 5: Add Custom Domain
+
+1. In CloudFront, add alternate domain name: `fonts.example.com`
+2. Request SSL certificate in **AWS Certificate Manager**
+3. Update DNS CNAME to CloudFront domain
+
+### Example CloudFront Config
+
+```json
+{
+  "S3BucketName": "anthropic-fonts-cdn",
+  "CacheBehaviors": [
+    {
+      "PathPattern": "/v1/fonts/*",
+      "CachePolicyId": "658327ea-f89d-4fab-a63d-7e88639e58f6",
+      "Compress": true,
+      "ViewerProtocolPolicy": "https-only"
+    }
+  ]
+}
+```
+
+### ✅ Pros & Cons
+
+**Pros:**
+- Highly scalable
+- Global CDN with 600+ edge locations
+- Ultimate performance
+- Enterprise SLA (99.99% uptime)
+- Complete control
+
+**Cons:**
+- Can be expensive for high traffic
+- Egress charges ($0.085/GB)
+- Complex setup
+- Steeper learning curve
+
+---
+
+## Self-hosted
+
+**Best for:** Maximum control, on-premise, private deployments
+
+### Step 1: Server Setup
+
+```bash
+# SSH into your server
+ssh user@your-server.com
+
+# Install Node.js
+curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+# Clone repository
+git clone https://github.com/devchauhann/fonts.git
+cd AnthropicFont
+npm install
+```
+
+### Step 2: Configure NGINX Reverse Proxy
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name fonts.example.com;
+
+    ssl_certificate /etc/letsencrypt/live/fonts.example.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/fonts.example.com/privkey.pem;
+
+    # Enable gzip compression
+    gzip on;
+    gzip_types text/css application/font-woff2 font/woff2;
+    gzip_min_length 1000;
+
+    # Caching headers for fonts
+    location /v1/fonts/ {
+        proxy_pass http://localhost:3000;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        add_header Access-Control-Allow-Origin "*";
+        expires 1y;
+    }
+
+    location /v1/css/ {
+        proxy_pass http://localhost:3000;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        expires 1y;
+    }
+
+    location /api/ {
+        proxy_pass http://localhost:3000;
+        add_header Cache-Control "public, max-age=86400";
+    }
+
+    # CORS headers
+    add_header Access-Control-Allow-Origin "*";
+    add_header Access-Control-Allow-Methods "GET, OPTIONS";
+    add_header Access-Control-Allow-Headers "Content-Type";
+}
+
+# Redirect HTTP to HTTPS
+server {
+    listen 80;
+    server_name fonts.example.com;
+    return 301 https://$server_name$request_uri;
+}
+```
+
+### Step 3: Setup SSL Certificate
+
+```bash
+# Using Let's Encrypt
+sudo apt-get install certbot python3-certbot-nginx
+sudo certbot certonly --nginx -d fonts.example.com
+```
+
+### Step 4: Run as Service
+
+Create systemd service file:
+
+```bash
+# /etc/systemd/system/anthropic-fonts.service
+[Unit]
+Description=Anthropic Fonts CDN
+After=network.target
+
+[Service]
+Type=simple
+User=www-data
+WorkingDirectory=/home/www-data/AnthropicFont
+ExecStart=/usr/bin/node api/server.js
+Restart=always
+RestartSec=10
+Environment="NODE_ENV=production"
+Environment="PORT=3000"
+
+[Install]
+WantedBy=multi-user.target
+```
+
+```bash
+# Enable and start
+sudo systemctl daemon-reload
+sudo systemctl enable anthropic-fonts
+sudo systemctl start anthropic-fonts
+```
+
+### Step 5: Monitoring & Updates
+
+```bash
+# Check status
+sudo systemctl status anthropic-fonts
+
+# View logs
+sudo journalctl -u anthropic-fonts -f
+
+# Update fonts
+cd /home/www-data/AnthropicFont
+git pull origin main
+npm run build
+sudo systemctl restart anthropic-fonts
+```
+
+### ✅ Pros & Cons
+
+**Pros:**
+- Maximum control
+- No vendor lock-in
+- Can be cheaper for high traffic
+- Private/on-premise option
+
+**Cons:**
+- Requires server maintenance
+- No global CDN (unless you add one)
+- SSL certificate management
+- Uptime responsibility
+
+---
+
+## Vercel/Netlify
+
+**Best for:** Easiest deployment, jamstack projects
+
+### Vercel Deployment
+
+```bash
+# Install Vercel CLI
+npm i -g vercel
+
+# Deploy
+vercel --prod
+```
+
+**Or connect Git:**
+
+1. Go to https://vercel.com
+2. Import Git repository
+3. Select `cdn` as root directory
+4. Deploy
+
+### Netlify Deployment
+
+```bash
+# Install Netlify CLI
+npm install -g netlify-cli
+
+# Deploy
+netlify deploy --prod --dir=cdn
+```
+
+**Or drag & drop:** Simply drag `cdn` folder to Netlify.
+
+### Configure Headers (netlify.toml)
+
+```toml
+[[headers]]
+for = "/v1/fonts/*"
+[headers.values]
+Cache-Control = "public, max-age=31536000, immutable"
+Access-Control-Allow-Origin = "*"
+
+[[headers]]
+for = "/v1/css/*"
+[headers.values]
+Cache-Control = "public, max-age=31536000, immutable"
+```
+
+### ✅ Pros & Cons
+
+**Pros:**
+- Simplest deployment
+- Free tier available
+- Global CDN included
+- Automatic HTTPS
+- Easy rollbacks
+
+**Cons:**
+- Limited to serverless/static
+- API endpoint needs adjustment
+- Cold starts on function calls
+
+---
+
+## 📊 Comparison Table
+
+| Feature | jsDelivr | Cloudflare R2 | AWS | Self-hosted | Vercel |
+|---------|----------|---------------|-----|-------------|--------|
+| **Cost** | Free | $0.015/GB | $$$ | $$ | $$ |
+| **Setup Time** | 5 min | 15 min | 1 hour | 2 hours | 2 min |
+| **Speed** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
+| **Uptime SLA** | 99.9% | 99.99% | 99.99% | Custom | 99.95% |
+| **Best For** | Open-source | Affordable | Enterprise | Control | Quick |
+
+---
+
+## 🔄 Continuous Deployment
+
+### Automatic Updates on Git Push
+
+**GitHub Actions Example:**
+
+Create `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy to CDN
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'cdn/**'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Deploy to jsDelivr (via purge)
+        run: |
+          curl https://purge.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css
+      
+      - name: Deploy to Cloudflare R2
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_SECRET_KEY }}
+        run: |
+          aws s3 sync cdn/v1/ s3://anthropic-fonts/ \
+            --endpoint-url https://${{ secrets.CF_ACCOUNT_ID }}.r2.cloudflareclient.com \
+            --cache-control "max-age=31536000,immutable"
+```
+
+---
+
+## 🎯 Recommended Setup for Production
+
+**For most users:** GitHub + jsDelivr
+
+```html
+<!-- Ultra-reliable, free, global CDN -->
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css">
+```
+
+**For high-traffic sites:** AWS S3 + CloudFront
+
+```html
+<!-- Maximum performance, enterprise SLA -->
+<link rel="preconnect" href="https://d123xyz.cloudfront.net">
+<link rel="stylesheet" href="https://fonts.example.com/v1/css/all.css">
+```
+
+**For cost-conscious:** Cloudflare R2 + custom domain
+
+```html
+<!-- Cheap, fast, no egress fees -->
+<link rel="preconnect" href="https://fonts.example.com">
+<link rel="stylesheet" href="https://fonts.example.com/css/all.css">
+```
+
+---
+
+## 📝 Monitoring & Analytics
+
+### Track CDN Usage
+
+**jsDelivr:**
+- Stats automatically available at `https://www.jsdelivr.com/package/gh/devchauhann/fonts`
+
+**Cloudflare R2:**
+- Bucket → **Analytics** tab shows bandwidth and requests
+
+**AWS CloudFront:**
+- CloudFront → **Monitoring** → View request, bytes, cache stats
+
+**Self-hosted:**
+```bash
+# NGINX logs
+tail -f /var/log/nginx/access.log | grep fonts
+
+# Monitor Node.js
+npm install -g pm2
+pm2 monit
+```
+
+---
+
+## 🔒 Security Best Practices
+
+1. **Enable HTTPS only** (all modern CDNs do this)
+2. **Set CORS headers** for cross-origin requests
+3. **Configure cache headers** to prevent stale files
+4. **Monitor for unauthorized usage**
+5. **Rate limiting** (if self-hosted)
+6. **Version your releases** for easy rollbacks
+
+---
+
+## 🚨 Troubleshooting
+
+### Fonts Not Loading
+
+```bash
+# Check CORS headers
+curl -I https://cdn.example.com/v1/fonts/AnthropicSans@400.woff2
+
+# Should include:
+# Access-Control-Allow-Origin: *
+```
+
+### Cache Issues
+
+```bash
+# Purge jsDelivr cache
+curl https://purge.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css
+
+# Purge Cloudflare R2
+wrangler r2 cp cdn/v1/ r2://anthropic-fonts/v1/ --recursive --force
+```
+
+### Slow Performance
+
+1. Enable gzip compression
+2. Set aggressive caching headers
+3. Use geographically closest CDN
+4. Monitor real user metrics (RUM)
+
+---
+
+## 📚 Next Steps
+
+1. Choose your deployment platform
+2. Follow the step-by-step guide above
+3. Test font loading: `npm run dev` locally first
+4. Monitor performance in production
+5. Set up automatic updates via GitHub Actions
+
+**Questions?** Check the main [README.md](../README.md) or [USAGE.md](./USAGE.md)