Wie man einen Blog ohne WordPress-Bullshit startet (Kostenlos, 7x schneller)

20 Min. Lesezeit Enthält Affiliate-Links
blog cloudflare astro wordpress web-hosting web-performance
Inhaltsverzeichnis

Jedes “Wie man einen Blog startet”-Tutorial empfiehlt WordPress auf Bluehost/SiteGround/WP Engine. Hier ist der Grund: Bluehost zahlt ~$100 pro Verkauf. SiteGround zahlt $50-120. WP Engine zahlt $200+. Die Suchergebnisse sind nicht optimiert, um dir zu helfen, sondern um Affiliates $100 Provisionen verdienen zu lassen.

Ich zeige dir, wie man einen Developer Blog mit Astro und Cloudflare Pages erstellt. Es kostet $0/Monat, lädt 7x schneller als WordPress und erfordert keine Wartung. Ich verdiene genau $0 mit dieser Empfehlung, da Cloudflare kein Affiliate-Programm hat und Astro open source ist.

Deshalb existiert dieses Handbuch nirgendwo anders.

Zeit bis Fertigstellung: 30-45 Minuten von null zu deployed.

Der Provisionsschwindel, den niemand erwähnt

WordPress Hosting Affiliate-Programme sind das schmutzige Geheimnis hinter jedem “Wie man einen WordPress-Blog startet”-Artikel. Hier ist die Geldfluss:

  • Bluehost: ~$100/Verkauf
  • SiteGround: $50-120/Verkauf
  • WP Engine: $200+/Verkauf
  • GoDaddy: $75-100/Verkauf

Suche “einen Blog zu starten” auf Google und zähle, wie viele Ergebnisse WordPress + High-Commission-Hosting bewerben. Jeder. Einzelne. Eins. Weil da das Geld ist. Ich sollte es wissen, ich habe es auch gemacht.

Meine Transparenz: Ich könnte jetzt $100 verdienen, wenn ich dich zu Bluehost schicke. Stattdessen verdiene ich $0 und erzähle dir von einer besseren Lösung. Das ist genau der Grund, warum traditionelle “Wie man einen Blog erstellt”-Anleitungen diesen Artikel nicht schreiben.

  • Cloudflare Pages: $0 (kostenloses Blog-Hosting, kein Affiliate-Programm)
  • Astro: $0 (open-source Blog-Plattform, auch kein Affiliate-Programm)

Wer dieses Handbuch ist

  • Entwickler, die einen schnellen Blog wollen
  • Startups, die performante Marketing-Seiten brauchen
  • Jeder, der sich mit Git und Markdown auskennt
  • Menschen, die WordPress-Plugin-Hölle satt haben

Wer bei WordPress bleiben sollte

Sei ehrlich zu dir selbst. Static Site Generatoren sind keine Content Management Systeme, und zu tun, als wären sie es, führt zu Frustration. Bleib bei WordPress, wenn du:

  • Non-technische Kunden hast, die eine GUI brauchen
  • Komplexe Mitgliedschaft/Paywall-Funktionen brauchst
  • Die Befehlszeile nicht anfasst
  • Umfangreiche Benutzerrollen und Berechtigungen brauchst
  • Anforderungen für benutzergenerierten Content hast

Der Rest dieses Handbuchs setzt voraus, dass du ein Entwickler bist, der einen Blog bauen möchte, nicht ein CMS für ein Content-Team.

Das WordPress-Performance-Problem (Echte Daten)

Überspringen wir die Hypothesen. Ich migrierte websiterating.com im Oktober 2025 von WordPress zu Astro. Hier sind die tatsächlichen PageSpeed Insights Ergebnisse von pagespeed.web.dev.

Homepage-Leistung: Vorher vs. Nachher

Homepage VorherHomepage Nachher
Homepage VorherHomepage Nachher

WordPress (Vor Migration):

  • Performance-Score: 77 (Verbesserung erforderlich)
  • First Contentful Paint: 3.2s (langsam)
  • Largest Contentful Paint: 3.4s (langsam)
  • Speed Index: 9.6s (sehr langsam)
  • Total Blocking Time: 50ms (gut)

Astro (Nach Migration):

  • Performance-Score: 90 (✅ gut)
  • First Contentful Paint: 1.5s (✅ gut)
  • Largest Contentful Paint: 3.6s (Verbesserung erforderlich)
  • Speed Index: 2.5s (✅ gut)
  • Total Blocking Time: 0ms (✅ ausgezeichnet)

Homepage-Verbesserung ✅: Performance-Score um 17% erhöht, FCP um 53% verbessert, Speed Index um 74% verbessert.

Blog-Post-Leistung: Der wirkliche Unterschied

Homepage-Leistung ist wichtig, aber Blog-Posts sind der Ort, wo Leser Zeit verbringen. Die Blog-Post-Ergebnisse sind noch dramatischer.

Blog Post VorherBlog Post Nachher
Blog Post VorherBlog Post Nachher

WordPress Blog Post (Vorher):

  • Performance-Score: 56 (schlecht)
  • First Contentful Paint: 3.6s (langsam)
  • Largest Contentful Paint: 4.0s (langsam)
  • Speed Index: 17.4s (extrem langsam)
  • Total Blocking Time: 480ms (schlecht)

Astro Blog Post (Nachher):

  • Performance-Score: 97 (✅ ausgezeichnet)
  • First Contentful Paint: 1.2s (✅ gut)
  • Largest Contentful Paint: 2.6s (✅ gut)
  • Speed Index: 2.4s (✅ gut)
  • Total Blocking Time: 0ms (✅ ausgezeichnet)

Blog-Post-Verbesserung ✅: Performance-Score um 73% erhöht, FCP um 67% verbessert, LCP um 35% verbessert, Speed Index um 86% verbessert, TBT vollständig beseitigt.

Was hat sich geändert?

