Updating Static Sites with Buildkite and CloudFront KV

I recently set up a system to update statically generated pages using Buildkite and CloudFront Key-Value stores. Here's how it works and why it's useful.

The Problem

Static site generation is great for performance and simplicity, but it comes with a challenge: how do you update content without redeploying your entire site? Traditional approaches involve either:

1. Full site rebuilds and redeployments
2. Client-side JavaScript to fetch and render dynamic content

Both approaches have drawbacks. Full rebuilds are slow and expensive, while client-side rendering can impact performance and SEO.

The Solution

I implemented a hybrid approach using:

• CloudFront Functions for request handling
• CloudFront Key-Value stores for content storage
• Buildkite for automated updates

The system works like this:

1. Static pages are generated and deployed normally
2. CloudFront Functions check for updated content in KV stores
3. If updates exist, they're merged with the static content
4. Buildkite automates the process of updating KV stores

Implementation Details

Here's a simplified version of the CloudFront Function:

async function handler(event) {
  // Get the page path
  const path = event.request.uri;
  
  // Check KV store for updates
  const updates = await kv.get(path);
  
  if (!updates) {
    // No updates, serve static content
    return event.request;
  }
  
  // Merge updates with static content
  const response = await fetch(event.request);
  const html = await response.text();
  
  // Your merge logic here
  const updatedHtml = mergeContent(html, updates);
  
  return {
    statusCode: 200,
    body: updatedHtml
  };
}

And the Buildkite pipeline:

steps:
  - label: ":rocket: Update Content"
    command: |
      # Generate updates
      npm run generate-updates
      
      # Update CloudFront KV store
      aws cloudfront put-key-value --key-value-store $KV_STORE_ID \
        --key "/path/to/update" --value "$(cat updates.json)"

Benefits

This approach offers several advantages:

1. Fast updates without full site rebuilds
2. No client-side JavaScript required
3. Maintains SEO benefits of static content
4. Automated through CI/CD

Next Steps

I'm working on improving this system with:

• Batched updates for multiple pages
• Automatic cleanup of old KV entries
• Performance monitoring and optimization

Stay tuned for more updates!