Acecore SystemsAcecore-Unternehmensseite
Deutsch
Kontakt
Menü

Insights / Technische Beiträge

Astro-Blogkommentare nur mit Cloudflare umsetzen

Wie wir Kommentare in einem Astro-Blog ohne externen Kommentardienst umgesetzt haben: Cloudflare Pages Functions, D1, Turnstile und Wrangler.

Gui
  • Technologie
  • Cloudflare
  • Astro
  • Sicherheit
  • Website
Astro-Blogkommentare nur mit Cloudflare umsetzen
Inhaltsverzeichnis
  1. Aufbau
  2. Warum D1
  3. Wrangler als Vertrag
  4. Turnstile serverseitig prüfen
  5. Spam-Schutz
  6. SEO
  7. Fazit
  8. Referenzen

Kommentare bringen Zustand in eine statische Website.

Acecore hat keinen externen Kommentardienst eingebettet. In PR #101 wurde die Funktion nur mit Cloudflare umgesetzt.

  • Astro rendert die UI.
  • Cloudflare Pages Functions stellt /api/comments bereit.
  • Cloudflare D1 speichert Kommentare.
  • Cloudflare Turnstile schützt POST-Anfragen.
  • wrangler.jsonc definiert das COMMENTS_DB-Binding.

Der Vorteil: Der Kommentarbereich bleibt Teil der bestehenden Cloudflare-Architektur.

Aufbau

Ebene Datei oder Dienst
UI src/components/BlogComments.astro
Einbindung src/views/BlogPostPage.astro
API functions/api/comments.ts
Speicher D1-Binding COMMENTS_DB
Schutz Cloudflare Turnstile
Schema migrations/0001_create_blog_comments.sql

Die UI lädt mit GET /api/comments?slug=...&locale=... und sendet mit POST /api/comments.

Die Function validiert Origin, Payload, Turnstile, Limits, Duplikate und blockierte Inhalte.

Warum D1

Kommentare brauchen SQL-nahe Operationen: nach Artikel filtern, nach Zeit sortieren, mit deleted_at ausblenden, Duplikate finden und Clients begrenzen.

Sichtbar sind nur Zeilen mit deleted_at IS NULL. Spam kann so ausgeblendet werden, ohne die Zeile sofort zu löschen.

Prepared Statements mit bind() verhindern, dass Benutzereingaben direkt in SQL-Strings landen.

Wrangler als Vertrag

COMMENTS_DB wird in wrangler.jsonc definiert und zeigt auf die einzige D1-Datenbank acecore-comments.

So bleibt der Binding-Name stabil, während Dashboard und Repository denselben Datenbanknamen verwenden.

Turnstile serverseitig prüfen

Das Browser-Widget reicht nicht aus. Die Pages Function validiert den Token über Cloudflare Siteverify mit TURNSTILE_SECRET_KEY.

Außerdem wird der zurückgegebene Hostname gegen eine Allowlist geprüft.

Spam-Schutz

Die erste Version ist bewusst streng:

  • keine URLs
  • keine E-Mail-Adressen
  • kein HTML
  • keine Markdown-Links
  • keine langen Wiederholungen
  • keine typischen Werbewörter
  • Honeypot-Feld

Rate Limits laufen im Speicher und zusätzlich persistent über D1. Der Client wird als gesalzener Hash gespeichert, nicht als rohe IP.

SEO

Kommentare werden clientseitig geladen und der Bereich nutzt data-pagefind-ignore. Sie werden also nicht als Hauptinhalt indexiert.

Für einen Unternehmensblog ist diese Trennung sinnvoll.

Fazit

Externe Kommentardienste sind bequem, aber nicht zwingend.

Mit Cloudflare Pages, Pages Functions, D1, Turnstile und Wrangler lässt sich eine leichte Kommentarfunktion vollständig innerhalb von Cloudflare betreiben.

Referenzen

Cloudflare Comments

Architektur einer ausschließlich mit Cloudflare erstellten Kommentarfunktion

Astro rendert die Oberfläche, Cloudflare Pages Functions bilden die API-Grenze und D1 sowie Turnstile werden als Cloudflare-Komponenten verbunden.

  1. Oberfläche in Astro platzieren

    Kommentarliste, Eingabeformular und Turnstile-Widget unter dem Artikel anordnen.

  2. In einer Pages Function empfangen

    `/api/comments` verarbeitet GET/POST/OPTIONS und übernimmt Eingabevalidierung und CORS.

  3. In D1 speichern

    Über das Binding `COMMENTS_DB` Kommentare, Hashes und Erstellungszeiten in SQLite-kompatiblem D1 speichern.

  4. Mit Turnstile schützen

    Cloudflare-Turnstile-Token serverseitig validieren und die Hostname-Allowlist prüfen.

Unterschiede zwischen externem Kommentardienst und eigener Cloudflare-Implementierung

Externer Kommentardienst

  • Schnell einzuführen, doch Oberfläche, Speicherort, Bedingungen und Ladezeit hängen vom Dienst ab
  • Externe Skripte und Iframes können das Laden der Artikelseite leicht beeinflussen
  • Mehrsprachige Oberfläche und einheitliches Seitendesign sind oft eingeschränkt
  • Umgang, Löschung und Migration der Kommentardaten hängen von der Dienstspezifikation ab

Nur mit Cloudflare umgesetzt

  • Pages Functions, D1 und Turnstile stellen API und Speicher bereit
  • Astro-HTML und -CSS lassen sich natürlich in das Seitendesign integrieren
  • Die Wrangler-Konfiguration kann D1-Binding und Cloudflare-Datenbankname angleichen
  • Spam-Schutz, Löschung und Umfang gespeicherter personenbezogener Daten werden selbst festgelegt

Entscheidungen vor der Implementierung

  • Kommentare in der Cloudflare-Architektur der eigenen Website halten, statt sie einem externen Dienst anzuvertrauen
  • D1 als Speicher und Cloudflare Pages Functions als API-Grenze verwenden
  • Turnstile-Token immer serverseitig validieren
  • URLs, E-Mail-Adressen, HTML, Markdown-Links und Werbeformulierungen vor der Veröffentlichung ablehnen
  • D1-Datenbankname und COMMENTS_DB-Binding mit der Cloudflare-Konfiguration abgleichen

FAQ

Warum kein externer Dienst?

Externe Dienste sind schnell integriert, aber UI, Daten, Scripts, Moderation und Migration hängen vom Dienst ab. Hier bleibt alles in der Website und bei Cloudflare.

Reicht D1 für Kommentare?

Für post_slug-Abfragen, Sortierung, Soft Delete, Rate Limits und Duplikate passt D1 gut.

Reicht Turnstile im Browser?

Nein. Die Pages Function muss den Token per Siteverify prüfen, bevor sie in D1 schreibt.