Der Unterschied kommt auf PHP-Ausführung und Datenbankabfragen im Vergleich zu vorgebauten HTML, die von einem CDN bereitgestellt werden. WordPress muss deine Anfrage verarbeiten, die Datenbank abfragen, PHP ausführen, HTML rendern und dann senden. Astro hat das HTML bereits gebaut und global zwischengespeichert.

WordPress Stack (websiterating.com vorher):

  • PHP 8.1 Ausführung
  • MySQL Datenbankabfragen
  • 12+ aktive Plugins
  • Theme-Verarbeitung
  • Mehrere HTTP-Anfragen für Assets
  • Server-seitiges Rendering bei jedem Seitenladevorgang

Astro Stack (websiterating.com jetzt):

  • Vorgebautes statisches HTML
  • Von Cloudflares Edge bereitgestellt (300+ Standorte)
  • Null Datenbankabfragen
  • Null PHP-Ausführung
  • Minimal JavaScript (nur wo nötig)
  • Bei Build-Zeit optimierte Assets

Die Speed Index-Verbesserung von 17.4s zu 2.4s bei Blog-Posts ist die wirkliche Geschichte. Das ist eine 86% Verbesserung in der wahrgenommenen Ladegeschwindigkeit. Leser sehen Inhalte 7x schneller.

Der Barrierefreiheits-Bonus

Beachte die Barrierefreiheitsbewertungen:

  • WordPress: 78-82 (Verbesserung erforderlich)
  • Astro: 100 (✅ perfekt)

Das war nicht beabsichtigt. Astros Standard-Templates folgen Web-Standards besser als die meisten WordPress-Themes. Du bekommst barrierefreies HTML standardmäßig, ohne Plugins wie WP Accessibility zu installieren.

Die WordPress Plugin-Steuer

WordPress-Websites laufen typischerweise mit 15-30 Plugins, die jeweils Datenbankabfragen, HTTP-Anfragen und CSS/JS-Ballast hinzufügen. Websiterating.com vor Migration lief mit:

  • Yoast SEO: Meta-Tag-Verwaltung, Sitemap-Generierung
  • WP Rocket: Caching zur Minderung von Performance-Problemen
  • Contact Form 7: Basis-Formularverarbeitung
  • Akismet: Spam-Filterung in Kommentaren
  • Social Sharing Plugins: Teilen-Buttons hinzufügen
  • Analytics Plugins: Besucher tracken
  • Security Plugins: Auf Angriffe überwachen

Jedes Plugin fügt Gewicht hinzu. Jedes Plugin braucht Updates. Jedes Plugin ist ein potenzielles Sicherheitsloch.

Astro-Entsprechung:

  • SEO: Integriert (XML Sitemaps, robots.txt Support, Canonical URLs, volles Meta-Tag Frontmatter für OG/Twitter Cards, Schema Markup ready)
  • Caching: Nicht erforderlich (statisches HTML global zwischengespeichert)
  • Forms: Netlify Forms, Web3Forms oder einfache API-Aufrufe
  • Comments: Giscus (GitHub Discussions)
  • Sharing: Statische HTML-Buttons
  • Analytics: Cloudflare Web Analytics
  • Security: Nichts zu attackieren (keine Datenbank, kein PHP)

Null Plugins. Null Wartungs-Overhead.

Der Wartungs-Alptraum

WordPress erfordert:

  • Wöchentliche Plugin-Updates (Sicherheitslücken, wenn du es überspringst)
  • Theme-Updates, die gelegentlich dein Design brechen
  • PHP-Versions-Kompatibilitätsprüfungen
  • Datenbankoptimierung, um Verlangsamungen zu verhindern
  • Backup-Management
  • Sicherheitsüberwachung

Auch wenn du nicht oft neuen Content hinzufügst, WordPress erfordert regelmäßige Updates des Kerns, Plugins und Themes, um Performance und Sicherheit zu erhalten.

Astro erfordert:

  • git push

Das ist alles. Keine Updates zum Babysitting. Keine Sicherheits-Patches. Keine Datenbankoptimierung. Die Website ist vorgebautes HTML, es gibt nichts zu attackieren.

🎯 Die Astro + Cloudflare Pages Alternative

Warum diesen Stack

Astro versendet standardmäßig null JavaScript und rendert Content zur Build-Zeit zu statischem HTML. Cloudflare Pages deployt deine Website zu 300+ globalen Edge-Standorten mit automatischem SSL, DDoS-Schutz und unbegrenzter Bandbreite im kostenlosen Tier.

Was du bekommst:

  • Build-Zeit: 2-10 Sekunden für typische Blogs
  • Deploy-Zeit: ~30 Sekunden globale Verteilung
  • SSL: Automatisch und kostenlos
  • DDoS-Schutz: Integriert
  • Bandbreite: Unbegrenzt (kostenlos Tier)
  • Kosten: $0/Monat für die meisten Blogs (500 Builds/Monat)

Die Kompromisse (Brutale Ehrlichkeit)

Was du aufgibst:

  • Keine GUI-Inhaltseditor (nur Markdown-Dateien)
  • Kann nicht einfach an nicht-technische Autoren übergeben werden
  • Kommentare erfordern Integration von Drittanbietern
  • Suche braucht Implementierung
  • Dynamischer Content erfordert zusätzliches Setup

Was du gewinnst:

  • 7-10x schnellere Ladezeiten (dokumentiert oben mit echten Daten)
  • Null Wartung außer Content
  • Vollständige Versionskontrolle via Git
  • Keine Sicherheits-Updates zum Babysitting
  • Keine Hosting-Gebühren für typische Fälle
  • Vollständige Kontrolle über Code

Static Sites sind schnell und sauber, weil kein Code im Browser des Lesers läuft, was sie inhärent datenschutzfreundlich mit keine Tracker standardmäßig macht.

Noch hier? Gut. Das bedeutet, dieser Stack macht Sinn für dich. Lass uns das bauen.

