Liftoff

Installation

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff lässt sich auf zwei Wegen einbinden. Nimm den, der zu deinem restlichen Dependency-Management passt.

Als Hugo Modul

 toml
 
 
# hugo.toml
[module]
 [[module.imports]]
 path = "codeberg.org/head1328/hugo-liftoff"

bash

hugo mod tidy
hugo server

Als Git-Submodule

 bash
 
 
git submodule add https://codeberg.org/head1328/hugo-liftoff.git themes/liftoff
echo 'theme = "liftoff"' >> hugo.toml

SaaS-Landingpage

Mon, 01 Jan 0001 00:00:00 +0000

Die häufigste Produktseite: überzeugen, belegen, bepreisen, abschließen. Kopiere Front Matter und Body nach content/_index.md und ersetze die Beispieltexte durch deine eigenen.

Front Matter

Der Hero wird konfiguriert, nicht geschrieben. Alles darunter ist Markdown.

 yaml
 
 
---
title: "Acme"
description: "Der erste Workflow läuft in fünf Minuten."
hero:
 title: "Automatisiere die langweilige Hälfte"
 titleAccent: "deiner Deployments."
 subtitle: "Eine Konfigurationsdatei. Keine Agents zu installieren."
 highlights:
 - icon: "mdi:lightning-bolt-outline"
 label: "Ohne Ausfall"
 - icon: "mdi:lock-outline"
 label: "SOC 2"
 primary:
 label: "Kostenlos starten"
 url: "/signup"
 secondary:
 label: "Zur Doku"
 url: "/docs"
 code:
 language: yaml
 content: |
 deploy:
 target: production
 strategy: rolling
---

Body

 markdown
 
 
{{< section >}}
## Alles, was zum Ausliefern fehlt

{{< feature-grid >}}
 {{< feature-card title="Rollbacks" icon="mdi:backup-restore" >}}
 Ein Befehl zurück zum letzten funktionierenden Release.
 {{< /feature-card >}}
 {{< feature-card title="Audit-Log" icon="mdi:history" >}}
 Jede Änderung nachvollziehbar, exportierbar als JSON.
 {{< /feature-card >}}
 {{< feature-card title="Secrets" icon="mdi:key-outline" >}}
 Verschlüsselt gespeichert, zur Laufzeit eingespielt.
 {{< /feature-card >}}
{{< /feature-grid >}}
{{< /section >}}

{{< section width="narrow" >}}
## Passt zu deinem Stack

{{< icon-grid data="integrations" >}}
{{< /section >}}

{{< section >}}
## Preise

{{< pricing data="editions" >}}
{{< /section >}}

{{< section width="narrow" >}}
{{< testimonial author="Jana Dohm" role="VP Engineering, Northwind" >}}
Drei interne Tools sind dafür rausgeflogen, und seitdem denkt hier
niemand mehr über Deployments nach.

metrics:
- 80% weniger Deploy-Zeit
- 40+ Teams angebunden
{{< /testimonial >}}
{{< /section >}}

{{< cta title="Bereit für schnellere Releases?" primary="Kostenlos starten|/signup" secondary="Vertrieb kontaktieren|/contact" >}}
Ohne Kreditkarte. Jederzeit kündbar.
{{< /cta >}}

Was du anpassen musst

Baustein	Ersetzen durch
`hero.code.content`	Deine echte Konfiguration oder dein CLI-Aufruf
`feature-card`	Drei bis sechs Karten, je ein Nutzen
`data/integrations.yaml`	Die Tools, die deine Kundschaft ohnehin nutzt
`data/editions.yaml`	Zwei bis drei Pläne, einer als `featured`

Konfiguration

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff liest konventionelle Hugo-Konfiguration. Wenige Extras schalten das Landing-Chrome scharf.

Pflicht-Einstellungen für Markup

Die Shortcodes geben HTML aus, Goldmark muss es also durchlassen. Fehlt das, erscheinen Feature-Cards und Hinweisboxen als escapter Text.

 toml
 
 
[markup.goldmark.renderer]
 unsafe = true

Das Syntax-Highlighting liegt in einem Stylesheet des Themes, assets/css/syntax.css. Damit es greift, muss Chroma Klassennamen ausgeben statt Inline-Styles. Letztere wirft eine Content-Security-Policy ohne 'unsafe-inline' als Erstes weg, und alle Code-Blöcke stehen farblos da.

 toml
 
 
