CDN & Media Sync
The CDN tab in plain language — rewrite URLs, then optionally copy files to S3.
Open Settings → Tivlo Static Site → CDN & Media Sync. The tab does three related jobs:
- CloudFront CDN — rewrite media library image URLs to your CDN domain
- CSS & JS via CDN — optionally rewrite stylesheet and script URLs
- S3 Sync (optional) — copy media (and CSS/JS used by exported pages) to a bucket so CloudFront can use that bucket as the origin
You do not need all three. Most live WordPress sites only need step 1.
[IMAGE: cdn-tab]
Screenshot of the CDN & Media Sync tab: CloudFront CDN, S3 Sync, and Sync Existing Media. Caption: “CDN tab — rewrite URLs, then optionally sync to S3.”
Choose the scenario that matches how you publish:
| Live site origin | Static + S3 | |
|---|---|---|
| WordPress | Public, always online | Can run locally for editing |
| S3 Media Sync | Off | On |
| CSS & JS via CDN | Optional (no sync needed) | On, with Sync CSS & JS enabled |
| CloudFront origin | Your live website | Your S3 bucket |
| Static HTML export | Optional (plugin still helps) | Required for publishing |
| Best for | Faster media on a live WP site | Headless / static publishing |
Before you start
You will need an AWS account and a CloudFront distribution. For Scenario 2 only, an S3 bucket for media. Tivlo will not create those for you. Paste what AWS already gave you.
The page has three sections:
| Section | Purpose |
|---|---|
| CloudFront CDN | Turn on URL rewriting and enter the CDN domain |
| S3 Sync (optional) | Copy media and/or CSS & JS to a bucket — Scenario 2 |
| Sync Existing Media | One-time upload of media already in the library |
When you change CDN settings, click Save CDN Settings, then Build Console → Full Rebuild so exported pages pick up new URLs. Live WordPress pages pick up rewrites as soon as you save — static HTML is the snapshot that needs a reprint.
CloudFront CDN fields
| Field | Purpose |
|---|---|
| Rewrite media URLs to the CDN | Serve media library files through the CDN domain |
| Serve CSS & JS through the CDN | Rewrite stylesheet and script URLs on the live site and in exported HTML |
| CDN Domain | CloudFront domain (d123abc.cloudfront.net) or CNAME (cdn.example.com). No https://. HTTPS is always used. |
| CloudFront Distribution ID | Optional. Required for automatic invalidations (for example E2ABCDEF123456) |
| Invalidate CloudFront when synced files change | Purge edge caches when a synced file is replaced or deleted. Needs the distribution ID. |
S3 Sync fields
| Field | Purpose |
|---|---|
| Sync the media library to an S3 bucket | Mirror uploads (new files automatically; use backfill for existing) |
| Delete from S3 when media is deleted | Remove bucket copies when an attachment is deleted (usually leave on) |
| Sync CSS & JS used by exported pages to S3 | Theme, plugin, core, and tivlo-static/assets/ files, plus fonts/images referenced from those stylesheets |
| S3 Bucket | Bucket name |
| Region | Default us-east-1 |
| Path Prefix | Optional key prefix (for example media/) |
| AWS Access Key ID / Secret Access Key | IAM user with s3:PutObject, s3:DeleteObject, and cloudfront:CreateInvalidation if invalidations are on. Secret is never shown once saved. |
| Test Connection | Writes and removes a test object — click this before you trust a rebuild |
| Sync Existing Media | Batch-upload library files not yet in the bucket. Keep the tab open. |
Local copies always remain in wp-content/uploads. Turning sync off
never deletes WordPress files. Your Media Library stays yours.
How is this guide?