Astro-Blog von Grund auf: In 1 Stunde von der Startseite bis zum Deployment

Der Tech-Blog ist in 0,8 Sekunden vollständig geladen, Seitenwechsel sind butterweich. Der eigene WordPress-Blog? Drei Sekunden weißer Bildschirm – man möchte die Seite am liebsten schließen. Hexo, Hugo, sogar Gatsby – jedes Mal blieb irgendwo etwas hängen: undurchsichtige Docs, fragmentierte Tutorials, vom Installieren bis zum Deploy fehlte immer etwas. Astro ist schnell, die Entwicklung angenehm, und der gesamte Ablauf ist einfacher als erwartet.

Dieser Artikel führt Sie Schritt für Schritt vom Nullpunkt bis zum Deployment – in unter 1 Stunde ein vollständiger Blog mit Startseite, Artikelliste, Tags und RSS. Konkrete Handgriffe, keine leeren Versprechen.

Kapitel 1: Warum Astro? (Keine Werbung – wirklich gut)

Ist der Performance-Unterschied wirklich so groß?

Ehrlich gesagt war ich anfangs skeptisch. Die Website verspricht „40 % schneller als klassische React-Frameworks“ und „standardmäßig null JavaScript“ – klingt nach Marketing. Nach der Migration von WordPress zu Astro lügen die Zahlen nicht:

• First Paint: von 3,2 s auf 0,8 s
• Lighthouse: Vollwert 100 (WordPress vorher nur 65)
• JavaScript-Volumen: von 280 KB auf unter 20 KB

Wie ist das möglich? Das Geheimnis liegt in Astros Kernidee – Content-first, JavaScript on-demand. Standardmäßig reines HTML+CSS; JavaScript nur dort, wo Sie explizit Interaktivität brauchen. Das Gegenteil von React mit dem „Alles-auf-einmal“-Ansatz.

Ein interessanter Vergleich: Derselbe Artikel auf Next.js und Astro – Next.js lädt beim First Paint die Framework-Runtime (ca. 100 KB), Astro liefert eine schlanke HTML-Datei. Für leseorientierte Blogs macht der Unterschied den Tag.

Wie ist das Entwicklungserlebnis?

Zum Performance-Thema gesellt sich die Islands-Architektur – klingt technisch, bedeutet schlicht: JavaScript nur dort, wo Interaktivität nötig ist.

Beispiel Artikeldetailseite:

• Artikelinhalt → statisches HTML (schnell)
• Kommentare → React-Komponente (interaktiv)
• Navigation → Vue-Komponente (ja, mischbar!)

So wird die ganze Site nicht zur SPA wegen einer Kleinigkeit. Und für Einsteiger: Artikel direkt in Markdown schreiben, keine Datenbank, kein CMS. In VS Code schreiben, zu GitHub pushen, Auto-Deploy – angenehm.

Vergleich mit anderen Frameworks

Die Frage stellt sich jedem. Hier die Fakten in der Tabelle:

Empfehlung:

• Blog oder Tech-Docs → Astro, Performance und DX stimmen
• E-Commerce oder komplexe Interaktion → Next.js
• Minimaler Static Blog ohne Anpassung → Hexo reicht
• Redaktion ohne Tech-Team → WordPress

2025: Astros npm-Downloads über 3 Millionen, Marktanteil ca. 18 %. Immer mehr Entwickler setzen darauf – kein Nischen-Framework mehr.

Kapitel 2: Umgebung vorbereiten (5 Minuten)

Node.js installieren (falls noch nicht vorhanden)

Astro braucht Node.js v18+. Version prüfen:

node -v
npm -v

Version angezeigt? Diesen Schritt überspringen. Sonst Node.js LTS herunterladen.

Windows-Hinweis: Bei der Installation „Add to PATH“ aktivieren, sonst findet die Shell die Befehle nicht. Manche Antivirus-Software blockiert npm – nach der Installation die Konsole neu starten.

Astro-Projekt erstellen

Einfacher als gedacht. In der Konsole:

npm create astro@latest

Dann die Optionen – so wählen Sie sinnvoll:

1. Projektname: z. B. my-blog
2. Template: Blog (Pfeiltasten + Enter)
3. Abhängigkeiten installieren: Yes
4. TypeScript: Strict oder Strictest (Typprüfung spart Bugs)
5. Git initialisieren: Yes

Dauert 1–2 Minuten, Template und Pakete werden geladen.