[markup.highlight]
 style = "github-dark"
 noClasses = false
 lineNos = false
 codeFences = true
 tabWidth = 2

Ein anderer Chroma-Style braucht sein eigenes Stylesheet. Es gehört als assets/css/syntax.css in die eigene Site und sticht dort die Variante des Themes:

Open-Source-Projektseite

Mon, 01 Jan 0001 00:00:00 +0000

Eine Open-Source-Projektseite hat eine Aufgabe: von “was ist das?” zur laufenden Installation, bevor das Interesse kippt. Alles, was dem nicht dient, fliegt raus.

Front Matter

Der Installationsbefehl gehört in den Hero. Er ist der meistkopierte Text der ganzen Seite.

 yaml
 
 
---
title: "Widget"
description: "Ein Task-Runner als einzelne Binary, für kleine Teams."
hero:
 title: "Tasks ausführen ohne"
 titleAccent: "den YAML-Wildwuchs."
 subtitle: "Eine Binary, keine Laufzeitumgebung, MIT-Lizenz."
 highlights:
 - icon: "mdi:package-variant-closed"
 label: "Eine Binary"
 - icon: "mdi:scale-balance"
 label: "MIT"
 primary:
 label: "Loslegen"
 url: "/docs/installation"
 secondary:
 label: "Quellcode"
 url: "https://codeberg.org/you/widget"
 code:
 tabs:
 - name: "macOS"
 icon: "simple-icons:apple"
 language: bash
 content: |
 brew install widget
 - name: "Linux"
 icon: "simple-icons:linux"
 language: bash
 content: |
 curl -sSf https://widget.dev/install.sh | sh
---

Body

 markdown
 
 
{{< section >}}
## Was es macht

{{< feature-grid >}}
 {{< feature-card title="Kein Daemon" icon="mdi:power-plug-off-outline" >}}
 Läuft und beendet sich. Nichts bleibt auf dem Rechner zurück.
 {{< /feature-card >}}
 {{< feature-card title="Lesbare Konfiguration" icon="mdi:file-document-outline" >}}
 Zwanzig Zeilen TOML statt zweihundert Zeilen YAML.
 {{< /feature-card >}}
 {{< feature-card title="Doku" icon="mdi:book-open-page-variant" url="/docs" >}}
 Jedes Flag dokumentiert, mit Beispielen.
 {{< /feature-card >}}
{{< /feature-grid >}}
{{< /section >}}

{{< section width="narrow" >}}
## Ausprobieren

{{< steps >}}
 {{< step number="1" title="Installieren" >}}
 Plattform oben auswählen.
 {{< /step >}}
 {{< step number="2" title="Einrichten" >}}
 `widget init` im Projektverzeichnis ausführen.
 {{< /step >}}
 {{< step number="3" title="Ausführen" >}}
 `widget run build` starten und sauber beenden lassen.
 {{< /step >}}
{{< /steps >}}
{{< /section >}}

{{< cta title="Etwas hakt?" primary="Good First Issues|https://codeberg.org/you/widget/issues" secondary="Leitfaden zum Mitmachen|/docs/contributing" >}}
Auch ein Bugreport ist ein Beitrag.
{{< /cta >}}

Anpassen

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff ist so gebaut, dass du es ohne Fork anpassen kannst. Hugo schaut zuerst im Site-Projekt nach Templates und Assets, danach erst im Theme. Was du also unter assets/, layouts/, i18n/ oder static/ ablegst, gewinnt. Die folgenden Nahtstellen stehen bereit.

Eigenes CSS

Lege eine Stylesheet-Datei unter assets/css/custom.css im Projekt ab. Das Theme lädt sie nach dem Haupt-Bundle, jede Regel hier überschreibt also Theme-Styles.

 css
 
 
/* assets/css/custom.css */
:root {
 --color-accent: #ff5c8a;
}

.hero__title {
 font-family: "Inter", system-ui, sans-serif;
}

In Produktion wird die Datei minifiziert und mit Fingerprint versehen. Existiert die Datei nicht, wird kein zusätzlicher <link> gerendert.

