:lightning: CDN option

README.md

@@ -44,6 +44,7 @@ A Flask-based webcomic website with server-side rendering using Jinja2 templates
   - [Option 1: Docker (Recommended)](#option-1-docker-recommended)
   - [Option 2: Manual Deployment with Gunicorn](#option-2-manual-deployment-with-gunicorn)
   - [Using a Reverse Proxy (Recommended)](#using-a-reverse-proxy-recommended)
+  - [Using a CDN for Static Assets](#using-a-cdn-for-static-assets)
   - [Additional Production Considerations](#additional-production-considerations)
 - [Upgrading to a Database](#upgrading-to-a-database)
 - [Customization](#customization)
@@ -172,6 +173,7 @@ Don't have a server? No problem! Here are beginner-friendly options to get your
 - JSON API for programmatic access
 - Open Graph and Twitter Card metadata for social sharing
 - Server-side rendering with Jinja2
+- **Built-in CDN support** for static assets (images, CSS, JavaScript)
 - **Comprehensive accessibility features** (WCAG compliant)
 - **Search engine optimized** (sitemap, robots.txt, meta tags, canonical URLs)
 
@@ -724,6 +726,7 @@ The `comics_data.py` file contains global configuration options for your comic s
 COMIC_NAME = 'Sunday Comics'              # Your comic/website name
 COPYRIGHT_NAME = None                     # Name for copyright (defaults to COMIC_NAME)
 SITE_URL = 'http://localhost:3000'        # Your domain (update for production)
+CDN_URL = None                            # CDN URL for static assets (None = use local)
 FULL_WIDTH_DEFAULT = False                # Make all comics full-width by default
 PLAIN_DEFAULT = False                     # Hide header/remove borders by default
 LOGO_IMAGE = 'logo.png'                   # Path to logo (relative to static/images/)
@@ -1035,12 +1038,67 @@ Set up Nginx or another reverse proxy in front of your app for:
 - Load balancing
 - Better security
 
+### Using a CDN for Static Assets
+
+For better performance, especially with high traffic or global audiences, you can serve static assets (images, CSS, JavaScript) from a Content Delivery Network (CDN).
+
+**How it works:**
+
+Sunday Comics includes built-in CDN support through the `CDN_URL` configuration option. When set, all static assets (comic images, CSS, JavaScript, icons, etc.) are served from your CDN instead of your application server.
+
+**Setup Steps:**
+
+1. **Upload your static files to a CDN:**
+   - Upload the entire `static/` directory to your CDN provider
+   - Popular CDN options: Cloudflare, AWS CloudFront, BunnyCDN, KeyCDN
+   - Maintain the same directory structure (e.g., `static/css/style.css` → `your-cdn.com/static/css/style.css`)
+
+2. **Configure Sunday Comics:**
+   ```python
+   # In comics_data.py
+   CDN_URL = 'https://cdn.example.com'  # No trailing slash!
+   ```
+
+3. **Deploy and test:**
+   - Restart your application
+   - Verify images and CSS load from the CDN by checking network requests in browser DevTools
+
+**Benefits:**
+- ⚡ **Faster loading** - Static assets served from edge servers closer to your readers
+- 📉 **Reduced server load** - Your application server only handles dynamic content
+- 💰 **Lower bandwidth costs** - CDN bandwidth is often cheaper than server bandwidth
+- 🌍 **Global performance** - Readers worldwide get fast load times
+- 🛡️ **DDoS protection** - Many CDNs include built-in protection
+
+**Example Configuration:**
+
+```python
+# Local development (no CDN)
+CDN_URL = None
+
+# Production with CDN
+CDN_URL = 'https://d1abc123xyz.cloudfront.net'  # AWS CloudFront example
+CDN_URL = 'https://cdn.yourcomic.com'           # Custom domain example
+```
+
+**Important Notes:**
+- When using a CDN, update your static files on the CDN whenever you make changes
+- Consider using cache-busting techniques for CSS/JS updates (version query parameters)
+- Test thoroughly after enabling CDN to ensure all assets load correctly
+- The `cdn_static` template filter automatically handles URL generation
+- When `CDN_URL` is `None`, Sunday Comics falls back to local static file serving
+
+**Free CDN Options:**
+- **Cloudflare** - Free tier includes CDN and DDoS protection
+- **jsDelivr** - Free CDN for GitHub repositories
+- **BunnyCDN** - Low-cost pay-as-you-go pricing
+
 ### Additional Production Considerations
 
 - Use a process manager (systemd, supervisor) for non-Docker deployments
 - Set appropriate file permissions
 - Enable HTTPS with Let's Encrypt
-- Consider using a CDN for static assets
+- Use a CDN for static assets (see [Using a CDN](#using-a-cdn-for-static-assets) above)
 - Monitor logs and performance
 - Set up automated backups of `comics_data.py`