Warum Blog-Template? Artikelliste, Tags und RSS sind schon vorbereitet – beim Blank-Template habe ich allein für Paginierung zwei Stunden gebraucht.

Dev-Server starten

Ins Projektverzeichnis wechseln und starten:

cd my-blog
npm run dev

Bei Local: http://localhost:4321 im Browser öffnen – ein Blog-Grundgerüst sollte sichtbar sein.

Typische Stolpersteine:

• Port 4321 belegt → server.port in astro.config.mjs ändern
• EACCES → Berechtigung, ggf. sudo npm run dev (Mac/Linux)
• Zeichensalat → Konsole auf UTF-8 prüfen

Damit ist die Umgebung bereit. Als Nächstes: Was die Ordner bedeuten.

Kapitel 3: Projektstruktur (jeder Ordner erklärt)

Wie sieht das Verzeichnis aus?

my-blog in VS Code oder einem Editor öffnen:

my-blog/
├── src/
│   ├── pages/           # Routen – Dateiname = URL
│   ├── layouts/         # Layouts (Header, Footer)
│   ├── components/      # Wiederverwendbare Komponenten
│   └── content/         # Markdown-Artikel
├── public/              # Statische Assets (Bilder, Fonts, favicon)
├── astro.config.mjs     # Astro-Konfiguration
└── package.json         # Abhängigkeiten

Wie bei vielen Frontend-Projekten – mit ein paar Astro-Besonderheiten.

Alibaba Cloud - Top-Wahl für Entwickler, exklusiv 15 % Rabatt auf Lighthouse-Server

15 % Rabatt sichern →Anzeige

pages/: Datei ist Route

Kein separates Routing nötig:

• pages/index.astro → /
• pages/about.astro → /about
• pages/blog/index.astro → /blog
• pages/blog/[...slug].astro → /blog/xxx

[...slug].astro ist dynamisch – der Teil in eckigen Klammern wird zur Variable. Alle /blog/-URLs laufen hier durch.

Deutlich einfacher als Next.js – beim Wechsel von Next war ich sofort überzeugt.

content/: Artikel ablegen

In src/content/blog/ liegen Beispielartikel als .md oder .mdx mit Frontmatter:

---

title: 'Mein erster Artikel'
description: 'Dies ist ein Testartikel'
pubDate: 'Dec 02 2025'
heroImage: '/blog-placeholder.jpg'
tags: ['Astro', 'Tutorial']

---

Hier beginnt der Fließtext...

Astro liest die Felder aus – in Seiten z. B. post.data.title. Typprüfung beim Build: falsche Feldnamen → Fehler. Für Perfektionisten angenehm.

layouts/ und components/: Code wiederverwenden

layouts/ für Seitenrahmen (Header, Footer, Sidebar). Im Blog-Template: BaseLayout.astro, BlogPost.astro.

components/ für kleine Bausteine (Button, Karte, Tag-Cloud). Astro-, React- oder Vue-Syntax – flexibel.

public/: 1:1 ins Build-Output

Dateien landen unverändert im Webroot. public/favicon.ico → https://ihre-domain.de/favicon.ico.

Typisch: Blog-Bilder, Fonts, robots.txt.

astro.config.mjs: Zentrale Konfiguration

export default defineConfig({
  site: 'https://ihre-domain.de',  // Deploy-Domain
  integrations: [mdx()],          // Plugins (Markdown, RSS usw.)
  server: {
    port: 4321                    // Dev-Server-Port
  }
})

Erstmal wenig ändern – später bei neuen Features anpassen.

Die Struktur zu verstehen lohnt sich. Viele starten blind und wissen nicht, wohin mit Dateien – 5 Minuten hier sparen später eine Stunde.

Kapitel 4: Kernfunktionen (das Herzstück)

4.1 Startseite: neueste Artikel

Das Blog-Template liefert schon ein Gerüst. src/pages/index.astro anpassen:

---

import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';

// Alle Blog-Artikel, nach Datum, neueste 5
const allPosts = (await getCollection('blog'))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
  .slice(0, 5);

---

<BaseLayout>
  <h1>Willkommen in meinem Blog</h1>
  <ul>
    {allPosts.map((post) => (
      <li>
        <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
        <time>{post.data.pubDate.toDateString()}</time>
      </li>
    ))}
  </ul>
</BaseLayout>

Was passiert hier?

