I Took WordPress Off the Internet: Karl.Fail on Astro and Cloudflare Pages

mkdir wordpress-static
cd wordpress-static
mkdir -p src/lib src/layouts src/pages scripts public .state

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "node scripts/import.mjs && astro build && pagefind --site dist --root-selector '[data-pagefind-body]' && node scripts/verify.mjs",
    "preview": "astro preview --host 127.0.0.1"
  },
  "dependencies": { "astro": "7.3.8", "cheerio": "1.2.0", "sanitize-html": "2.18.1", "sharp": "0.35.5", "shiki": "4.5.0" },
  "devDependencies": { "pagefind": "1.5.2", "wrangler": "4.151.0" }
}

import { defineConfig } from 'astro/config';
export default defineConfig({ site: process.env.SITE_URL, output: 'static', trailingSlash: 'always' });

node_modules/
dist/
.astro/
.wrangler/
.state/
public/media/
.env*
*.log

WP_URL=https://wordpress.internal.example
WP_USER=static-reader
WP_PASSWORD=YOUR_WORDPRESS_APPLICATION_PASSWORD
SITE_URL=https://blog.example.com
MEDIA_ORIGINS=https://wordpress.internal.example,https://blog.example.com
CLOUDFLARE_ACCOUNT_ID=YOUR_ACCOUNT_ID
CLOUDFLARE_API_TOKEN=YOUR_SCOPED_PAGES_TOKEN
CF_PROJECT=my-static-blog
WRANGLER_SEND_METRICS=false

import sanitize from 'sanitize-html';
import * as cheerio from 'cheerio';
import sharp from 'sharp';
import { codeToHtml, bundledLanguages } from 'shiki';
import { mkdir, writeFile, readFile } from 'node:fs/promises';
import { createHash } from 'node:crypto';

