WordPress

Behandle WordPress als Headless-CMS und zieh die ganze Website ab: paginiere durch /wp-json/wp/v2/posts, erzeuge eine HTML-Datei pro Slug und cache die API-Antworten zwischen den Builds.

Was du bekommst

Eine Startseite mit den neuesten Beiträgen
/blog — vollständiges Archiv aller Beiträge
/blog/[slug] — eine statische HTML-Seite pro Beitrag (trägt auch bei Tausenden von Beiträgen)
fetchWithCache, damit erneute Builds die WP-Antworten wiederverwenden, statt alles neu zu laden

Projektstruktur

my-site/
  sitelo.config.js
  src/
    lib/
      wordpress.js       # WP-REST-Helfer (paginiertes Abziehen)
    index.ht.js          # Startseite — listet die neuesten Beiträge
    blog/
      index.ht.js        # /blog — vollständiges Archiv
      [slug].ht.js       # /blog/:slug — jeder Beitrag
    css/
      styles.css

export default {
  site: 'https://example.com',
  // Tausende Seiten? Nebenläufigkeit erhöhen
  renderConcurrency: 16,
  renderBatchSize: 128,
}

1. Auf deine WordPress-Website zeigen

Die REST-API ist in modernem WordPress standardmäßig aktiv. Prüfe das unter https://deine-website.com/wp-json/wp/v2/posts.

Setze WP_URL in der Umgebung (oder schreib es beim Ausprobieren fest hinein):

WP_URL=https://your-wordpress-site.com

2. Gemeinsame WordPress-Helfer

getAllPosts() liest X-WP-TotalPages und läuft jede Seite ab (WordPress deckelt per_page bei 100). Lass _embed beim Sammeln der Slugs weg — hole die Embeds nur für einzelne Beiträge.

import { fetchWithCache } from 'sitelo'

const WP_URL = process.env.WP_URL ?? 'https://your-wordpress-site.com'
const PER_PAGE = 100 // WP-Maximum für /wp/v2/posts

async function wpFetch(path, query = {}) {
  const url = new URL(`/wp-json/wp/v2${path}`, WP_URL)
  for (const [key, value] of Object.entries(query)) {
    if (value != null) url.searchParams.set(key, String(value))
  }

  const res = await fetchWithCache(url, undefined, {
    maxAge: 3600,
    cache: 'auto',
  })

  if (!res.ok) {
    throw new Error(`WordPress ${res.status}: ${url}`)
  }

  return {
    data: await res.json(),
    totalPages: Number(res.headers.get('X-WP-TotalPages') ?? 1),
    total: Number(res.headers.get('X-WP-Total') ?? 0),
  }
}

export async function getPosts({ page = 1, perPage = 20, embed = true } = {}) {
  const { data } = await wpFetch('/posts', {
    page,
    per_page: perPage,
    _embed: embed ? '1' : undefined,
  })
  return data
}

/** Läuft jede Seite von /posts ab, bis die Website vollständig abgezogen ist. */
export async function getAllPosts({
  perPage = PER_PAGE,
  embed = false,
  onPage,
} = {}) {
  const first = await wpFetch('/posts', {
    page: 1,
    per_page: perPage,
    _embed: embed ? '1' : undefined,
  })

  const posts = [...first.data]
  onPage?.(1, first.totalPages, posts.length)

  for (let page = 2; page <= first.totalPages; page += 1) {
    const next = await wpFetch('/posts', {
      page,
      per_page: perPage,
      _embed: embed ? '1' : undefined,
    })
    posts.push(...next.data)
    onPage?.(page, first.totalPages, posts.length)
  }

  return posts
}

export async function getPostBySlug(slug) {
  const { data } = await wpFetch('/posts', {
    slug,
    _embed: '1',
  })
  return data[0] ?? null
}

export function postPath(post) {
  return `/blog/${post.slug}`
}

export function featuredImage(post) {
  return post._embedded?.['wp:featuredmedia']?.[0]?.source_url
}

3. Startseite

import { getPosts, postPath } from './lib/wordpress.js'

export async function data() {
  const posts = await getPosts({ perPage: 5 })
  return { posts }
}

export default ({ data }) => `
  <html lang="de">
    <head>
      <title>Meine Website</title>
      <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
      <h1>Neues aus dem Blog</h1>
      <ul>
        ${data.posts
          .map(
            (post) => `
          <li>
            <a href="${postPath(post)}">${post.title.rendered}</a>
          </li>`,
          )
          .join('')}
      </ul>
      <p><a href="/blog">Alle Beiträge</a></p>
    </body>
  </html>
`

import { html, head, title, link, body, h1, ul, li, a, p } from 'javascript-to-html'
import { getPosts, postPath } from './lib/wordpress.js'

export async function data() {
  const posts = await getPosts({ perPage: 5 })
  return { posts }
}

