Live WordPress + CloudFront
Keep WordPress online and send images through CloudFront — no S3 required.
Placeholder embed
Replace videoId and poster when the recording is published.
Production script:
docs/tivlo-ssg-video-scripts/18-use-case-live-cloudfront.md.
Who this is for
Public WordPress that must stay reachable: contact forms, search, login, WooCommerce (the dynamic parts), and the admin. You already run same-origin static HTML (or you are about to). You want images — and optionally CSS/JS — to load from CloudFront instead of hitting origin on every view.
This is CDN Scenario 1. CloudFront’s origin is your live website. Leave S3 Media Sync off. WordPress still stores the files. Think of it as a faster front door for pictures, not a moving van.
The problem
Static HTML from Tivlo speeds the document. Large uploads still travel
from the WordPress host unless a CDN sits in front of them. CloudFront
fetches from your public site once, then caches at the edge. Tivlo
rewrites src / srcset (and optional stylesheet/script URLs) so the
browser asks the CDN.
What you need outside WordPress
| Piece | Role |
|---|---|
| Public WordPress URL | CloudFront origin — not localhost |
| CloudFront distribution | Origin = that site; note domain (d123….cloudfront.net or cdn.example.com) |
| Optional Distribution ID | Automatic invalidations when a synced file changes (Scenario 1 has nothing in S3; ID still helps if you use invalidation later) |
Tivlo does not create the distribution. You paste the CDN domain into CDN & Media Sync.
Origin must be public
CloudFront cannot use localhost. For a laptop-only CMS, use
Static export + S3
instead. AWS will not fetch your kitchen.
The setup
Finish same-origin Tivlo: generation and serving on, skip logged-in
on, Full Rebuild, X-Tivlo-Static: hit in a private window.
In AWS, create a CloudFront distribution. Origin = https://www.example.com
(your live site). Copy the distribution domain.
Settings → Tivlo Static Site → CDN & Media Sync → CloudFront CDN:
Rewrite media URLs to the CDN on; optional Serve CSS & JS
through the CDN; CDN Domain without https://; optional
Distribution ID.
S3 Sync: leave Sync the media library and Sync CSS & JS off.
Save CDN Settings, then Build Console → Full Rebuild so exported HTML picks up CDN URLs. Live WordPress pages pick up rewrite as soon as you save.
Inspect a page in a private window: image URLs should use the CDN
host with the uploads path still under /wp-content/uploads/.
[IMAGE: cdn-tab]
CDN tab with rewrite on and both S3 toggles off. Caption: “Scenario 1 — CloudFront origin is the live site.”
Daily routine
| When you… | What happens |
|---|---|
| Publish a post | Incremental HTML rebuild as usual; media URLs already rewrite on live PHP |
| Upload a new image | Live pages use the CDN after save; rebuild static HTML if you serve exported files |
| Replace an image | CloudFront may keep the old object until expiry unless you invalidate |
| Change CDN settings | Save CDN Settings, then Full Rebuild for exported HTML |
When this is the wrong guide
If WordPress is only on your computer, this scenario cannot work — CloudFront has no public origin. Use Local WordPress, static hosting and Static export + S3.
Related reading
How is this guide?