Zum Inhalt springen
Zurück zum Blog

Willkommen – so fängst du an

Grundlagen

Dieses Gerüst ist absichtlich klein gehalten. Es gibt keine UI-Bibliothek, kein generisches Theme-System und keine Abstraktionsschicht, die du erst verstehen musst, bevor du etwas ändern kannst. Was da ist, ist normales HTML, CSS und ein paar Astro-Komponenten.

Die ersten drei Handgriffe

1. Namen und Navigation setzen. Alles, was an mehreren Stellen auftaucht, steht in src/site.config.ts:

export const site = {
  name: 'Grundgerüst',
  tagline: 'Ein sauberes Fundament für dein nächstes Webprojekt',
  // …
};

export const mainNav: NavItem[] = [
  { label: 'Start', href: '/' },
  { label: 'Über', href: '/ueber' },
];

Header und Footer lesen daraus. Du musst keine Komponente anfassen, um einen Menüpunkt zu ergänzen.

2. Die Domain eintragen. In astro.config.mjs steht site noch auf https://example.com. Dieser Wert landet in Canonical-Links, Open-Graph-Tags, robots.txt und der Sitemap – also unbedingt vor dem ersten Deploy ändern.

3. Farben wählen. Dazu gibt es einen eigenen Beitrag: die komplette Palette hängt an einer Handvoll Variablen in src/styles/global.css.

Und dann?

Neue Seiten sind neue Dateien in src/pages/. Neue Blogbeiträge sind neue Markdown-Dateien in src/content/blog/. Beides braucht keine Registrierung an anderer Stelle – Astro leitet die Routen aus dem Dateisystem ab.

Wenn du an einer Stelle nicht weiterkommst, hilft meistens ein Blick in die Astro-Dokumentation. Sie ist ungewöhnlich gut.