Dein Setup-Pfad: Wähle deine Route (15-30 Minuten)

Ich werde nicht einfach Astros Setup-Dokumentation kopieren-einfügen. Sie warten es besser als ich je könnte, und es bleibt aktuell, wenn sich Dinge ändern.

Route A: Von Grund auf neu (15-20 Minuten)

Folge den offiziellen Leitfäden:

Wichtig: Die offiziellen Leitfäden werden dir anweisen, den Cloudflare-Adapter mit npm run astro add cloudflare hinzuzufügen. Folge diesen Schritten genau. Der Adapter ist erforderlich für Cloudflare Pages Deployment.

Was du bekommst: Leeres Astro-Projekt deployt zu Cloudflare Pages bei your-project.pages.dev

Route B: Wähle ein Theme - Empfohlen (20-30 Minuten)

Verschwende keine Zeit, 100 Themes durchzuschauen. Hier ist, was wirklich funktioniert:

Beste Wahl für Entwickler: AstroPaper

Warum dieses:

  • Barrierefreiheit: 100/100 out of the box
  • Lightweight: Kein Ballast, standardmäßig schnell
  • SEO optimiert: Richtige Meta-Tags, Sitemap, RSS enthalten
  • Aktive Wartung: Regelmäßige Updates
  • TypeScript-Unterstützung: Typensicheres Frontmatter
  • Dunkler Modus: Integriert

Setup:

npm create astro@latest my-blog -- --template satnaing/astro-paper
cd my-blog
npm install
npm run dev

Öffne http://localhost:4321 und du hast einen funktionierenden Blog lokal.

Alternative wenn du Tailwind bevorzugst: Astro Boilerplate

Möchtest du mehr durchstöbern? Alle Astro Themes - Filtere nach “Blog”-Tag.

Installiere den Cloudflare Adapter (KRITISCHER SCHRITT)

Bevor du zu Cloudflare Pages deployen kannst, musst du den Cloudflare Adapter zu deinem Projekt hinzufügen:

npm run astro add cloudflare

Dieser Befehl macht drei Dinge:

  1. Installiert @astrojs/cloudflare Paket in deine Abhängigkeiten
  2. Aktualisiert deine astro.config.mjs mit der Adapter-Konfiguration
  3. Konfiguriert dein Projekt für Cloudflare Pages Deployment

Was du nach dem Ausführen siehst:

In astro.config.mjs:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';  // ← Automatisch hinzugefügt

export default defineConfig({
  site: 'https://yourdomain.com',
  adapter: cloudflare(),  // ← Automatisch hinzugefügt
});

In package.json:

{
  "dependencies": {
    "@astrojs/cloudflare": "^x.x.x"  // ← Automatisch hinzugefügt
  }
}

Das ist nicht optional. Ohne diesen Schritt wird dein Build auf Cloudflare Pages fehlschlagen.

Nächstes: Deploye mit dem Cloudflare Pages Astro Leitfaden. Dauert 5 Minuten.

Folge ihrem Deployment-Leitfaden. Ich bin hier, wenn du mit dieser süßen *.pages.dev URL zurückkommst.

Was kommt danach: Verstehe deinen Workflow (10 Minuten)

Du hast die Leitfäden gefolgt. Du hast deployt. Du hast eine Live-URL. Die meisten Tutorials enden hier. Lass uns den tatsächlichen täglichen Workflow durchgehen.

Dein neuer Publishing-Prozess

Alter WordPress-Weg:

  1. Melde dich bei wp-admin an
  2. Posts → Neu hinzufügen
  3. Schreibe im visuellen Editor (der deine Code-Blöcke bricht)
  4. Klicke Veröffentlichen
  5. Überprüfe, ob Plugin-Updates das Layout brachen
  6. Überwache Sicherheits-Patches
  7. Wiederhole wöchentlich

Neuer Astro-Weg:

  1. Öffne VS Code
  2. Erstelle Markdown-Datei: src/content/blog/my-post.md
  3. Schreibe Post
  4. git push
  5. Website deployt in 60 Sekunden

Das ist alles. Kein Schritt 6. Kein Schritt 7.

Deine Projektstruktur

your-blog/
├── src/
│   ├── content/
│   │   └── blog/          ← DEINE POSTS LEBEN HIER (90% deiner Zeit)
│   ├── pages/             ← Routes (/, /blog, /about)
│   ├── layouts/           ← Seiten-Templates
│   ├── components/        ← Wiederverwendbare UI-Stücke
│   └── styles/            ← CSS-Dateien
├── public/                ← Statische Assets (Bilder, Favicon)
├── astro.config.mjs       ← Konfiguration
└── package.json           ← Abhängigkeiten

Der einzige Ordner, den du regelmäßig berührst: src/content/blog/

Schreibe deinen ersten Post (5 Minuten)

Schritt 1: Erstelle die Datei

# Von deinem Projekt-Root
touch src/content/blog/hello-world.md

Schritt 2: Füge Frontmatter + Inhalt hinzu

---
title: "Wie ich WordPress-Hölle entkam"
description: "Von 17.4s Ladezeiten zu 2.4s"
pubDate: 2025-10-20
author: "Dein Name"
tags: ["webdev", "performance"]
---

Schreibe in Markdown wie ein normaler Mensch. Kein visueller Editor, der deine Formatierung bricht.

## Unterüberschriften funktionieren

Code-Blöcke funktionieren perfekt:

` ``javascript
// Keine WordPress-Shortcodes, die deine Syntax brechen
console.log("Endlich, richtige Hervorhebung");
` ``

Bilder sind einfach:
![Alt text](/images/screenshot.jpg)

Interne Links funktionieren:
Lies [meine About-Seite](/about) für Kontext.

Schritt 3: Füge Bild hinzu (falls nötig)

  • Lege Bild in public/images/ ab
  • Referenziere es: ![Alt](/images/filename.jpg)

