Warum wir unseren Newsletter auf Astro statt Substack hosten

Seit Monaten verschicken wir unseren Newsletter direkt von unserer eigenen Website – und das aus guten Gründen. Statt auf eine geschlossene Plattform zu setzen, haben wir unseren Newsletter in die bestehende Astro-Infrastruktur integriert. Das Ergebnis? Mehr Kontrolle, bessere Performance und eine Leserfahrung, die sich genau an unsere Bedürfnisse anpasst.

Warum Substack nicht mehr infrage kam

Unser Newsletter lief ursprünglich auf Substack, doch mit der Zeit wurden die Einschränkungen offensichtlich. Vor allem die fehlende Kontrolle über Suchmaschinenoptimierung und technische Details war ein entscheidender Faktor. Bei Substack haben wir weder Zugriff auf die Sitemap noch auf Canonical-Tags. Auch das Festlegen von lastmod-Daten für Google ist nicht möglich, und die URLs liegen auf einer fremden Domain.

Für uns war klar: Wenn wir unsere SEO-Strategie präzise steuern wollen, brauchen wir eine Lösung, bei der wir jede technische Komponente selbst konfigurieren können. Deshalb entschieden wir uns, den Newsletter auf unsere eigene Domain zu verlagern – mit vollem Zugriff auf Header, Metadaten und alle anderen Stellschrauben.

Die technische Umsetzung: Astro als einheitliche Plattform

Unser Newsletter ist nun vollständig in das bestehende Astro-System von getbeton.ai integriert. Das bedeutet: identische Build-Prozesse, gleiche Tailwind-Designtokens und ein einheitliches Deployment auf Vercel. Jeder Newsletter-Beitrag wird als einfache Markdown-Datei in einer Content-Sammlung abgelegt. Das Frontmatter enthält Titel, Beschreibung, eine kurze Zusammenfassung und häufig gestellte Fragen (FAQ).

Bei jedem Build wird der Markdown-Text in statisches HTML umgewandelt – ohne CMS, ohne Datenbank. Die Zusammenfassung und die FAQ werden nicht nur für Leser:innen angezeigt, sondern auch in JSON-LD-Struktur integriert. So sparen wir uns manuelle Schema-Markups und sorgen für korrekte strukturierte Daten.

Zwei technische Details machen den Unterschied:

• - Jeder Beitrag hat eine saubere Markdown-Version unter /blog/.md, die von LLMs oder Skripten gelesen werden kann – ohne HTML-Scraping.
• - Das lastmod-Feld in der Sitemap stammt direkt aus dem Git-Verlauf des Beitrags. So wird Google nicht jede Seite bei jedem Deployment als aktualisiert gemeldet, sondern nur dann, wenn sich tatsächlich etwas geändert hat.

Eine Leserfahrung, die sich individuell gestalten lässt

Sobald man die volle Kontrolle über den Renderer hat, ergeben sich neue Gestaltungsmöglichkeiten. Besonders nützlich ist die Integration von sidenotes. Auf Desktop-Geräten erscheinen Fußnoten als schwebende Notizen direkt neben dem referenzierten Text – ähnlich wie in einem gut designed Printbuch. Auf Mobilgeräten werden sie zu anklickbaren Referenzen komprimiert.

Diese sidenotes sind einfache HTML-Elemente in Markdown, die einmalig im Stylesheet definiert werden. Sie dienen nicht nur als Fußnoten, sondern können auch als unaufdringliche Handlungsaufforderungen (CTAs) genutzt werden.

Zusätzlich zeigen wir am Anfang jedes Beitrags eine kurze Zusammenfassung (TL;DR) und am Ende einen FAQ-Bereich – beides aus dem Frontmatter extrahiert. Das sorgt für Klarheit und verbessert gleichzeitig die SEO durch strukturierte Daten.

Auch kleine typografische Details profitieren von unserer Kontrolle: Monospace-Text wird genau so dargestellt, wie wir es wünschen, und Code-Snippets folgen unseren Syntax-Highlighting-Vorgaben. Für ein Tech-Blog, das sich mit Tools beschäftigt, ist das kein Luxus, sondern eine Notwendigkeit. Die strukturierten Daten werden automatisch generiert, da die Inhalte bereits im Frontmatter vorliegen – kein manuelles Markup, keine zusätzlichen Plugins.

Der Versand: Resend als zuverlässige E-Mail-Infrastruktur

Für den Versand nutzen wir Resend. Die Abonnent:innenliste ist direkt in Resend als Audience hinterlegt. Neue Anmeldungen erfolgen über ein Formular auf unserer Website, das über eine kleine API-Route die Daten an Resend übermittelt und die Person zur Audience hinzufügt.