1. getCollection('blog') lädt alle Artikel
2. Sortierung nach pubDate absteigend
3. slice(0, 5) – nur die fünf neuesten
4. Liste rendern

Häufiger Fehler: Beim Sortieren .valueOf() nutzen, sonst sortiert JavaScript Datumsstrings falsch.

4.2 Artikelliste mit Paginierung

src/pages/blog/index.astro (falls nicht im Template):

---

import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';

const allPosts = (await getCollection('blog'))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

const pageSize = 10;
const currentPage = 1;
const totalPages = Math.ceil(allPosts.length / pageSize);
const posts = allPosts.slice(0, pageSize);

---

<BaseLayout title="Artikelliste">
  <h1>Alle Artikel</h1>

  <div class="post-list">
    {posts.map((post) => (
      <article>
        <h2><a href={`/blog/${post.slug}/`}>{post.data.title}</a></h2>
        <p>{post.data.description}</p>
        <time>{post.data.pubDate.toLocaleDateString('de-DE')}</time>
        <div class="tags">
          {post.data.tags?.map(tag => <span>#{tag}</span>)}
        </div>
      </article>
    ))}
  </div>

  {totalPages > 1 && (
    <div class="pagination">
      <span>Seite {currentPage} / {totalPages}</span>
    </div>
  )}
</BaseLayout>

Paginierung hier vereinfacht – in größeren Projekten Astros paginate(). Unter 100 Artikeln reicht oft eine Seite.

UX-Ideen:

• Lesezeit schätzen (Wörter ÷ 400 W/min)
• Teaser kürzen (150 Zeichen + …)
• Vorschaubild über heroImage

4.3 Artikeldetailseite

Kernstück per dynamischer Route – src/pages/blog/[...slug].astro bearbeiten oder neu anlegen:

---

import { getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

// Statische Pfade für alle Artikel
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();

---

<BlogPost {...post.data}>
  <Content />
</BlogPost>

Die Mechanik:

• getStaticPaths() läuft beim Build, erzeugt HTML pro Artikel
• post.render() wandelt Markdown in eine Komponente
• <Content /> ist der Artikeltext

Typische Hürden:

1. Kein Syntax-Highlighting → Shiki (im Blog-Template meist dabei)
2. Markdown-Styles flach → @tailwindcss/typography
3. Bildpfade falsch → Bilder in public/, Referenz /images/xxx.jpg

Inhaltsverzeichnis (TOC) mit remark-toc in astro.config.mjs:

import { defineConfig } from 'astro/config';
import remarkToc from 'remark-toc';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkToc],
  },
});

4.4 Tag-System

src/pages/tags/[tag].astro:

---

import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';

export async function getStaticPaths() {
  const allPosts = await getCollection('blog');

  const allTags = [...new Set(allPosts.flatMap(post => post.data.tags || []))];

  return allTags.map(tag => ({
    params: { tag },
    props: {
      posts: allPosts.filter(post =>
        post.data.tags?.includes(tag)
      ).sort((a, b) =>
        b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
      ),
    },
  }));
}

const { tag } = Astro.params;
const { posts } = Astro.props;

---

<BaseLayout title={`Tag: ${tag}`}>
  <h1>#{tag} – Artikel ({posts.length})</h1>

  <ul>
    {posts.map((post) => (
      <li>
        <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
      </li>
    ))}
  </ul>
</BaseLayout>

Pro Tag eine Seite, z. B. /tags/astro, /tags/tutorial.

Extra: Tag-Cloud unter src/pages/tags/index.astro – Schriftgröße nach Artikelanzahl.

4.5 RSS-Feed

Plugin installieren:

npx astro add rss

src/pages/rss.xml.js:

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

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

  return rss({
    title: 'Mein Tech-Blog',
    description: 'Frontend-Erfahrungen und Lerntipps',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      link: `/blog/${post.slug}/`,
    })),
  });
}

Nach dem Deploy: https://ihre-domain.de/rss.xml. RSS-Nutzer sind weniger – für Tech-Blogs trotzdem professionell.

Damit steht das Kernsystem: Startseite, Liste, Detail, Tags, RSS. Als Nächstes: SEO.

Kapitel 5: SEO (damit Sie gefunden werden)

Ein Blog ohne Sichtbarkeit hilft wenig. Astro bringt Vorteile mit: statisches HTML, schnelle Ladezeit, semantische Tags – alles, was Suchmaschinen mögen.

