Gallery Plain

A static gallery website built with HTML5 Boilerplate.

Deployment & Cache Management

aws s3 sync --acl public-read --sse --delete [project path] s3://sebs.gallery --exclude ".git/*"

S3 + CloudFront Cache Issues

When syncing content to S3 bucket for static site hosting, users sometimes get weird old versions due to CloudFront caching. Here's how to fix it:

Quick Fix - Manual Cache Invalidation

1. Go to CloudFront Console in AWS
2. Select your distribution (the one serving your S3 bucket)
3. Click the "Invalidations" tab
4. Click "Create Invalidation"
5. Enter paths to invalidate:
   • /* - invalidates everything (use sparingly, costs more)
   • /index.html - invalidates specific files
   • /css/* - invalidates specific directories
6. Click "Invalidate"

Note: You get 1,000 free invalidation paths per month, then $0.005 per path.

Browser Cache Clearing Strategies

For End Users:

• Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
• Clear browser cache manually
• Open in incognito/private mode

For Development:

• Add cache-busting query parameters: style.css?v=20240101
• Set appropriate Cache-Control headers on S3 objects:
  • HTML files: Cache-Control: max-age=300 (5 minutes)
  • CSS/JS files: Cache-Control: max-age=31536000 (1 year) with versioning
  • Images: Cache-Control: max-age=2592000 (30 days)

Deployment Workflow

1. Sync files to S3: aws s3 sync . s3://your-bucket-name --delete
2. If using CloudFront, create invalidation for updated paths
3. Test in incognito mode to verify updates

Project Structure

Built on HTML5 Boilerplate. See doc/usage.md for detailed documentation.

• css/ - Stylesheets
• js/ - JavaScript files
• img/ - Image assets
• content/ - Markdown content files
• video/ - Video assets