Icons

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff hat ein einziges Icon-Partial, das drei Quellen auflöst: den Iconify-Katalog, das Material-Design-Icons-Set als Shortcut und lokale SVGs aus deinem Projekt. Überall dort, wo ein Shortcode oder Partial einen icon-Parameter nimmt, läuft der Wert durch diesen Resolver.

Iconify-Icons

Iconify stellt 200.000+ Icons aus 150+ Sets unter einem einheitlichen Schema bereit: set:name. Liftoff holt das SVG einmalig zur Build- Zeit und cached es.

 markdown
 
 
{{< pill icon="mdi:flash" >}}Schnell{{< /pill >}}
{{< feature-card title="Doku" icon="mdi:book-open-page-variant" >}}...{{< /feature-card >}}
{{< button href="/docs" icon="simple-icons:codeberg" >}}Source{{< /button >}}

Katalog durchsuchen: icon-sets.iconify.design. Auf ein Icon klicken zeigt den Identifier; den set:name-Teil kopieren.

Landingpages

Mon, 01 Jan 0001 00:00:00 +0000

Eine Landingpage kombiniert einen Hero, Inhalts-Sektionen aus Shortcodes und einen abschließenden CTA. Der Hero wird im Front Matter gesteuert, alles andere ist Markdown.

Hero aus dem Front Matter

 yaml
 
 
hero:
 title: "Von Null zur"
 titleAccent: "fertigen Seite."
 subtitle: "Plattform wählen, Theme einbinden, Inhalte schreiben."
 highlights:
 - icon: "mdi:code-tags"
 label: "Jede Sprache"
 - icon: "mdi:translate"
 label: "Mehrsprachig"
 primary:
 label: "Installieren"
 url: "#install"
 secondary:
 label: "Blueprints ansehen"
 url: "/blueprints"
 code:
 language: bash
 content: |
 hugo server

Feld	Bedeutung
`title`	Überschrift, wird als `h1` der Seite ausgegeben
`titleAccent`	Zweiter Teil der Überschrift, in der Akzentfarbe
`subtitle`	Einleitungsabsatz, wird als Markdown geparst
`highlights`	Liste aus `{ icon, label }`, erscheint als Pills
`primary` / `secondary`	Buttons, jeweils `{ label, url }`
`code`	Einzelner Codeblock: `{ language, content }`
`code.tabs`	Mehrere Codeblöcke, siehe unten

url-Werte laufen durch relLangURL. Sie gehören also ohne Sprachpräfix notiert: /docs, nicht /de/docs.

Reine Doku-Seite

Mon, 01 Jan 0001 00:00:00 +0000

Manche Projekte sind ihre Dokumentation. Die Startseite existiert dann nur, um in die Doku zu führen, alles Übrige aus dem Theme fliegt raus.

Front Matter

Ein knapper Hero, kein Codeblock. Die Startseite ist ein Wegweiser, kein Verkaufsgespräch.

 yaml
 
 
---
title: "Widget Handbuch"
description: "Alles, was Widget kann, an einer Stelle."
hero:
 title: "Das vollständige"
 titleAccent: "Widget-Handbuch."
 subtitle: "Installieren, konfigurieren, erweitern. Aktuell zu jedem Release."
 primary:
 label: "Loslesen"
 url: "/docs/installation"
 secondary:
 label: "Quellcode"
 url: "https://codeberg.org/you/widget"
---

Body

 markdown
 
 
{{< section width="narrow" >}}
{{< feature-grid >}}
 {{< feature-card title="Installieren" icon="mdi:download-outline" url="/docs/installation" >}}
 Paketmanager, Binaries und der Weg über den Quellcode.
 {{< /feature-card >}}
 {{< feature-card title="Konfigurieren" icon="mdi:cog-outline" url="/docs/configuration" >}}
 Jede Option, mit Standardwert und Beispiel.
 {{< /feature-card >}}
 {{< feature-card title="Erweitern" icon="mdi:puzzle-outline" url="/docs/plugins" >}}
 Ein Plugin in ungefähr dreißig Zeilen.
 {{< /feature-card >}}
{{< /feature-grid >}}
{{< /section >}}

Die anderen Bereiche entfernen

Einen Inhaltsordner zu löschen ist nur die halbe Miete. Die Menüeinträge überleben und werden zu toten Links, also müssen sie mit weg.