Schritt 4: Lokale Vorschau

npm run dev
# Öffne http://localhost:4321
# Sehe deinen Post sofort
# Speichere Datei → sofortiges Neuladen

Schritt 5: Deploye

git add .
git commit -m "Füge ersten Post hinzu"
git push

Cloudflare erkennt Push → erstellt Website (~30 Sekunden) → deployt global. Dein Post ist live.

Kein “Veröffentlichen”-Button. Kein Admin-Panel. Nur git push.

Reale tägliche Nutzung

Morgenkaffee, neue Post-Idee:

cd my-blog
npm run dev
touch src/content/blog/new-idea.md
# Schreibe in VS Code während Vorschau auf localhost:4321

Bereit zu veröffentlichen:

git add .
git commit -m "Post: Warum WordPress langsam ist"
git push
# Schnapp dir Kaffee. Blog aktualisiert in 60 Sekunden.

Gesamtzeit von Idee bis veröffentlicht: 5 Minuten.

Vergleiche das mit WordPress: Melde dich an → warte auf Dashboard → kümmere dich um Plugin-Update-Benachrichtigung → kämpfe mit visuellem Editor → veröffentliche → überprüfe, ob etwas brach → repariere → verfluche → fertig (20 Minuten).

Füge Seiten hinzu (3 Minuten)

Brauchst du eine About-Seite? Erstelle Datei in src/pages/:

touch src/pages/about.astro

Basis-Struktur:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="About">
  <h1>Über mich</h1>
  <p>Ich baue schnelle Blogs. WordPress ist langsam.</p>
</Layout>

Datei-basiertes Routing:

  • src/pages/about.astro → yoursite.com/about
  • src/pages/uses.md → yoursite.com/uses
  • src/pages/blog/[slug].astro → Dynamische Routes (bereits eingerichtet)

Mache es dir zu eigen: Exakter Anpassungs-Leitfaden (15 Minuten)

Kein vages “überprüfe deine Konfiguration”-Bullshit. Hier sind die exakten Dateien zum Bearbeiten.

Ändere Website-Info & Branding

Datei: src/config.ts (oder ähnlich, hängt vom Theme ab)

Was zu ändern ist:

export const SITE = {
  title: 'Dein Blog-Name',           // ← Ändere das
  description: 'Dein Tagline hier',  // ← Ändere das
  author: 'Dein Name',               // ← Ändere das
  email: '[email protected]',          // ← Ändere das
  website: 'https://yourdomain.com', // ← Ändere wenn du Domain hinzufügst
  defaultLanguage: 'en',
};

export const SOCIALS = {
  github: 'yourusername',              // ← Ändere das
  twitter: 'yourhandle',               // ← Ändere das
  linkedin: 'yourprofile',             // ← Ändere das
};

Datei: Hängt vom Theme ab, normalerweise src/components/Header.astro oder src/config/menu.ts

Beispiel (Header.astro):

<nav>
  <a href="/">Startseite</a>
  <a href="/blog">Blog</a>
  <a href="/about">Über</a>     <!-- ← Füge/entferne Links hier hinzu -->
  <a href="/uses">Verwendungen</a>       <!-- ← Benutzerdefinierte Seiten gehen hier hin -->
</nav>

Beispiel (menu.ts config):

export const MENU_LINKS = [
  { text: 'Startseite', href: '/' },
  { text: 'Blog', href: '/blog' },
  { text: 'Über', href: '/about' },  // ← Füge/entferne hier hinzu
  { text: 'Verwendungen', href: '/uses' },    // ← Benutzerdefinierte Links
];

Passe Farben & Schriftarten an

Datei: src/styles/global.css oder tailwind.config.cjs

Für Vanilla CSS (global.css):

:root {
  --color-primary: #3b82f6;      /* ← Deine Brand-Farbe */
  --color-text: #1f2937;         /* ← Textfarbe */
  --color-bg: #ffffff;           /* ← Hintergrundfarbe */
  --font-base: 'Inter', sans-serif;  /* ← Deine Schriftart */
}

.dark {
  --color-text: #f9fafb;         /* ← Dark Mode Text */
  --color-bg: #111827;           /* ← Dark Mode Hintergrund */
}

Für Tailwind (tailwind.config.cjs):

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',        // ← Deine Brand-Farbe
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],  // ← Deine Schriftart
      }
    }
  }
}

Aktualisiere Astro Config

Datei: astro.config.mjs

Der Cloudflare Adapter wurde bereits hinzugefügt, als du npm run astro add cloudflare ausführtest. Deine Datei sollte so aussehen (bereits konfiguriert):

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  site: 'https://yourdomain.com',  // ← Ändere das, wenn du deine benutzerdefinierte Domain hinzufügst
  adapter: cloudflare(),
  // Andere Einstellungen normalerweise in Ordnung wie-ist
});

Was du möglicherweise ändern musst:

  • site: Aktualisiere, wenn du eine benutzerdefinierte Domain kaufst
  • Alles andere: Braucht normalerweise keine Änderungen für einen Blog

Füge deine eigenen Bilder hinzu

Favicon & Logo:

  1. Ersetze Dateien in public/ (normalerweise favicon.svg, logo.svg)
  2. Oder nutze Theme’s dedizierten Assets-Ordner (überprüfe Theme-Dokumente)

Blog-Post-Bilder:

  1. Lege Bilder in public/images/ ab
  2. Referenziere in Markdown: ![Alt text](/images/your-image.jpg)

Oder nutze Astro Image-Komponente (empfohlen für Optimierung):

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image src={heroImage} alt="Beschreibung" />

Astro verwaltet responsive Bilder, WebP-Konvertierung, Lazy Loading automatisch.

Essenzielle Funktionen Setup (20 Minuten insgesamt)

Kommentare über Giscus (5 Minuten)

Static Sites haben keine Datenbanken. Lösung: GitHub Discussions über Giscus.

