Erstelle wunderschöne Websites mit shipyard

shipyard ist dein komplettes Toolkit zum Erstellen beeindruckender Dokumentationsseiten, Blogs und content-fokussierter Websites mit Astro.

Hör auf, dich mit komplexen Konfigurationen herumzuschlagen und fang an zu gestalten. shipyard gibt dir alles was du brauchst: responsives Design, intelligente Navigation, Internationalisierung und modulare Komponenten, die nahtlos zusammenarbeiten.

Warum shipyard?

• Schnell startklar – Deine Seite läuft in Minuten, nicht Stunden
• Mobile-First – Wunderschön auf jedem Gerät mit Tailwind CSS und DaisyUI
• International – Optionale Internationalisierung mit Locale-basiertem Routing
• Modulares Design – Nutze nur was du brauchst, erweitere wenn du wächst
• Content-fokussiert – Automatische Organisation und Collection für deine Inhalte

---

Pakete

shipyard besteht aus drei Paketen, die zusammenarbeiten:

Paket	Zweck	Dokumentation
@levino/shipyard-base	Kern-Layouts, Komponenten, Navigation und Konfiguration	Zur Doku →
@levino/shipyard-docs	Dokumentations-Features, Sidebar, Paginierung, Git-Metadaten	Zur Doku →
@levino/shipyard-blog	Blog-Funktionalität, Beitragsliste, Navigation	Zur Doku →

---

Schnellstart

Installation

npm install @levino/shipyard-base @levino/shipyard-docs @levino/shipyard-blog
npm install tailwindcss daisyui @tailwindcss/typography @astrojs/tailwind

Konfiguration

// astro.config.mjs
import tailwind from '@astrojs/tailwind'
import shipyard from '@levino/shipyard-base'
import shipyardDocs from '@levino/shipyard-docs'
import shipyardBlog from '@levino/shipyard-blog'
import { defineConfig } from 'astro/config'

export default defineConfig({
  integrations: [
    tailwind({ applyBaseStyles: false }),
    shipyard({
      brand: 'Meine Seite',
      title: 'Meine tolle Seite',
      tagline: 'Erstellt mit shipyard',
      navigation: {
        docs: { label: 'Doku', href: '/docs' },
        blog: { label: 'Blog', href: '/blog' },
      },
    }),
    shipyardDocs(),
    shipyardBlog(),
  ],
})

Lies den vollständigen Erste-Schritte-Guide →

---

Live-Demos

Erkunde shipyards Features in Aktion mit unseren Demo-Seiten:

Demo	Beschreibung
Single Language	Basis-shipyard-Setup mit Doku und Blog
Internationalisierung (i18n)	Mehrsprachige Seite mit Locale-basiertem Routing
Server-Modus	Server-Side Rendering (SSR) mit On-Demand-Seitengenerierung

Jede Demo zeigt verschiedene shipyard-Fähigkeiten. Der Quellcode für alle Demos ist im Demos-Verzeichnis verfügbar.

---

Dokumentationsübersicht

Erste Schritte

• Warum shipyard? – Die Motivation und Philosophie hinter shipyard
• Erste Schritte – Installation, Konfiguration und Projektaufbau

Paket-Referenz

• @levino/shipyard-base – Kern-Konfiguration, Layouts und Komponenten
• @levino/shipyard-docs – Dokumentations-Plugin mit Sidebar und Paginierung
• @levino/shipyard-blog – Blog-Plugin mit Beitragsliste und Navigation

Anleitungen

• Markdown-Funktionen – Admonitions, Code-Blöcke, Tabs und mehr
• Ankündigungsleiste – Ausblendbare seitenweite Banner
• Blog-Autoren & Tags – Autorenprofile, Tags, Feeds und Archiv

Weitere Ressourcen

• Server-Modus (SSR) – shipyard mit Server-Side Rendering verwenden
• Feature-Roadmap – Docusaurus Feature-Parität und kommende Features

---

Perfekt für Entwickler, Content-Ersteller und alle, die eine schöne, schnelle Website ohne Komplexität möchten.