export default ({ data }) =>
  html({ lang: 'de' },
    head(
      title('Meine Website'),
      link({ rel: 'stylesheet', href: '/styles.css' }),
    ),
    body(
      h1('Neues aus dem Blog'),
      ul(
        ...data.posts.map((post) =>
          li(a({ href: postPath(post) }, post.title.rendered)),
        ),
      ),
      p(a({ href: '/blog' }, 'Alle Beiträge')),
    ),
  )

import { getPosts, postPath } from './lib/wordpress.js'

export async function data() {
  const posts = await getPosts({ perPage: 5 })
  return { posts }
}

export default function Home({ data }) {
  return (
    <html lang="de">
      <head>
        <title>Meine Website</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <h1>Neues aus dem Blog</h1>
        <ul>
          {data.posts.map((post) => (
            <li key={post.slug}>
              <a href={postPath(post)}>{post.title.rendered}</a>
            </li>
          ))}
        </ul>
        <p><a href="/blog">Alle Beiträge</a></p>
      </body>
    </html>
  )
}

4. Blog-Übersicht

Nutze getAllPosts(), damit das Archiv nicht bei 50–100 Einträgen endet.

import { getAllPosts, postPath } from '../lib/wordpress.js'

export async function data() {
  // Vollständiges Archiv — durch die ganze WP-Website paginieren
  const posts = await getAllPosts({ embed: false })
  return { posts }
}

export default ({ data }) => `
  <html lang="de">
    <head>
      <title>Blog</title>
      <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
      <h1>Blog (${data.posts.length})</h1>
      <ul>
        ${data.posts
          .map(
            (post) => `
          <li>
            <a href="${postPath(post)}">${post.title.rendered}</a>
            <time>${post.date.slice(0, 10)}</time>
          </li>`,
          )
          .join('')}
      </ul>
    </body>
  </html>
`

import { html, head, title, link, body, h1, ul, li, a, time } from 'javascript-to-html'
import { getAllPosts, postPath } from '../lib/wordpress.js'

export async function data() {
  // Vollständiges Archiv — durch die ganze WP-Website paginieren
  const posts = await getAllPosts({ embed: false })
  return { posts }
}

export default ({ data }) =>
  html({ lang: 'de' },
    head(
      title('Blog'),
      link({ rel: 'stylesheet', href: '/styles.css' }),
    ),
    body(
      h1(`Blog (${data.posts.length})`),
      ul(
        ...data.posts.map((post) =>
          li(
            a({ href: postPath(post) }, post.title.rendered),
            time(post.date.slice(0, 10)),
          ),
        ),
      ),
    ),
  )

import { getAllPosts, postPath } from '../lib/wordpress.js'

export async function data() {
  // Vollständiges Archiv — durch die ganze WP-Website paginieren
  const posts = await getAllPosts({ embed: false })
  return { posts }
}

export default function BlogIndex({ data }) {
  return (
    <html lang="de">
      <head>
        <title>Blog</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <h1>Blog ({data.posts.length})</h1>
        <ul>
          {data.posts.map((post) => (
            <li key={post.slug}>
              <a href={postPath(post)}>{post.title.rendered}</a>
              <time>{post.date.slice(0, 10)}</time>
            </li>
          ))}
        </ul>
      </body>
    </html>
  )
}

5. Jeden Beitrag zu einer statischen Seite machen

generateStaticParams muss jeden Slug zurückgeben, den du in dist/ haben willst. Paginiere die API hier — ruf nicht einmal getPosts({ perPage: 100 }) auf und höre dann auf.

import {
  getAllPosts,
  getPostBySlug,
  featuredImage,
} from '../lib/wordpress.js'

export async function generateStaticParams() {
  const ripStarted = performance.now()
  console.log(
    `[wordpress] ziehe Beiträge ab… (${process.uptime().toFixed(1)}s seit dem Start)`,
  )

  // Zieht jeden veröffentlichten Beitrag ab (Tausende sind kein Problem — 100 pro Anfrage)
  const posts = await getAllPosts({
    embed: false, // nur Slugs; _embed der Geschwindigkeit wegen überspringen
    onPage: (page, totalPages, count) => {
      console.log(`[wordpress] Seite ${page}/${totalPages} (${count} Beiträge)`)
    },
  })

  const ripSeconds = ((performance.now() - ripStarted) / 1000).toFixed(1)
  console.log(
    `[wordpress] abgezogen ${posts.length} Beiträge in ${ripSeconds}s` +
      ` (${process.uptime().toFixed(1)}s seit dem Start)`,
  )

  return posts.map((post) => ({ slug: post.slug }))
}

export async function data({ params }) {
  const post = await getPostBySlug(params.slug)
  if (!post) throw new Error(`Beitrag nicht gefunden: ${params.slug}`)
  return { post }
}

export default ({ data }) => {
  const { post } = data
  const image = featuredImage(post)

  return `
    <html lang="de">
      <head>
        <title>${post.title.rendered}</title>
        <link rel="stylesheet" href="/css/styles.css">
      </head>
      <body>
        <article>
          <p><a href="/blog">← Blog</a></p>
          <h1>${post.title.rendered}</h1>
          <time>${post.date.slice(0, 10)}</time>
          ${image ? `<img src="${image}" alt="">` : ''}
          <div class="content">
            ${post.content.rendered}
          </div>
        </article>
      </body>
    </html>
  `
}