const cms = new URL(process.env.WP_URL);
const site = new URL(process.env.SITE_URL);
if (cms.protocol !== 'https:') throw Error('WP_URL must use trusted HTTPS');
const mediaOrigins = new Set((process.env.MEDIA_ORIGINS || cms.origin).split(','));
const credentials = Buffer.from(`${process.env.WP_USER}:${process.env.WP_PASSWORD}`).toString('base64');
export const text = html => cheerio.load(html || '').text();
const cache = new Map();
async function request(url, authenticated = false) {
  const response = await fetch(url, {
    redirect: 'error', signal: AbortSignal.timeout(30000),
    headers: authenticated ? { Authorization: `Basic ${credentials}` } : {}
  });
  if (!response.ok) throw Error(`HTTP ${response.status}: ${new URL(url).pathname}`);
  return response;
}
async function list(type) {
  const result = [];
  for (let page = 1, pages = 1; page <= pages; page++) {
    const url = new URL(`wp-json/wp/v2/${type}`, cms.href.replace(/\/?$/, '/'));
    url.search = new URLSearchParams({ per_page: '100', page: String(page), status: 'publish', _embed: '1' });
    const response = await request(url, true);
    pages = Number(response.headers.get('x-wp-totalpages') || 1);
    result.push(...await response.json());
  }
  return result.filter(post => !post.content.protected);
}
async function image(source) {
  const url = new URL(source, cms);
  if (!mediaOrigins.has(url.origin) || !url.pathname.includes('/wp-content/uploads/')) {
    throw Error(`Unapproved image origin/path: ${url.origin}`);
  }
  if (cache.has(url.href)) return cache.get(url.href);
  const response = await request(url);
  const chunks = []; let length = 0;
  for await (const chunk of response.body) {
    length += chunk.length;
    if (length > 25 * 1024 * 1024) throw Error('Image exceeds 25 MiB');
    chunks.push(chunk);
  }
  const buffer = Buffer.concat(chunks);
  const metadata = await sharp(buffer, { limitInputPixels: 80000000 }).metadata();
  // ponytail: still images only; handle animation/video explicitly before migration.
  if (metadata.pages > 1) throw Error('Animated image needs an explicit migration decision');
  const variants = [];
  await mkdir('public/media', { recursive: true });
  for (const width of [360, 680, 960, 1400]) {
    const { data, info } = await sharp(buffer, { limitInputPixels: 80000000 })
      .rotate().resize({ width, withoutEnlargement: true }).webp({ quality: 82 })
      .toBuffer({ resolveWithObject: true });
    const name = createHash('sha256').update(data).digest('hex') + '.webp';
    await writeFile(`public/media/${name}`, data);
    if (!variants.some(v => v.width === info.width)) {
      variants.push({ src: `/media/${name}`, width: info.width, height: info.height });
    }
  }
  const largest = variants.at(-1);
  const result = { ...largest, srcset: variants.map(v => `${v.src} ${v.width}w`).join(', ') };
  cache.set(url.href, result);
  return result;
}
async function prepare(post, type) {
  const original = new URL(post.link);
  if (original.search || !original.pathname.endsWith('/')) throw Error('Map non-pretty permalinks first');
  const pathname = decodeURI(original.pathname);
  if (!/^\/(?:[\p{L}\p{N}_~-]+\/)*$/u.test(pathname)) throw Error('Review unusual permalink');
  const allowed = [...new Set([...sanitize.defaults.allowedTags, 'img', 'figure', 'figcaption', 'h1', 'h2'])];
  const $ = cheerio.load(sanitize(post.content.rendered, {
    allowedTags: allowed,
    allowedAttributes: { a: ['href', 'title'], img: ['src', 'alt'], code: ['class'], pre: ['class'] }
  }), null, false);
  for (const element of $('img').toArray()) {
    const node = $(element);
    node.attr({ ...await image(node.attr('src')), sizes: '(max-width: 720px) 100vw, 680px', loading: 'lazy', decoding: 'async' });
  }
  for (const element of $('a[href]').toArray()) {
    const node = $(element); const url = new URL(node.attr('href'), original);
    if ([cms.origin, site.origin, original.origin].includes(url.origin)) node.attr('href', url.pathname + url.search + url.hash);
  }
  for (const element of $('pre').toArray()) {
    const node = $(element), code = node.find('code');
    const language = ((code.attr('class') || node.attr('class') || '').match(/language-([\w+-]+)/) || [])[1];
    node.replaceWith(await codeToHtml(code.length ? code.text() : node.text(), {
      lang: language in bundledLanguages ? language : 'text',
      themes: { light: 'github-light', dark: 'github-dark' }
    }));
  }
  const featured = post._embedded?.['wp:featuredmedia']?.[0];
  return {
    id: post.id, type, path: pathname, title: text(post.title.rendered),
    description: text(post.excerpt.rendered).trim().slice(0, 160),
    date: post.date_gmt + 'Z', modified: post.modified_gmt + 'Z',
    html: $.html(), cover: featured?.source_url ? await image(featured.source_url) : null
  };
}
let pending;
export function importPosts() {
  return pending ||= (async () => {
    const result = [];
    for (const type of ['posts', 'pages']) {
      for (const post of await list(type)) result.push(await prepare(post, type));
    }
    if (new Set(result.map(p => p.path)).size !== result.length) throw Error('Duplicate permalinks');
    if (result.some(p => ['/', '/search/', '/404/'].includes(p.path))) throw Error('Map reserved routes first');
    return result;
  })();
}

export async function posts() { return JSON.parse(await readFile('.state/content.json', 'utf8')); }

import { mkdir, writeFile, rm } from 'node:fs/promises';
import { importPosts } from '../src/lib/wp.mjs';
await mkdir('.state', { recursive: true });
await rm('public/media', { recursive: true, force: true });
await writeFile('.state/content.json', JSON.stringify(await importPosts()), { mode: 0o600 });

---
const { title, description = '', noindex = false, image } = Astro.props;
const canonical = new URL(Astro.url.pathname, Astro.site);
---
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonical} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:url" content={canonical} />
  {image && <meta property="og:image" content={new URL(image, Astro.site)} />}
  {noindex && <meta name="robots" content="noindex,follow" />}
  <script is:inline>
    try {
      const choice = localStorage.getItem('theme');
      if (choice === 'light' || choice === 'dark') document.documentElement.dataset.theme = choice;
    } catch {}
  </script>