Warum Giscus:

  • Kostenlos (nutzt dein GitHub Repo)
  • Kein Tracking
  • GitHub Auth filtert Spam
  • Reactions, Antworten, Moderation integriert

Setup:

  1. Aktiviere Discussions auf deinem GitHub Repo:

    • Repo → Settings → Features → Überprüfe “Discussions”

  2. Konfiguriere Giscus:

    • Gehe zu giscus.app
    • Gebe dein Repo ein: yourusername/your-blog-repo
    • Wähle Discussion Category: “Comments” (oder erstelle eine)
    • Kopiere das generierte Skript

  3. Füge zu deinem Blog-Layout hinzu:

Datei: src/layouts/BlogPost.astro (oder ähnlich)

---
// Dein bestehendes Frontmatter
---

<Layout>
  <article>
    <h1>{frontmatter.title}</h1>
    <slot />
  </article>

  <!-- Füge Giscus hier hinzu -->
  <script src="https://giscus.app/client.js"
          data-repo="yourusername/your-repo"
          data-repo-id="YOUR_REPO_ID"
          data-category="Comments"
          data-category-id="YOUR_CATEGORY_ID"
          data-mapping="pathname"
          data-reactions-enabled="1"
          data-emit-metadata="0"
          data-theme="preferred_color_scheme"
          crossorigin="anonymous"
          async>
  </script>
</Layout>

Alternativen:

  • Utterances: Nutzt GitHub Issues statt Discussions
  • Disqus: Einfach, aber tracked Benutzer, Anzeigen im kostenlosen Tier
  • Commento: Datenschutz-fokussiert, $10/Monat oder selbstgehostet

Analytics über Cloudflare (5 Minuten)

Warum Cloudflare Web Analytics:

  • Für immer kostenlos
  • Keine Cookies (GDPR-konform)
  • Datenschutz-respektierend
  • Zeigt, was du brauchst: Seitenaufrufe, Referrer, Standorte

Setup:

  1. Cloudflare Dashboard → Analytics → Web Analytics
  2. Klicke “Füge eine Website hinzu”
  3. Gebe deine Website-URL ein
  4. Kopiere das Beacon-Skript-Token

Füge zu deinem Layout hinzu:

Datei: src/layouts/Layout.astro (Base Layout)

---
// Frontmatter
---

<html>
  <head>
    <!-- Dein bestehendes Head-Content -->

    <!-- Füge Cloudflare Analytics hinzu -->
    <script defer
            src='https://static.cloudflareinsights.com/beacon.min.js'
            data-cf-beacon='{"token": "YOUR_TOKEN_HERE"}'>
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Was du bekommst:

  • Seitenaufrufe & einzigartige Besucher
  • Top Pages
  • Referral-Quellen
  • Land/Gerät/Browser-Daten
  • Alles ohne Tracking-Pixel oder Cookies

Bezahlte Alternativen (wenn du mehr brauchst):

  • Plausible: $9/Monat, schöne Benutzeroberfläche
  • Fathom: $14/Monat, ähnliche Funktionen

Ich nutze Cloudflare. Es ist kostenlos und behandelt Leser nicht wie Ad-Ziele.

RSS Feed (Bereits integriert)

Gute Nachrichten: Astro Themes enthalten RSS standardmäßig.

Dein Feed: https://yoursite.com/rss.xml

Test: Besuche diese URL. Du solltest XML mit deinen Posts sehen.

Passe an (falls nötig):

Datei: src/pages/rss.xml.js (oder ähnlich)

export const GET = async (context) => {
  const posts = await getCollection('blog');

  return rss({
    title: 'Dein Blog-Titel',      // ← Ändere das
    description: 'Deine RSS-Beschreibung',  // ← Ändere das
    site: context.site,
    items: posts.map(post => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      link: `/blog/${post.slug}/`,
    })),
  });
};

Suche (Optional, 10 Minuten)

Static Sites haben keine Datenbanksuche. Lösungen:

Option 1: Pagefind (Empfohlen)

  • Kostenlos und open source
  • Bei Build-Zeit erstellt
  • Schnelle Client-seitige Suche
  • Kein externer Service
npm install -D pagefind

Dann füge zum Build-Skript in package.json hinzu:

"scripts": {
  "build": "astro build && pagefind --source dist"
}

Volles Setup: Pagefind Dokumente

Option 2: Algolia DocSearch

  • Kostenlos für Open Source/Docs-Seiten (braucht Genehmigung)
  • Mehr Funktionen, externe Abhängigkeit
  • Hier beantragen

Option 3: Fuse.js (Einfach)

Für die meisten Developer Blogs ist Pagefind perfekt.

Füge eine GUI mit Decap CMS hinzu (Optional, 15 Minuten)

Früher habe ich gesagt “Was du aufgibst: Keine GUI Inhaltseditor (nur Markdown-Dateien)”. Das ist nicht ganz wahr mehr.

Decap CMS ist ein open-source, Git-basiertes Content Management System, das wunderbar mit Astro + Cloudflare Pages funktioniert. Es gibt dir ein Admin-Panel GUI, ohne Performance oder deinen Git-basierten Workflow zu opfern.

Warum Decap?

  • Kostenlos und open source
  • Keine Datenbank (Änderungen committen zu deinem Git Repo)
  • Markdown-basiert (gleich wie dein Astro Blog)
  • Funktioniert mit Cloudflare Pages
  • Minimales Setup (eine Config-Datei)

Wann man Decap CMS nutzt:

  • ✅ Kleines Team braucht gelegentliche GUI-Zugriff, aber du kontrollierst den Code
  • ✅ Non-technische Mitarbeiter, die eine Interface brauchen
  • ✅ Willst GUI-Option ohne Performance zu opfern
  • ❌ Nutze nicht wenn: Schwere Zusammenarbeit, komplexe Workflows oder große Teams, die Berechtigungen brauchen