Meta-Tags in BaseLayout.astro

Im <head> der Basis-Layout-Datei:

---

interface Props {
  title: string;
  description?: string;
  image?: string;
}

const { title, description = 'Mein Tech-Blog', image = '/og-image.jpg' } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);

---

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

  <title>{title} | Mein Blog</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalURL} />

  <!-- Open Graph (Social Sharing) -->
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={new URL(image, Astro.site)} />
  <meta property="og:url" content={canonicalURL} />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={new URL(image, Astro.site)} />
</head>

Jede Seite hat vollständige Meta-Daten – schöne Vorschaukarten beim Teilen.

Sitemap

Ein Befehl:

npx astro add sitemap

Domain in astro.config.mjs:

export default defineConfig({
  site: 'https://ihre-domain.de',
  integrations: [sitemap()],
});

Sitemap unter https://ihre-domain.de/sitemap-index.xml – in der Google Search Console einreichen.

Performance als SEO-Faktor

Astro ist schon schnell – noch ein paar Hebel:

1. Bilder

KiloClaw - Managed OpenClaw für Unternehmen: AI-Agent-Orchestrierung und smartes Modell-Routing

Jetzt starten →Anzeige

<Image> statt <img>:

---

import { Image } from 'astro:assets';
import myImage from '../assets/photo.jpg';

---

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

Automatisch: WebP/AVIF, responsive Größen, Lazy Loading.

2. CSS/JS-Minifizierung

Production-Build komprimiert von selbst. Unbenutzte Pakete entfernen.

3. Schriften

Bei Google Fonts oder Custom Fonts: font-display: swap.

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

Nach diesen Schritten meist Lighthouse 95+. Bei mir nur „Best Practices“ wegen Drittanbieter-Skripten leicht abgesenkt – sonst Vollwert.

Kapitel 6: Deployment (kostenlose Plattformen)

Code fertig – jetzt live gehen. Zwei kostenlose, bewährte Optionen.

Option 1: Vercel (Empfehlung für Einsteiger)

Native Astro-Unterstützung, fast null Konfiguration.

Schritt 1: Code auf GitHub

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/IhrUsername/my-blog.git
git push -u origin main

Schritt 2: Projekt in Vercel importieren

1. vercel.com – mit GitHub anmelden
2. „New Project“
3. Repository my-blog wählen
4. Astro wird erkannt – Einstellungen meist unverändert lassen
5. „Deploy“ – 1–2 Minuten warten

Schritt 3: Blog aufrufen

URL wie xxx.vercel.app – fertig.

Eigene Domain (optional)

In den Projekteinstellungen Domain hinzufügen, beim Registrar CNAME auf Vercel setzen – Anleitung in der Oberfläche.

Hinweise:

• site in astro.config.mjs korrekt setzen
• Umgebungsvariablen in Vercel, nicht im Code
• Erstes Deploy kann 5 Minuten dauern

Option 2: Netlify

Ähnlich wie Vercel, in manchen Regionen etwas schneller erreichbar.

Schritt 1: GitHub (wie oben)

Schritt 2: Netlify

1. netlify.com
2. „Add new site“ → „Import an existing project“
3. GitHub verbinden, Repository wählen
4. Build:
   • Build command: npm run build
   • Publish directory: dist
5. „Deploy“

Schritt 3: xxx.netlify.app testen

Welche Plattform?

Tipp: Zuerst Vercel – bei langsamer Erreichbarkeit zu Netlify wechseln. Push auf GitHub → automatischer Build und Update.

Auto-Deploy im Alltag

1. Artikel lokal in Markdown schreiben
2. git add . → git commit -m "Neuer Artikel" → git push
3. Nach ca. 2 Minuten online

Kein Server-Login, kein manuelles Build, kein FTP. Beim ersten Mal überraschend elegant.

Kapitel 7: Häufige Probleme (Stolpersteine vermeiden)

Echte Fehler aus eigener Praxis und der Community – Vorwissen spart Zeit.

Problem 1: Tailwind-Styles greifen nicht

Symptom: Klassen gesetzt, visuell nichts.

Ursache: content in tailwind.config.mjs scannt Ihre Dateien nicht.

Lösung:

export default {
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dev-Server neu starten (Ctrl+C, dann npm run dev).

Problem 2: Build-Fehler „Invalid frontmatter“

Symptom: Lokal ok, npm run build schlägt fehl.

Ursache: Frontmatter-Format oder fehlende Pflichtfelder.

Lösung – typische Blog-Anforderungen:

---

title: 'Artikeltitel'           # Pflicht
description: 'Artikelbeschreibung'  # Pflicht
pubDate: 'Dec 02 2025'         # Pflicht, Datumsformat beachten
tags: ['Tag1', 'Tag2']         # Optional

---

Content Collections prüft beim Build – Fehler vor dem Live-Gang.

Problem 3: 404 nach Deploy, lokal ok

Symptom: Artikel lokal, auf Vercel/Netlify 404.

Ursache: Falsches base oder fehlendes site.

🔥 Verschwende keine Monate für ungenutzte Produkte! Teste deine SaaS-Nutzenversprechen mit Adsterra bei kleinem Budget →

Jetzt testen →Anzeige

Lösung:

export default defineConfig({
  site: 'https://ihre-domain.de',  // Pflicht
  // base: '/blog',  // Nur bei Subdirectory-Deploy
});

Ohne Subdirectory-Deploy (domain.de/blog) kein base setzen.

Problem 4: Bilder laden langsam

Symptom: Artikelbilder bremsen die Seite.

Ursache: Keine Image-Optimierung oder zu große Dateien.

Lösung:

1. Image-Komponente:

---

import { Image } from 'astro:assets';

---

<Image src="/images/photo.jpg" alt="Beschreibung" width={800} height={600} />

2. Komprimieren: TinyPNG oder Squoosh.app vor dem Upload

3. CDN: Cloudinary, Imgur o. Ä. für externe URLs

Problem 5: Kein Syntax-Highlighting

Symptom: Codeblöcke ohne Farben.

Ursache: Theme oder Shiki nicht konfiguriert.

Lösung:

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'github-dark',  // oder 'dracula', 'nord'
    },
  },
});

Blog-Template hat Shiki oft schon – sonst rm -rf node_modules && npm install.

Problem 6: Dev-Server startet langsam

Symptom: npm run dev dauert ewig.

Ursache: Viele Artikel oder Plugins.

Lösung:

• node_modules und package-lock.json löschen, neu installieren
• Unnötige Integrationen entfernen
• Astro aktualisieren (npm install astro@latest)

Astro 5.x startet deutlich schneller – bei 4.x Upgrade erwägen.

Die meisten Probleme treffen Sie vielleicht nie – bei Bedarf dieses Kapitel als Spickzettel.

Fazit

Wenn Sie bis hier mitgegangen sind: Sie haben einen vollständigen, performanten Astro-Blog – einsatzbereit.

✅ Vollständiges System: Startseite, Liste, Detail, Tags, RSS
✅ SEO: Meta, Sitemap, Performance
✅ Modernes Deployment: CI/CD, Push = Publish
✅ Performance: Lighthouse 95+, 0,8 s First Paint

Wichtiger: Sie verstehen Content-first, Performance zuerst – nicht nur für Blogs, auch für andere Static Sites.

Was als Nächstes?

Sofort:

• Eine Stunde durchspielen, diesen Artikel parallel offen halten
• Ersten echten Artikel veröffentlichen – auch als Test
• Link teilen, Feedback sammeln

Erweiterungen (schrittweise):

• Kommentare: Giscus oder Disqus
• Suche: Algolia DocSearch oder Pagefind
• Dark Mode: Theme-Toggle
• Analytics: Google Analytics oder Plausible
• Vorheriger/Nächster Artikel: bessere Navigation

Lernen:

• Astro-Dokumentation – autoritativ, auch auf Deutsch
• Astro Paper – starkes Blog-Template mit SEO
• GitHub Discussions – Fragen und Erfahrungen

Community:

• Astro Discord
• GitHub: „awesome-astro“
• Eigenen Blog im Showcase-Channel vorstellen

Abschließend

Technik ist der leichte Teil – regelmäßig schreiben ist der schwere. Viele verbringen eine Woche am Framework und veröffentlichen zwei Artikel. Astro senkt die technische Hürde – Kontinuität liegt bei Ihnen.

Bei Problemen:

1. Astro-Docs, Abschnitt „Troubleshooting“
2. GitHub Issues durchsuchen
3. Astro Discord (englisch, teils deutsch)

Fehler sind normal – mein erster Astro-Blog brauchte drei Tage. Danach ist Wartung deutlich leichter als bei WordPress.

Jetzt Konsole öffnen und loslegen! 💫