Unser Versand-Domain ist mit SPF, DKIM und DMARC authentifiziert, sodass E-Mails als vertrauenswürdig eingestuft und nicht im Spam landen. Jede Kampagne wird durch ein kleines Node-Skript gesteuert. Dieses generiert das HTML für jede E-Mail, lädt die Abonnent:innenliste und verschickt die Nachrichten mit Verzögerungen, um die Serverlast zu schonen. Jede E-Mail enthält einen List-Unsubscribe-Header und einen Abmeldelink, und das Skript prüft, ob die Person bereits abgemeldet ist, bevor eine Nachricht versendet wird.

Tracking und Analytics: PostHog als datenschutzkonforme Lösung

Der Wechsel zu einer eigenen Lösung durfte nicht zu Lasten von Tracking gehen. Deshalb haben wir PostHog integriert, um Öffnungsraten und Link-Klicks zu messen – ohne auf externe Dienste angewiesen zu sein.

Zwei Endpunkte übernehmen diese Aufgabe:

• - Ein 1x1-Pixel-Tracker, der bei jedem Öffnen der E-Mail aufgerufen wird und ein Ereignis an PostHog sendet.
• - Ein Klick-Umleitungsdienst, der jede Verlinkung mit UTM-Parametern versieht und den Klick in PostHog protokolliert, bevor die Leser:innen zur eigentlichen Zielseite weitergeleitet werden.

Der Pixel-Tracker ist ein Astro-API-Endpunkt, der ein transparentes GIF zurückgibt und gleichzeitig ein Ereignis an PostHog sendet. Die API-Aufrufe erfolgen asynchron, sodass langsame Netzwerkanfragen die Ladezeit der E-Mail nicht beeinträchtigen:

// src/pages/api/track/pixel.png.ts
const PIXEL = Buffer.from('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', 'base64'); // 1x1 GIF

export const GET: APIRoute = async ({ url }) => {
  const campaign = url.searchParams.get('c') || 'unknown';
  const email = url.searchParams.get('e') || 'anonymous';

  await fetch(`${POSTHOG_HOST}/capture/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      api_key: POSTHOG_KEY,
      event: 'newsletter_opened',
      distinct_id: email,
      properties: { campaign, source: 'email' },
    }),
  }).catch(() => {}); // Fire-and-forget

  return new Response(PIXEL, {
    headers: {
      'Content-Type': 'image/gif',
      'Cache-Control': 'no-store',
    },
  });
};

Der Klick-Umleitungsdienst funktioniert ähnlich, bietet aber einen wichtigen Sicherheitsmechanismus: Er leitet nur auf vertrauenswürdige Hosts weiter. Eine naive Umleitung ohne Host-Validierung wäre ein potenzielles Einfallstor für Phishing-Angriffe.

// src/pages/api/track/click.ts
const ALLOWED_HOSTS = ['getbeton.ai', 'www.getbeton.ai', 'inspector.getbeton.ai', 'github.com'];

export const GET: APIRoute = async ({ url }) => {
  const target = url.searchParams.get('u') || '
  const campaign = url.searchParams.get('c') || 'unknown';
  const label = url.searchParams.get('l') || 'unknown';
  const email = url.searchParams.get('e') || 'anonymous';

  const parsed = new URL(target);
  if (!ALLOWED_HOSTS.some(h => parsed.hostname === h || parsed.hostname.endsWith(`.${h}`))) {
    return new Response('Ungültige Ziel-URL', { status: 400 });
  }

  await fetch(`${POSTHOG_HOST}/capture/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      api_key: POSTHOG_KEY,
      event: 'newsletter_link_clicked',
      distinct_id: email,
      properties: { campaign, label, source: 'email' },
    }),
  }).catch(() => {});

  return new Response(null, {
    status: 302,
    headers: { Location: target },
  });
};

Mit dieser Lösung behalten wir die Kontrolle über unsere Daten, ohne auf wichtige Analysen verzichten zu müssen. Jeder Klick und jede Öffnung wird korrekt protokolliert – und das alles auf unserer eigenen Infrastruktur.

Fazit: Mehr Kontrolle, bessere Ergebnisse

Der Umstieg von Substack auf eine selbst gehostete Lösung war kein technischer Selbstzweck, sondern eine strategische Entscheidung. Wir haben nicht nur volle Kontrolle über SEO und Design gewonnen, sondern auch eine Leserfahrung geschaffen, die unsere Inhalte optimal präsentiert. Die Integration in Astro ermöglichte es uns, typografische Feinheiten zu optimieren und strukturierte Daten automatisiert zu generieren.

Die technische Umsetzung mit Resend und PostHog zeigt, dass man auch ohne geschlossene Plattformen professionelle E-Mail-Kampagnen und detailliertes Tracking umsetzen kann. Für Teams, die ihre Inhalte selbst in der Hand halten wollen, ist diese Herangehensweise eine echte Alternative – mit messbaren Vorteilen bei Performance, Sicherheit und Benutzerfreundlichkeit.