</head>
<body>
  <header><a href="/">Blog</a><a href="/search/">Search</a><button id="theme" aria-label="Switch color theme">◐</button></header>
  <main><slot /></main>
  <script>
    document.querySelector('#theme')?.addEventListener('click', () => {
      const root = document.documentElement;
      const dark = root.dataset.theme ? root.dataset.theme === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
      root.dataset.theme = dark ? 'light' : 'dark';
      try { localStorage.setItem('theme', root.dataset.theme); } catch {}
    });
    document.querySelectorAll('pre').forEach(pre => {
      const code = pre.querySelector('code');
      if (!code) return;
      const button = document.createElement('button');
      button.textContent = 'Copy'; button.dataset.pagefindIgnore = ''; button.setAttribute('aria-label', 'Copy code');
      const status = document.createElement('span'); status.setAttribute('role', 'status'); status.dataset.pagefindIgnore = '';
      button.addEventListener('click', async () => {
        try { await navigator.clipboard.writeText(code.textContent || ''); button.textContent = '✓'; status.textContent = 'Copied'; }
        catch { status.textContent = 'Copy failed; select the code manually'; }
        setTimeout(() => { button.textContent = 'Copy'; status.textContent = ''; }, 2000);
      });
      pre.before(button, status);
    });
  </script>
</body>
</html>
<style is:global>
  :root { color-scheme: light dark; --paper: #fff; --ink: #202020; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #181818; --ink: #eee; } }
  :root[data-theme="dark"] { color-scheme: dark; --paper: #181818; --ink: #eee; }
  :root[data-theme="light"] { color-scheme: light; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.75 Georgia, serif; overflow-wrap: anywhere; }
  header, main { max-width: 680px; margin: auto; padding: 1.25rem; }
  header { display: flex; gap: 1.5rem; align-items: center; font-family: system-ui, sans-serif; }
  h1,h2,h3,button { font-family: system-ui, sans-serif; line-height: 1.25; }
  a { color: inherit; } img { max-width: 100%; height: auto; }
  pre { overflow: auto; padding: 1rem; font-size: .85rem; } table { display: block; overflow: auto; }
  button { min-height: 44px; cursor: pointer; } input { max-width: 100%; font: inherit; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .shiki, :root:not([data-theme="light"]) .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; }
  }
  :root[data-theme="dark"] .shiki, :root[data-theme="dark"] .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; }
</style>

---
import { posts } from '../lib/wp.mjs';
import Base from '../layouts/Base.astro';
export async function getStaticPaths() {
  return (await posts()).map(post => ({ params: { path: post.path.slice(1, -1) }, props: { post } }));
}
const { post } = Astro.props;
---
<Base title={post.title} description={post.description} image={post.cover?.src}>
  <article data-pagefind-body={post.type === 'posts' ? '' : undefined}>
    <h1 data-pagefind-meta="title">{post.title}</h1>
    <time datetime={post.date}>{post.date.slice(0, 10)}</time>
    {post.cover && <img src={post.cover.src} srcset={post.cover.srcset} width={post.cover.width} height={post.cover.height} sizes="(max-width: 720px) 100vw, 680px" alt="" fetchpriority="high" />}
    <div set:html={post.html} />
  </article>
</Base>

---
import { posts } from '../lib/wp.mjs';
import Base from '../layouts/Base.astro';
const articles = (await posts()).filter(post => post.type === 'posts');
---
<Base title="My blog" description="Articles and projects">
  <h1>Blog</h1>
  {articles.map(post => <article><h2><a href={post.path}>{post.title}</a></h2><p>{post.description}</p></article>)}
</Base>

---
import Base from '../layouts/Base.astro';
---
<Base title="Page not found" noindex><h1>Page not found</h1><a href="/">Back to the blog</a></Base>

import { posts } from '../lib/wp.mjs';
export async function GET({ site }) {
  const escape = value => String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('"', '&quot;');
  const entries = ['/', ...(await posts()).map(post => post.path)];
  return new Response('<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">' + entries.map(path => `<url><loc>${escape(new URL(path, site))}</loc></url>`).join('') + '</urlset>', { headers: { 'Content-Type': 'application/xml' } });
}

import { posts } from '../lib/wp.mjs';
export async function GET({ site }) {
  const escape = value => String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
  const articles = (await posts()).filter(post => post.type === 'posts');
  const items = articles.map(post => `<item><title>${escape(post.title)}</title><link>${escape(new URL(post.path, site))}</link><guid isPermaLink="true">${escape(new URL(post.path, site))}</guid><pubDate>${new Date(post.date).toUTCString()}</pubDate><description>${escape(post.description)}</description></item>`).join('');
  return new Response(`<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>My blog</title><link>${escape(site)}</link><description>Latest articles</description>${items}</channel></rss>`, { headers: { 'Content-Type': 'application/xml' } });
}

