Erste Schritte mit Astro-Theme-Aither

Diese Anleitung bringt Sie von null bis zu einem bereitgestellten, mehrsprachigen Blog. Lesen Sie alles der Reihe nach oder springen Sie direkt zum Abschnitt, den Sie gerade brauchen.

Voraussetzungen

• Node.js 22 LTS oder neuer
• pnpm 10 oder neuer
• Ein GitHub-Konto
• Ein Cloudflare Konto (für die Bereitstellung)

Installation

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
corepack enable
pnpm install
pnpm validate
pnpm dev

Öffnen Sie anschließend http://localhost:4321 im Browser.

Projektstruktur

src/
├── components/        # Astro- und React-Komponenten
├── config/site.ts     # Name, Navigation, Footer, Social Links
├── content/posts/     # Beiträge nach Locale
├── i18n/              # UI-Übersetzungen
├── layouts/           # Layout-Komponenten
├── lib/               # Hilfsfunktionen
├── pages/             # Seiten und Routen
└── styles/global.css  # Tailwind-v4-Token

Konfiguration

Site Config

src/config/site.ts ist die zentrale Konfigurationsdatei für den gesamten Blog:

1
export const siteConfig = {
2
  name: 'Ihr Blogname',
3
  title: 'Ihr Untertitel',
4
  description: 'Ihre SEO-Beschreibung',
5
  author: {
6
    name: 'Ihr Name',
7
    avatar: '',
8
  },
9
};

Wichtige Bereiche:

Umgebungsvariablen

cp .env.example .env

Leere Variablen deaktivieren die jeweilige Integration automatisch.

Site URL

Die Produktions-URL wird in astro.config.mjs gesetzt:

1
import { defineConfig } from 'astro/config';
2
import aither from '@aither/astro';
3

4
export default defineConfig({
5
  site: 'https://your-domain.pages.dev',
6
  integrations: [aither()],
7
});

Beiträge schreiben

Erstellen Sie eine neue .mdx-Datei in src/content/posts/en/:

1
---
2
title: Mein erster Beitrag
3
date: "2026-03-14T16:00:00+08:00"
4
category: General
5
description: Kurze Zusammenfassung für SEO und Social Previews.
6
tags: [Topic, Another]
7
pinned: false
8
---
9

10
Ihr Inhalt beginnt hier.

Frontmatter-Referenz

MDX-Komponenten

MDX erlaubt das Einbinden interaktiver Komponenten direkt im Inhalt:

1
import MyChart from '@/components/MyChart'
2

3
<MyChart data={[10, 20, 30]} />

Internationalisierung

Das Theme unterstützt standardmäßig 11 Sprachen, darunter Englisch, vereinfachtes Chinesisch, traditionelles Chinesisch, Deutsch, Französisch, Italienisch, Spanisch, Russisch, Koreanisch, Indonesisch und brasilianisches Portugiesisch.

Für eine übersetzte Version legen Sie dieselbe Datei im Zielordner an:

src/content/posts/en/my-post.mdx
src/content/posts/de/my-post.mdx
src/content/posts/zh-hans/my-post.mdx

UI-Texte liegen in src/i18n/messages/.

Eigene Inhaltsbereiche

Zusätzliche Sammlungen wie Übersetzungen, Notizen oder Tutorials lassen sich über src/content.config.ts und src/config/site.ts registrieren. Danach werden Listen-, Detailseiten und Navigationseinträge automatisch erzeugt.

Theming

Es gibt zwei Ebenen:

• Farbmodus: light, dark, system
• Stilmodus: default oder ein eingebauter Stil wie evolution

In src/config/site.ts:

1
ui: {
2
  defaultMode: 'system',
3
  defaultStyle: 'default',
4
  showMoreThemesMenu: true,
5
},

Farben kommen aus CSS-Variablen in src/styles/global.css. Standardmäßig nutzt das Theme einen System-Sans-Stack; Code und Protokollflächen verwenden eine Monospace-Schrift.

SEO und AI

Jede Seite liefert bereits die wichtigsten Maschinen- und SEO-Schnittstellen:

• /sitemap-index.xml
• /rss.xml
• /robots.txt
• /llms.txt
• /llms-full.txt
• /posts/slug.md
• JSON-LD und Open-Graph-Metadaten

Bereitstellung

Cloudflare Pages

Empfehlung: Legen Sie das Pages-Projekt zuerst an. Der Ablauf verwendet standardmäßig den Repository-Namen oder CLOUDFLARE_PAGES_PROJECT_NAME, wenn Sie ihn überschreiben möchten.

Richten Sie diese GitHub-Secrets ein:

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Führen Sie danach pnpm validate aus und pushen Sie nach main.

Nützliche Befehle

Versionsschema

Öffentliche Release-Tags folgen CalVer-Namen wie v2026.04.08.