Static export + S3
Edit in WordPress, publish HTML, deliver media and CSS from S3 via CloudFront.
Placeholder embed
Replace videoId and poster when the recording is published.
Production script:
docs/tivlo-ssg-video-scripts/19-use-case-static-s3.md.
Who this is for
The companion to Local WordPress, static hosting. You edit on localhost or private staging. Visitors load HTML from a static host and images (and CSS/JS) from CloudFront whose origin is an S3 bucket, not WordPress.
This is CDN Scenario 2. CloudFront cannot use localhost as an
origin. If you only rewrite URLs without copying files to S3, public
visitors request objects that do not exist on the CDN. Broken images.
Very dramatic. Avoidable.
How the pieces split
| Piece | Role |
|---|---|
| WordPress | Editor and generator only — can be offline for visitors |
wp-content/tivlo-static/ | HTML (and bundled assets/ CSS/JS Tivlo wrote) you upload to a static host |
| S3 bucket | Media library copies; CSS/JS used by exported pages when that sync is on |
| CloudFront (media) | Origin = the bucket. CDN Domain in Tivlo |
| Public Base URL | Public HTML origin (may differ from CDN Domain) |
Usually you do not use one CloudFront distribution for both HTML and media. Pages go to the HTML host; media goes to the bucket distribution.
The setup
Create the S3 bucket and a CloudFront distribution with that bucket
as origin (Origin Access Control if the bucket is private). IAM keys
need s3:PutObject, s3:DeleteObject, and
cloudfront:CreateInvalidation if you invalidate.
Plugin Settings: export scope as usual. Public Base URL = the
public HTML site (for example https://www.example.com). Save.
CDN & Media Sync → CloudFront CDN: rewrite media on, Serve CSS & JS through the CDN on, CDN Domain, Distribution ID, invalidation on.
S3 Sync: Sync the media library on, Sync CSS & JS used by exported pages on, bucket, region, keys. Test Connection, then Save CDN Settings.
Sync Existing Media — keep the tab open until it finishes. Only successfully synced files get CDN URLs, so a failed upload cannot 404 from a rewritten link.
Full Rebuild. CSS/JS used by pages upload during export. A URL is rewritten only after that file has reached S3.
Deploy the contents of tivlo-static/ to the HTML host. Confirm a
page’s images use the CDN host and HTML links use Public Base URL.
URL rewrite waits for S3
Failed uploads retry on the next sync or rebuild. Check Test Connection and the sync log before you assume the public site is broken. Tivlo would rather leave a local URL than ship a 404 in fancy clothes.
Daily routine
| When you… | What to do |
|---|---|
| Edit content | Publish in WordPress; drain the queue; upload new HTML when you ship |
| Add images | They sync to S3 after you save the media |
| Change CDN or S3 settings | Save CDN Settings → Full Rebuild → redeploy HTML |
| Replace an image | Re-upload to S3; CloudFront refreshes if invalidation is on |
| Delete an image | S3 copy removed if Delete from S3 when media is deleted is on |
When this is the wrong guide
If WordPress is already public and you only want CloudFront in front of that origin, use Live WordPress + CloudFront (S3 stays off).
Related reading
How is this guide?