Setup-Übersicht (vereinfacht):

  1. Füge Decap Config zu deinem Repo hinzu
  2. Deploye deine Astro-Website zu Cloudflare
  3. Verbinde Decap mit deinem GitHub Repo (OAuth)
  4. Zugriff auf Admin-Panel bei yourdomain.com/admin
  5. Autoren nutzen die GUI um Posts zu erstellen
  6. Änderungen committen automatisch zu Git

Der wirkliche Unterschied von WordPress: Änderungen sind Git-Commits, nicht Datenbankzeilen. Deine gesamte Inhaltshistorie ist versionskontrolliert.

Decap ist nicht besser als Markdown für Solo-Entwickler, aber wenn du Content-Editierung jemandem übergibst, der die Befehlszeile nicht anfasst, ist es 10x besser als WordPress, während alle Performance-Vorteile erhalten bleiben.

Volles Setup: Decap CMS + Astro Leitfaden

Schnelle Befehls-Referenz (Lesezeichen das)

Täglicher Workflow:

npm run dev              # Starten Sie lokalen Server (http://localhost:4321)
npm run build            # Build Production-Version (test vor Deploy)
npm run preview          # Vorschau Production Build lokal

git add .                # Stufe alle Änderungen
git commit -m "message"  # Commit mit Nachricht
git push                 # Deploy zu Cloudflare (automatisch)

Fehlerbehebung:

npm install              # Erneut installieren Abhängigkeiten
rm -rf node_modules      # Nukleare Option: lösche und neuinstalliere
rm -rf .astro            # Lösche Astro Cache
npm run build            # Test Build lokal vor Push

Füge Content hinzu:

touch src/content/blog/new-post.md    # Erstelle neuen Post
touch src/pages/new-page.astro        # Erstelle neue Seite

Überprüfe auf Probleme:

npm run build            # Wenn das fehlschlägt, wird Cloudflare auch fehlschlagen
                         # Repariere Fehler lokal vor Push

Der Kostenvergleich (3-Jahres-Realitätsprüfung)

WordPress Stack Kosten

Jahr 1:

  • Domain: $15 (oder “kostenlos” mit Hosting, dann $15/Jahr)
  • Hosting: $60-240 (Promotional-Preis)
  • Premium Theme: $50-100 (einmalig)
  • Essenzielle Plugins: $50-200/Jahr (Yoast Premium, Backups, etc.)
  • Jahr 1 Gesamt: $175-555

Jahre 2-3 (Erneuerungshölle beginnt):

  • Domain: $15/Jahr
  • Hosting: $120-360/Jahr (Erneuerungspreise steigen oft 200-400% nach Promotional-Periode)
  • Plugin-Erneuerungen: $50-200/Jahr
  • Jahr 2 Gesamt: $185-575
  • Jahr 3 Gesamt: $185-575

3-Jahres Gesamt: $545-1,705

WordPress Minimale Kosten (Konservativ)
Total increase: Loading...

Astro + Cloudflare Stack Kosten

Alle 3 Jahre:

  • Domain: $15/Jahr (jede Registrar)
  • Cloudflare Pages: $0/Monat (500 Builds, unbegrenzte Bandbreite)
  • Kommentare: $0 (Giscus via GitHub)
  • Analytics: $0 (Cloudflare Web Analytics)
  • Pro Jahr: $15

3-Jahres Gesamt: $45

Astro + Cloudflare Pages
Total increase: Loading...

Wenn du kostenlosen Tier überschreitest (unwahrscheinlich für Blogs):

  • Cloudflare Pages Pro: $20/Monat für 5.000 Builds/Monat
  • Du bräuchtest, um 167+ mal pro Monat zu deployen, um das zu brauchen

Die wirklichen Einsparungen

  • 3-Jahres-Einsparungen: $500-1.660 Minimum
  • Zeit-Einsparungen: 2-4 Stunden/Monat nicht mit Updates zu befassen (72-144 Stunden über 3 Jahre)
  • Performance-Gewinne: 7x schnellere Ladezeiten (86% Speed Index Verbesserung)

Ich könnte $100-300 in Provisionen verdienen, wenn ich WordPress empfehle. Stattdessen verdiene ich $0, weil ich dir die bessere Lösung erzähle.

Fehlerbehebung häufiger Probleme

Build fehlgeschlagen auf Cloudflare

Problem: Website baut lokal, aber schlägt auf Cloudflare Pages fehl

Lösungen:

  1. Überprüfe Node Version:
# In deinem Projekt
node --version

# Cloudflare Pages nutzt Node 18 standardmäßig
# Füge zu package.json hinzu, wenn du spezifische Version brauchst:
"engines": {
  "node": ">=18.0.0"
}
  1. Umgebungsvariablen:
  • Wenn du API-Schlüssel nutzt, füge sie im Cloudflare Pages Dashboard hinzu
  • Settings → Environment variables
  1. Build-Befehls-Probleme:
  • Cloudflare Einstellungen sollten sein:
    • Build Befehl: npm run build
    • Output-Verzeichnis: dist
    • Root-Verzeichnis: / (oder dein Unterverzeichnis)

Bilder laden nicht

Problem: Bilder funktionieren lokal, aber 404 in Production

Lösungen:

  1. Überprüfe Pfade:
✅ Gut:  ![Alt](/images/photo.jpg)
❌ Schlecht:   ![Alt](images/photo.jpg)
❌ Schlecht:   ![Alt](../../../public/images/photo.jpg)
  1. Öffentliche Ordnerstruktur:
public/
  images/
    photo.jpg    ← Referenziere als /images/photo.jpg
  favicon.svg    ← Referenziere als /favicon.svg
  1. Groß-/Kleinschreibung:
  • Lokal (Mac/Windows): Groß-/Kleinschreibung-insensitiv
  • Cloudflare (Linux): Groß-/Kleinschreibung-sensibel
  • Photo.jpg ≠ photo.jpg in Production