Öffentliches Changelog

Mon, 01 Jan 0001 00:00:00 +0000

Ein Changelog ist das Artikel-Layout mit anderem Vokabular: eine Seite pro Release, neueste zuerst, verschlagwortet nach Art der Änderung. Gib ihm einen eigenen Bereich, damit deine Texte davon getrennt bleiben.

Front Matter des Bereichs

Lege content/releases/_index.md an. Das Artikel-Layout lässt sich über einen gleichnamigen Ordner in deinem layouts/ wiederverwenden. Wer keinen Blog hat, lässt die Inhalte einfach unter content/articles/.

 yaml
 
 
---
title: "Releases"
description: "Jede Änderung an Widget, neueste zuerst."
hero:
 title: "Was sich geändert hat,"
 titleAccent: "und wann."
 subtitle: "Alle Releases seit 1.0, mit Hinweisen zum Umstieg."
 highlights:
 - icon: "mdi:tag-outline"
 label: "Semantic Versioning"
 - icon: "mdi:rss"
 label: "RSS-Feed"
---

Eine Seite pro Release

Benenne die Datei nach der Version. Das Datum steuert die Reihenfolge, die Tags steuern die Filterung.

Shortcodes

Mon, 01 Jan 0001 00:00:00 +0000

Liftoff bringt eine kompakte Sammlung von Shortcodes mit, die du frei kombinieren kannst. Jeder Eintrag listet Parameter, ein Code-Beispiel und eine Live-Vorschau.

Zwei Dinge kommen ganz ohne Shortcode aus, weil sie über Markdown-Render-Hooks laufen: Hinweisboxen und Codeblöcke.

Hinweisboxen

Ein Zitat, das mit einer Alert-Markierung beginnt, wird zur Hinweisbox. Die Beschriftung läuft über i18n und richtet sich damit nach der Sprache der Seite.

 markdown
 
 
> [!NOTE]
> Neutraler Hintergrund.

> [!TIP]
> Eine Abkürzung oder der bessere Weg.

> [!WARNING]
> Etwas, das später Ärger macht.

> [!DANGER]
> Etwas, das den Build sofort zerlegt.

[!CAUTION] gilt als Alias für [!DANGER]. Ein Zitat ohne Markierung bleibt ein normales Zitat.

Alle Markdown-Elemente auf einer Seite

Fri, 10 Jul 2026 00:00:00 +0000

Dieser Artikel darf ruhig überladen wirken, das ist Absicht. Er spielt jedes Markdown-Element durch, das im Theme gestaltet ist. Damit lassen sich Typografie, Abstände und der Kontrast im Dark Mode an einer Stelle prüfen. Was hier schief aussieht, sieht auch in deinen Inhalten schief aus.

Jeder Abschnitt zeigt zuerst den Quelltext, darunter das Ergebnis.

Eine Doku-Seite an einem Nachmittag

Sun, 28 Jun 2026 00:00:00 +0000

Die meisten Doku-Seiten scheitern an der Struktur, nicht am Text. Der erste Nachmittag geht für den Generator drauf, der zweite für die Navigation, und nach dem dritten stehen vier Seiten und die Lust ist weg. Diese Anleitung springt direkt zu dem Teil, in dem du schreibst.

Als Modul einbinden, nicht forken

Binde Liftoff als Hugo-Modul ein, statt es nach themes/ zu kopieren. So bleiben Updates möglich, und dein Repository bleibt überschaubar.

Icons ohne Build-Schritt

Fri, 12 Jun 2026 00:00:00 +0000

Icon-Fonts liefern jede Glyphe an jeden Besucher aus. Sprite-Sheets brauchen einen Build-Schritt und eine Namenskonvention, die sich niemand merkt. Liftoff geht einen dritten Weg: Jedes Icon wird während des Hugo-Builds von der Iconify-API geladen und als SVG eingebettet.

 go-html-template
 
{{ partial "icon.html" "simple-icons:codeberg" }}

Jedes Set auf Iconify funktioniert, adressiert als set:name. Ein Name ohne Präfix landet bei den Material Design Icons, check und mdi:check sind also dasselbe Icon.

Zweisprachig ab dem ersten Tag

Sun, 24 May 2026 00:00:00 +0000