import {
  html, head, title, link, body, article, p, a, h1, time, img, div,
} from 'javascript-to-html'
import {
  getAllPosts,
  getPostBySlug,
  featuredImage,
} from '../lib/wordpress.js'

export async function generateStaticParams() {
  const ripStarted = performance.now()
  console.log(
    `[wordpress] ziehe Beiträge ab… (${process.uptime().toFixed(1)}s seit dem Start)`,
  )

  // Zieht jeden veröffentlichten Beitrag ab (Tausende sind kein Problem — 100 pro Anfrage)
  const posts = await getAllPosts({
    embed: false, // nur Slugs; _embed der Geschwindigkeit wegen überspringen
    onPage: (page, totalPages, count) => {
      console.log(`[wordpress] Seite ${page}/${totalPages} (${count} Beiträge)`)
    },
  })

  const ripSeconds = ((performance.now() - ripStarted) / 1000).toFixed(1)
  console.log(
    `[wordpress] abgezogen ${posts.length} Beiträge in ${ripSeconds}s` +
      ` (${process.uptime().toFixed(1)}s seit dem Start)`,
  )

  return posts.map((post) => ({ slug: post.slug }))
}

export async function data({ params }) {
  const post = await getPostBySlug(params.slug)
  if (!post) throw new Error(`Beitrag nicht gefunden: ${params.slug}`)
  return { post }
}

export default ({ data }) => {
  const { post } = data
  const image = featuredImage(post)

  return html({ lang: 'de' },
    head(
      title(post.title.rendered),
      link({ rel: 'stylesheet', href: '/styles.css' }),
    ),
    body(
      article(
        p(a({ href: '/blog' }, '← Blog')),
        h1(post.title.rendered),
        time(post.date.slice(0, 10)),
        image ? img({ src: image, alt: '' }) : '',
        div({ class: 'content' }, post.content.rendered),
      ),
    ),
  )
}

import {
  getAllPosts,
  getPostBySlug,
  featuredImage,
} from '../lib/wordpress.js'

export async function generateStaticParams() {
  const ripStarted = performance.now()
  console.log(
    `[wordpress] ziehe Beiträge ab… (${process.uptime().toFixed(1)}s seit dem Start)`,
  )

  // Zieht jeden veröffentlichten Beitrag ab (Tausende sind kein Problem — 100 pro Anfrage)
  const posts = await getAllPosts({
    embed: false, // nur Slugs; _embed der Geschwindigkeit wegen überspringen
    onPage: (page, totalPages, count) => {
      console.log(`[wordpress] Seite ${page}/${totalPages} (${count} Beiträge)`)
    },
  })

  const ripSeconds = ((performance.now() - ripStarted) / 1000).toFixed(1)
  console.log(
    `[wordpress] abgezogen ${posts.length} Beiträge in ${ripSeconds}s` +
      ` (${process.uptime().toFixed(1)}s seit dem Start)`,
  )

  return posts.map((post) => ({ slug: post.slug }))
}

export async function data({ params }) {
  const post = await getPostBySlug(params.slug)
  if (!post) throw new Error(`Beitrag nicht gefunden: ${params.slug}`)
  return { post }
}

export default function BlogPost({ data }) {
  const { post } = data
  const image = featuredImage(post)

  return (
    <html lang="de">
      <head>
        <title>{post.title.rendered}</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <article>
          <p><a href="/blog">← Blog</a></p>
          <h1>{post.title.rendered}</h1>
          <time>{post.date.slice(0, 10)}</time>
          {image ? <img src={image} alt="" /> : null}
          <div
            className="content"
            dangerouslySetInnerHTML={{ __html: post.content.rendered }}
          />
        </article>
      </body>
    </html>
  )
}

6. Build

WP_URL=https://your-wordpress-site.com sitelo build

Der erste Build geht einmal durch WordPress und füllt den Fetch-Cache. Spätere Builds greifen auf die gecachten Listen- und Detailantworten zurück (cache: 'auto' → Dateisystem in Produktion), bis maxAge abläuft. Erhöhe renderConcurrency in sitelo.config.js, wenn du Tausende Beitragsseiten renderst.

Hinweise

HTML aus WordPress

title.rendered und content.rendered sind HTML-Strings aus WP. Setz sie unverändert in dein Template (wie oben), oder bereinige sie, wenn du dem CMS nicht vollständig traust.

Private Inhalte

Öffentliche REST-Routen geben nur veröffentlichte Beiträge preis. Für Entwürfe oder eigene Authentifizierung übergib Header im zweiten Argument von fetchWithCache (das übliche fetch-Init) und nutze einen stabilen cacheKey.

Doku zum Daten laden · Routing-Doku