User-agent: *
Allow: /
Sitemap: https://blog.example.com/sitemap.xml

/feed/ /feed.xml 301

/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  X-Frame-Options: DENY
/media/*
  Cache-Control: public, max-age=31536000, immutable
/_astro/*
  Cache-Control: public, max-age=31536000, immutable

---
import Base from '../layouts/Base.astro';
---
<Base title="Search" noindex>
  <h1>Search</h1>
  <form id="search"><label for="query">Search articles</label><input id="query" type="search" required /><button>Search</button></form>
  <p id="status" role="status"></p><ul id="results"></ul>
  <script is:inline type="module">
    const input = document.querySelector('#query'), results = document.querySelector('#results'), status = document.querySelector('#status');
    let sequence = 0;
    async function search() {
      const current = ++sequence, query = input.value.trim(); results.replaceChildren();
      if (!query) { status.textContent = ''; return; }
      status.textContent = 'Searching…';
      try {
        const pagefind = await import('/pagefind/pagefind.js');
        const found = await pagefind.search(query);
        const items = await Promise.all(found.results.slice(0, 20).map(item => item.data()));
        if (current !== sequence) return;
        status.textContent = `${found.results.length} results. Showing up to 20.`;
        for (const item of items) {
          const li = document.createElement('li'), a = document.createElement('a');
          a.href = item.url; a.textContent = item.meta.title; li.append(a); results.append(li);
        }
      } catch { if (current === sequence) status.textContent = 'Search could not load. Please try again.'; }
    }
    document.querySelector('#search').addEventListener('submit', event => {
      event.preventDefault(); history.replaceState(null, '', '#' + encodeURIComponent(input.value)); search();
    });
    input.value = decodeURIComponent(location.hash.slice(1));
    if (input.value) search();
  </script>
</Base>

import { readdir, readFile, lstat, access } from 'node:fs/promises';
import { gunzipSync } from 'node:zlib';
import * as cheerio from 'cheerio';
import path from 'node:path';
const forbidden = [/-----BEGIN (?:RSA |EC |OPENSSH )?PRIVATE KEY-----/, /(?:AKIA|ASIA)[A-Z0-9]{16}/];
const known = ['WP_PASSWORD', 'CLOUDFLARE_API_TOKEN'].map(name => process.env[name]).filter(value => value?.length >= 12);
const privateOrigin = new URL(process.env.WP_URL).origin;
let htmlCount = 0;
async function walk(directory) {
  for (const name of await readdir(directory)) {
    const file = path.join(directory, name), relative = path.relative('dist', file);
    const stat = await lstat(file);
    if (stat.isSymbolicLink()) throw Error(`Symlink: ${relative}`);
    if (name.startsWith('.') || /\.(?:env|sql|bak|map|php|pem|key)$/i.test(name)) throw Error(`Forbidden file: ${relative}`);
    if (stat.isDirectory()) { await walk(file); continue; }
    const allowed = /\.html$/.test(relative) || ['sitemap.xml', 'feed.xml', 'robots.txt', '_headers', '_redirects'].includes(relative) ||
      /^media\/[a-f0-9]{64}\.webp$/.test(relative) ||
      /^_astro\/[\w.-]+\.(?:css|js)$/.test(relative) ||
      /^pagefind\/[\w./-]+\.(?:js|css|wasm|pagefind|json|pf_fragment|pf_index|pf_meta)$/.test(relative);
    if (!allowed) throw Error(`Unexpected artifact: ${relative}`);
    const raw = await readFile(file);
    const decoded = raw[0] === 0x1f && raw[1] === 0x8b ? gunzipSync(raw, { maxOutputLength: 25 * 1024 * 1024 }) : raw;
    const content = decoded.toString('utf8');
    if (known.some(value => content.includes(value)) || forbidden.some(pattern => pattern.test(content))) throw Error(`Secret candidate: ${relative}`);
    if (content.includes(privateOrigin)) throw Error(`Private CMS reference: ${relative}`);
    if (relative.endsWith('.html')) {
      htmlCount++;
      const $ = cheerio.load(content);
      for (const element of $('img').toArray()) {
        const src = $(element).attr('src');
        if (!src?.startsWith('/media/')) throw Error(`Nonlocal image: ${relative}`);
        await access(path.join('dist', src.slice(1)));
      }
    }
  }
}
await walk('dist');
if (htmlCount < 3) throw Error('Unexpectedly empty build');
await access('dist/pagefind/pagefind.js');
console.log(`Artifact check passed: ${htmlCount} HTML files`);

<?php
/** Plugin Name: Private static publishing signal */
function example_static_changed() {
    update_option('example_static_revision', wp_generate_uuid4(), false);
}
// A broad signal is cheap; the starter also rebuilds after draft-only edits.
foreach (['save_post', 'deleted_post', 'set_object_terms', 'edited_term', 'delete_term', 'add_attachment', 'edit_attachment', 'delete_attachment', 'added_post_meta', 'updated_post_meta', 'deleted_post_meta'] as $hook) {
    add_action($hook, 'example_static_changed', 10, 0);
}
add_action('updated_option', function ($name) {
    if (in_array($name, ['blogname', 'blogdescription', 'permalink_structure', 'timezone_string'], true)) example_static_changed();
}, 10, 1);
add_action('rest_api_init', function () {
    register_rest_route('static-site/v1', '/revision', [
        'methods' => 'GET',
        'permission_callback' => function () { return current_user_can('read'); },
        'callback' => function () { return ['revision' => get_option('example_static_revision', 'initial')]; },
    ]);
});