Eine zweite Sprache nachzurüsten sieht nach einem Nachmittag aus und wird ein Wochenende. Jede Inhaltsdatei braucht ein Gegenstück, jeder Menüeintrag eine Übersetzung, jede Data-Datei eine Variante, und jedes fest verdrahtete Datumsformat entpuppt sich als englisch.

Vorab konfiguriert kostet es fast nichts, selbst wenn es bei einer Sprache bleibt.

 toml
 
 
defaultContentLanguage = "de"
defaultContentLanguageInSubdir = true

[languages]
 [languages.de]
 label = "Deutsch"
 weight = 1

Die Sprache steckt danach im Dateinamen: about.md und about.en.md liegen nebeneinander, Hugo verknüpft sie von selbst.

Ein Performance-Budget, das man einhält

Fri, 15 May 2026 00:00:00 +0000

Ein Performance-Budget funktioniert nur, wenn es kurz genug ist, um im Kopf zu bleiben. Für eine Inhaltsseite reichen drei Zahlen.

Budget	Zielwert	Was es sprengt
Requests pro Seite	unter 10	Webfonts, Analytics
CSS	unter 30 kB	Utility-Frameworks
JavaScript	unter 10 kB	alles mit Build-Schritt

Liftoff gibt sein JavaScript für drei Dinge aus: den Theme-Umschalter, die Copy-Buttons an Codeblöcken und den Blueprint-Filter. Alle drei bleiben ohne Skripte benutzbar, und nur deshalb dürfen sie überhaupt existieren.

Dark Mode, der das System respektiert

Fri, 08 May 2026 00:00:00 +0000

Ein Umschalter, der für alle erst mal dunkel startet, ist eine Geschmacksfrage im Gewand eines Features. Liftoff liest zuerst prefers-color-scheme und schreibt erst dann nach localStorage, wenn jemand tatsächlich ein Schema wählt.

 js
 
 
const stored = localStorage.getItem("liftoff.theme");
const system = matchMedia("(prefers-color-scheme: light)").matches;

Diese Reihenfolge ist der Punkt. Wer sein System hell eingestellt hat, bekommt eine helle Seite, ohne dass kurz Dunkel aufblitzt. Wer danach bewusst auf Dunkel wechselt, behält Dunkel, auch wenn sich das System später ändert: Eine ausdrückliche Wahl schlägt eine abgeleitete.

Über Design-Tokens

Sat, 02 May 2026 00:00:00 +0000

Liftoff legt seine Palette, sein Spacing und die Typografie als CSS Custom Properties auf :root offen. Konsument:innen können das Theme anpassen, ohne es zu forken.

Override-Pattern

Lege eine kleine CSS-Datei in assets/css/ deiner Seite ab und binde sie nach dem Theme-Bundle ein.

 css
 
 
:root {
 --color-accent: #ff7a59;
 --color-bg: #0d0a0a;
}

Der Light-Mode ist Opt-in über data-theme="light" am <html>-Element. Der eingebaute Toggle merkt sich die Wahl in localStorage, Fallback ist prefers-color-scheme.

Warum nicht Tailwind

Für ein Theme, das als Hugo-Modul ausgeliefert wird, ist eine Node-Toolchain Reibung. Reines CSS mit Variablen bringt keine Abhängigkeiten und bleibt lesbar.

Hallo, Liftoff

Wed, 15 Apr 2026 00:00:00 +0000

Ich habe für jede kleine Produktseite immer wieder dasselbe Gerüst gebaut: einen Hero mit Code-Block, OS-spezifische Installations-Tabs, ein Feature-Grid, eine Doku-Sektion und einen abschließenden CTA. Liftoff bündelt diese Bausteine in einem Hugo-Theme mit sinnvollen Dark-Defaults.

Was im ersten Wurf drin ist

Hero-Partial aus dem Front Matter
OS-Tabs als leichter Shortcode
Code-Blöcke mit Copy-Button
Feature-, Integrations-, Pricing-, Testimonial- und CTA-Shortcodes
Doku-Layout mit Karten-Index, “On this page”-TOC, Vor/Zurück-Navigation
Blog- und Showcase-Bereiche

Wohin es geht

I18n-Strings sind für Deutsch und Englisch dabei. Weitere Sprachen sind eine i18n/<lang>.yaml-Datei entfernt.