Topics

Hello, I'm Otsuka, CTO at Liberogic.

Even if you tell me to do something about the article...

So, I thought I'd leave a little technical note about "partially implementing a CMS on an existing website."

In the past, the standard approach was to use PHP to "inject logic into HTML," but now, by using Cloudflare Pages Functions, you can create a much smarter, SEO-friendly structure that can be properly indexed by Google.

This time, I'll share how I integrated a microCMS into a static site built with Eleventy by applying "post-processing SSR" using Cloudflare Pages Functions.

Key points of this configuration

In this project, we are building the frontend using Eleventy + Nunjucks. Unlike Astro, which encapsulates Functions within the project,dist/We adopted a method where dynamic content is inserted later into the static HTML output.

It's surprisingly easy to handle and convenient.

1. I want to apply Basic authentication only to the preview environment.

The requirement was, "We want to include authentication in the preview environment, but we want to minimize the execution (cost) of unnecessary workers in production." So, we made a slight adjustment to the pre-build processing,Only during the production build_middleware.jsThe process involves deleting it.

In the production environment, authentication is not required, thus balancing security and convenience while minimizing unnecessary execution costs.

2. Cache microCMS responses using the Cache API.

When using SSR (Server-Side Rendering), one of the biggest concerns is the load and latency caused by making API calls with every request.

That's Cloudflare'sCache APIWe decided to use this method to cache the response at the edge. The cache TTL was set to a relatively short duration of about 5 to 10 minutes.

We maintain freshness while ensuring excellent performance.

3. Cache purging (revalidate) using KV

Even though the TTL is short, the fact that updates aren't reflected instantly is a bit stressful for the operations team.Cloudflare KVWe used it as a store for controlling the revalidate process.

The mechanism is simple.

• When an article is updated using microCMS, a webhook is triggered.
• The KV value is updated at that time.
• Pages Functions uses the KV value as a trigger to determine whether to invalidate the cache.

This design offers the best of both worlds: "blazing fast updates thanks to caching, and instant updates."

summary

I like this approach of "leveraging the strengths of existing static sites while modifying only the necessary parts with Edge" because it offers a high degree of operational flexibility.

Recreating the ease of use of old PHP with the power of Cloudflare! While flashy framework migrations are nice, these kinds of "down-to-earth improvements" are actually the most useful in real-world situations.

Well then.