”Module nicht gefunden” Fehler

Problem: Import Fehler nach Deployment

Lösungen:

  1. Lösche und neuinstalliere:
rm -rf node_modules package-lock.json
npm install
npm run build  # Test lokal
  1. Überprüfe Imports:
✅ Gut:  import Layout from '../layouts/Layout.astro';
❌ Schlecht:   import Layout from '../layouts/layout.astro';  // Falsche Groß-/Kleinschreibung
  1. Abhängigkeiten:
# Wenn du ein Paket installiert hast, stelle sicher, dass es in package.json ist
npm install package-name --save  # Nicht nur npm install package-name

Langsame Build-Zeiten

Problem: Builds dauern >5 Minuten

Lösungen:

  1. Lösche Cache:
rm -rf .astro
npm run build
  1. Bild-Optimierung:
  • Nutze Astros Image-Komponente statt Raw <img> Tags
  • Bilder werden bei Build-Zeit optimiert (dauert länger, aber es lohnt sich)
  1. Zu viele Seiten:

Kommentare zeigen sich nicht

Problem: Giscus Kommentare erscheinen nicht

Lösungen:

  1. Überprüfe Repository ist öffentlich:
  • Giscus erfordert öffentliches Repo
  • Private Repos funktionieren nicht
  1. Verifiziere Discussion Kategorie:
  • Repo → Discussions → Muss Kategorie haben, die Giscus Config entspricht
  1. Überprüfe data-mapping:
<!-- Sollte normalerweise Pathname sein -->
data-mapping="pathname"

<!-- Nicht spezifische Pfade -->
data-mapping="url"  <!-- Versuche das, wenn Pathname fehlschlägt -->
  1. Lösche Browser Cache:
  • Giscus Skript könnte mit alter Config zwischengespeichert sein

Alles ist explodiert?

Nukleare Option (Start frisch):

# Speichere deinen Content zunächst!
cp -r src/content/blog ~/backup

# Lösche alles
rm -rf node_modules package-lock.json .astro dist

# Neuinstalliere
npm install

# Test
npm run build
npm run dev

# Wenn immer noch kaputt, überprüfe Astro Discord für Hilfe

Immer noch kaputt? Astro Discord hat hilfreiche Menschen, die tatsächlich Fragen beantworten.

Wenn du wirklich WordPress nutzen solltest

WordPress ist kein Müll, es löst andere Probleme als Static Site Generatoren. Nutze WordPress, wenn du:

1. Non-technische Content-Teams hast

  • 10+ Autoren, die eine GUI brauchen
  • Menschen, die bei der Befehlszeile in Panik verfallen
  • Multi-Stage Genehmigungsworkflows

2. Komplexe Mitgliedschaften

  • Paywalls und Subscription-Tier
  • Benutzerkonten mit Rollen/Berechtigungen
  • Member-only Content Bereiche

3. Schwere E-Commerce

  • Obwohl Shopify besser ist
  • Wenn du mit WooCommerce Ökosystem steckenbleibst

4. Benutzergenerierter Content

  • Forums, Kommentare, Benutzerprofile
  • Echtzeitinteraktionen
  • Dynamischer Content, der sich pro Benutzer ändert

WordPress ist ein Content Management System. Astro ist ein Static Site Generator. Egal wie großartig Static Site Generatoren beim Generieren von HTML aus Text sind, sie sind nicht Content Management Systeme.

Wenn du ein Entwickler bist, der einen Blog schreibt, nutzt du das falsche Tool und zahlst für Funktionen, die du nicht brauchst.

Migration von WordPress (Falls Nötig)

Exportiere WordPress Content (5 Minuten)

  1. WordPress Dashboard → Tools → Export
  2. Wähle “Posts”
  3. Download XML-Datei

Konvertiere zu Markdown (2 Minuten)

Nutze wordpress-export-to-markdown - ein ausgezeichnetes open-source Tool, das die Konvertierung korrekt handhabt:

npx wordpress-export-to-markdown

# Folge Prompts:
# - Pfad zu WordPress XML-Datei
# - Output-Ordner (./output empfohlen)
# - Entferne Bilder? Ja
# - Entferne Markdown? Ja

Dieses Tool bewahrt:

  • Post Content und Formatierung
  • Featured Images
  • Bild-Referenzen in Markdown
  • Frontmatter mit Daten und Autoren
  • Post Metadaten

Erstellt saubere Markdown-Dateien mit korrekter Struktur, keine Bereinigung nötig.

Importiere zu Astro (10 Minuten)

  1. Kopiere Markdown-Dateien:
cp -r output/posts/* src/content/blog/
  1. Repariere Frontmatter (falls nötig):

WordPress Export könnte haben:

---
title: Mein Post
date: 2024-01-15
---

Astro braucht (überprüfe dein Theme):

---
title: "Mein Post"
pubDate: 2024-01-15
description: "Post-Beschreibung"
---
  1. Repariere Bild-Pfade:
# Alter WordPress Pfad:
![Image](wp-content/uploads/2024/01/image.jpg)

# Neuer Astro Pfad:
![Image](/images/image.jpg)

# Kopiere Bilder zu public/images/
cp -r output/images/* public/images/

Stelle Umleitungen auf (5 Minuten)

Datei: public/_redirects (Cloudflare Pages Format)

# Alte WordPress URLs → Neue Astro URLs
/old-post-title            /blog/new-post-title     301
/category/tech/post-name   /blog/post-name          301
/page/about-us             /about                   301

# Catch-all für alte Struktur (optional)
/*/                        /blog/:splat             301

Oder nutze Astro Redirect Config:

Datei: astro.config.mjs

export default defineConfig({
  redirects: {
    '/old-url': '/new-url',
    '/old-page': {
      status: 301,
      destination: '/new-page',
    },
  },
});

Astros Built-In SEO Funktionen

Astro bietet professionelle SEO standardmäßig. Das sind nicht Theme Extras - sie sind in das Framework integriert:

XML Sitemap: Auto-generiert bei /sitemap.xml

  • Enthält automatisch alle deine Blog Posts und Seiten
  • Wird von Suchmaschinen automatisch eingereicht
  • Kein Plugin erforderlich

Robots.txt (optional): Erstelle public/robots.txt um Crawler-Regeln anzupassen:

User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml

Meta Tags & Social Sharing: Füge zu deinem Post Frontmatter hinzu um anzupassen, wie es in sozialen Medien angezeigt wird:

---
title: "Dein Post-Titel"
description: "Post-Beschreibung für Suchergebnisse"
pubDate: 2025-10-20
# SEO & Social Media
ogImage: "/images/post-image.jpg"          # Facebook/LinkedIn Vorschau
ogType: "article"
twitterHandle: "@yourhandle"                # Twitter Creator
canonicalUrl: "https://yourdomain.com/blog/post-slug"  # Verhindere doppelte Content-Probleme
---

Canonical URLs: Verhindere, dass Suchmaschinen doppelte Content-Inhalte bestrafen:

---
canonical: "https://yourdomain.com/blog/post-slug"
---

Dein Theme Layout Komponenten rendern automatisch diese Meta-Tags in das <head> Abschnitt. Keine manuelle HTML-Bearbeitung erforderlich.

Schema Markup Ready: Astro handhabt strukturierte Daten gut. Die meisten Blog-Themes enthalten JSON-LD Schema für Artikel automatisch.

Der Hosting Offenlegung Abschnitt

Was ich von diesem Leitfaden mache

Cloudflare Pages: $0 (es gibt kein Affiliate-Programm) Astro: $0 (open source, kein Referral-System) Gesamtprovisionen: $0

Was ich machen könnte

Wenn ich stattdessen WordPress Hosting empfehle:

  • Bluehost: ~$100/Verkauf
  • SiteGround: $50-120/Verkauf
  • WP Engine: $200+/Verkauf

Warum ich es nicht tue: Diese Lösung ist technisch besser für Entwickler. Ich verdiene $0, wenn ich sie empfehle, was genau der Grund ist, warum einkommensorientierte “Blogging”-Websites diesen Leitfaden nicht schreiben.

Wo ich WIRKLICH Geld verdiene

Ich führe keine Wohltätigkeitsorganisation. Ich verdiene Provisionen auf:

  • Scala Hosting (~$100/Verkauf) - Wenn du tatsächliches VPS-Hosting brauchst
  • ChemiCloud (~$100/Verkauf) - WordPress Hosting, wenn Statisch nicht funktioniert
  • Hetzner ($0/Verkauf) - Cloud VPS Hosting, wenn du mehr Kraft brauchst als ein VPS kann bieten

Ich ordne nach Wert, nicht Provision. Cloudflare Pages ist objektiv besser für Developer Blogs, obwohl es mir nichts zahlst.

Die untere Zeile

Was du gerade gebaut hast

  • Professioneller Developer Blog
  • 97/100 PageSpeed Score (vs 56 auf WordPress)
  • 1.2s First Contentful Paint (vs 3.6s WordPress)
  • 2.4s Speed Index (vs 17.4s WordPress)
  • $0/Monat Hosting (vs $10-30/Monat WordPress)
  • 0 Stunden/Monat Wartung (vs 2 Stunden/Monat WordPress)
  • Vollständige Kontrolle über Code

Zeit-Investitions-Zusammenfassung

  • Initialem Setup: 30-45 Minuten
  • Schreibe Posts: Gleiche Zeit wie WordPress (Markdown vs visueller Editor)
  • Veröffentlichung: git push (30 Sekunden)
  • Monatliche Wartung: 0 Minuten (vs 2 Stunden WordPress aktualisieren)

Die Tradeoff-Matrix

Wähle Astro + Cloudflare wenn:

  • ✅ Komfortabel mit Markdown
  • ✅ Wollen maximale Performance
  • ✅ Bevorzugen Git-basierten Workflow
  • ✅ Schätze null Wartung
  • ✅ Okay mit Befehlszeile

Bleibe bei WordPress wenn:

  • ❌ Non-technisches Content-Team
  • ❌ Brauchst Benutzerrollen/Berechtigungen
  • ❌ Schwere E-Commerce-Anforderungen
  • ❌ Muss visuellen Page Builder haben
  • ❌ Echtzeitbenutzer-generierter Content

Zusätzliche Ressourcen

Offizielle Dokumentation:

Community & Support:

Performance-Tests:

Verwandte Leitfäden:

Warum dieser Leitfaden existiert

Niemand anders schreibt das, weil Cloudflare keine Provisionen zahlst. Astro hat kein Affiliate-Programm. Aber dieser Stack ist objektiv besser für Developer Blogs, bewiesen durch websiterating.coms eigene Migration, die 86% Speed Index Verbesserung zeigt.

Du verdienst zu wissen, dass es existiert.

Dein Move: Folge den Setup-Leitfäden oben, deploye zu Cloudflare, schreibe deinen ersten Post. Oder continue Zahlung $20/Monat für eine Website, die in 17 Sekunden lädt, weil das das ist, was jedes Affiliate-Provisions-optimierte “Erstelle einen Blog” Tutorial dir erzählt.

The Angry Dev

Vertrauen Sie KEINER Review-Seite. Affiliate-Provisionen bestimmen deren Rankings. Dies ist auch eine Affiliate-Seite, aber ich bin ehrlich darüber, was ich verdiene, und ich bewerte nach Qualität statt nach Auszahlung. Selbst wenn das bedeutet, dass ich 0 $ bezahlt werde. Lesen Sie über meinen Ansatz und warum ich aufgehört habe zu lügen. Hier sind die Rohdaten, damit Sie alles selbst überprüfen können.

VPNs | Hosting | Speicher | Tools

Verwandte Beiträge