import { readFile, writeFile, rename, rm } from 'node:fs/promises';
import { spawnSync } from 'node:child_process';
const stateFile = '.state/deployed.json';
const cms = new URL(process.env.WP_URL);
if (cms.protocol !== 'https:') throw Error('Trusted HTTPS required');
async function revision() {
  const response = await fetch(new URL('wp-json/static-site/v1/revision', cms.href.replace(/\/?$/, '/')), {
    redirect: 'error', signal: AbortSignal.timeout(30000),
    headers: { Authorization: 'Basic ' + Buffer.from(`${process.env.WP_USER}:${process.env.WP_PASSWORD}`).toString('base64') }
  });
  if (!response.ok) throw Error(`Revision HTTP ${response.status}`);
  const data = await response.json();
  if (typeof data.revision !== 'string') throw Error('Invalid revision');
  return data.revision;
}
function run(command, args) {
  const result = spawnSync(command, args, { stdio: 'inherit', env: process.env });
  if (result.error || result.status !== 0) throw Error(`Failed: ${command}`);
}
const before = await revision();
let previous;
try { previous = JSON.parse(await readFile(stateFile, 'utf8')); }
catch (error) { if (error.code !== 'ENOENT') throw error; }
if (previous?.revision !== before || Date.now() - previous.at > 86400000) {
  await rm('public/media', { recursive: true, force: true });
  run('npm', ['run', 'build']);
  if (before !== await revision()) throw Error('CMS changed during build; retry next timer tick');
  run('./node_modules/.bin/wrangler', ['pages', 'deploy', 'dist', '--project-name', process.env.CF_PROJECT, '--branch', 'main', '--commit-dirty=true']);
  await writeFile(stateFile + '.tmp', JSON.stringify({ revision: before, at: Date.now() }), { mode: 0o600 });
  await rename(stateFile + '.tmp', stateFile);
}

[Unit]
Description=Build and publish the static blog
Wants=network-online.target
After=network-online.target

[Service]
Type=oneshot
User=static-builder
Group=static-builder
WorkingDirectory=/opt/wordpress-static
EnvironmentFile=/etc/wordpress-static.env
Environment=HOME=/opt/wordpress-static/.state
Environment=NODE_OPTIONS=--max-old-space-size=1024
ExecStart=/usr/bin/flock --nonblock /opt/wordpress-static/.state/publish.lock /usr/bin/node scripts/publish.mjs
UMask=0077
TimeoutStartSec=15min
NoNewPrivileges=true
PrivateTmp=true
ProtectHome=true
ProtectSystem=full
MemoryMax=1700M
Nice=10

[Unit]
Description=Check WordPress for publication changes

[Timer]
OnBootSec=90s
OnUnitInactiveSec=60s
AccuracySec=5s

[Install]
WantedBy=timers.target

./node_modules/.bin/wrangler pages project create my-static-blog \
  --production-branch main

sudo systemctl daemon-reload
sudo systemctl start wordpress-static.service
sudo journalctl -u wordpress-static.service -n 60 --no-pager

sudo systemctl enable --now wordpress-static.timer
sudo systemctl list-timers wordpress-static.timer