Kiekkist
Menü
EN

Anleitung · HTML

HTML-Vorlage installieren

Der HTML-Export ist die einfachste Form: fertige Seiten, CSS, Schriften und Bilder. Hochladen, und die Seite läuft. Kein Node auf dem Server, keine Datenbank.

Im Beispiel heißt das Design Fieldnote (kostenlos, Kurzname fieldnote). Bei deinem Design steht dort sein Kurzname.

Was du brauchst

Was im Export liegt

Ordner fieldnote-html/

index.html und die weiteren .html-Dateien
Jede Seite des Designs, die Links zwischen den Seiten sind relativ.
404.html
Fehlerseite, über .htaccess eingebunden.
assets/
CSS, Schriften (woff2 mit Lizenzdateien), Bilder, ein kleines Skript.
tokens.css
Alle Farben, Schriften und Abstände als CSS-Variablen.
.htaccess
Für Apache: HTTPS-Weiterleitung, Sicherheits-Header, Cache, 404-Seite.
_headers
Dieselben Header für Hoster, die diese Datei lesen.
sitemap.xml, robots.txt
Für Suchmaschinen, mit deiner Domain, wenn du sie beim Export angibst.
EXPORT.md
Export-Bericht.

Von Hand

  1. Fertigen Export herunterladen

    Kostenlose Designs lädst du auf der Designseite, gekaufte auf der Download-Seite mit deinem Lizenzschlüssel. Danach wählst du, was du laden willst: HTML-Website, alles in einem ZIP oder nur das Designpaket. Entpackt liegt der Export in fieldnote/exports/html/, mit INSTALL.md und EXPORT.md. Das ist derselbe Inhalt wie fieldnote-html/ in den Schritten unten.

  2. Oder selbst erzeugen

    Wer den Export aus einem geänderten Designpaket neu bauen will, nimmt das Kiekkist-Werkzeug kk. Es ist Open Source, läuft lokal und braucht Node.js 22 oder neuer. Lege es neben den Designordner (im Download „Nur Designpaket“ heißt er fieldnote/). Der Befehl schreibt fieldnote-html/; --no-check lässt die Bildvergleichs-Prüfung weg (dafür einmal npx playwright install chromium).

    git clone https://github.com/tillheidrich/kiekkist
cd kiekkist && npm ci && cd ..
node kiekkist/cli/kk.js export ./fieldnote --target html --site-url https://www.deine-domain.de --no-check

  3. Lokal ansehen

    Öffne den Ordner mit einem kleinen Webserver, damit Schriften und Pfade wie online funktionieren. Dann http://localhost:3000/ im Browser öffnen.

    cd fieldnote-html
npx serve .

  4. Per FTP hochladen

    Verbinde dich mit deinem Webspace und öffne das Hauptverzeichnis der Domain (oft htdocs, public_html oder www). Lade den Inhalt von fieldnote-html/ hoch, nicht den Ordner selbst. index.html muss direkt im Hauptverzeichnis liegen. Versteckte Dateien einblenden, damit .htaccess mitkommt (FileZilla: Server → Anzeige versteckter Dateien erzwingen).

  5. Prüfen

    Startseite, jede Unterseite, eine falsche Adresse (zeigt 404.html) und die Rechtsseiten aufrufen. Prüf in den Entwicklerwerkzeugen des Browsers, dass keine Anfrage an fremde Server geht.

Mit KI-Assistent

Dein KI-Coding-Assistent kann den Export erzeugen, die Beispielinhalte ersetzen und dir sagen, was du noch selbst tun musst. Gib ihm den entpackten Designordner und diese Dateien zu lesen:

  • fieldnote/DESIGN.md: Gestaltungsregeln, Farben, Schriften, was man nicht ändern sollte
  • fieldnote/tokens.json und tokens.css: alle Farb-, Schrift- und Abstandswerte
  • fieldnote/README.md: Inhalt des Pakets und was vor dem Start ersetzt werden muss
  • fieldnote/LICENSE.md: was du mit Code, Texten und Fotos darfst
  • fieldnote/UEBERGABE/: Vorlagen für die Übergabe an deinen Kunden (Deutsch und Englisch)
  • nach dem Export fieldnote-html/EXPORT.md

Prompt zum Kopieren. Ersetze die Angaben in eckigen Klammern. Statt fieldnote setzt du den Kurznamen deines Designs ein.

Im Ordner ./fieldnote liegt ein Website-Design als Paket. Mach daraus eine statische HTML-Website für [Firmenname], Domain [www.domain.de]. 1. Lies zuerst fieldnote/DESIGN.md, README.md und LICENSE.md. Gestaltung nicht ändern, nur Werte aus den Tokens verwenden. 2. Hol das Kiekkist-Werkzeug (git clone https://github.com/tillheidrich/kiekkist, darin npm ci) und erzeuge den Export: node kiekkist/cli/kk.js export ./fieldnote --target html --site-url https://[www.domain.de] --no-check. 3. Ersetze in fieldnote-html alle Beispielinhalte durch meine Angaben: [Name, Adresse, Leistungen, Texte]. Kopf- und Fußbereich stehen in jeder Seite einzeln: überall gleich ändern. 4. Fülle die Platzhalter auf den Rechtsseiten, frag mich nach allem, was du nicht weißt. 5. Zeig mir am Ende, welche Dateien ich per FTP hochladen muss und wohin.

Lass dir jede Änderung zeigen, bevor sie auf die Live-Website geht. Zugangsdaten und Lizenzschlüssel gehören nicht in den Chat und nicht ins Repository.

Inhalte, Bilder und Logo ersetzen

Texte: direkt in den .html-Dateien, mit einem Texteditor. Kopf- und Fußbereich stehen in jeder Seite, also überall ändern (Suchen und Ersetzen über alle Dateien).

Bilder: in assets/img/. Fotos gibt es in mehreren Breiten und als AVIF und WebP. Entweder alle Varianten unter denselben Namen ersetzen oder im <picture>-Element die Quellen auf deine Dateien kürzen. Breite und Höhe im <img> an dein Bild anpassen, sonst springt das Layout beim Laden.

Logo: SVG im Kopfbereich (class="brand"), in jeder Seite.

Farben und Schriften anpassen

Alle Farben, Schriften und Abstände stehen als CSS-Variablen in tokens.css. Wert ändern, Seite neu laden. Das übrige CSS in assets/site.css liest nur diese Variablen.

Andere Schrift: woff2 nach assets/fonts/, @font-face in assets/fonts/fonts.css ergänzen, --font-… in tokens.css umstellen. Die Vorlade-Zeile für die Schrift im <head> jeder Seite mit anpassen.

Farben sind in OKLCH angegeben. Prüf nach jeder Änderung den Kontrast (mindestens 4,5:1 für Text).

Was die Lizenz erlaubt

Gekauftes Design: Du darfst damit beliebig viele Websites bauen, eigene und für Kunden, und sie mit allen Rechten übergeben. Dein Kunde darf die Seite ohne dich weiterbetreiben. Nicht erlaubt ist, das Design selbst weiterzugeben oder zu verkaufen, auch nicht als Vorlage, Theme oder Kit. Der volle Text steht in der Lizenz.

Kostenloses Design: Es gilt LICENSE.md im Paket. Bei Fieldnote ist das CC BY 4.0: Nutzung auch für Kunden und kommerziell, mit einer kurzen Namensnennung im Quelltext oder auf einer Credits-Seite.

Fotos aus dem Paket darfst du nur als Teil der Website verwenden, die du damit baust. Nicht einzeln weitergeben, nicht als Stockfotos.

Schriften stehen unter der SIL Open Font License. Die Lizenzdateien LICENSE-*.txt bleiben neben den Schriftdateien liegen.

Deinen Lizenzschlüssel legst du nie ins Repository oder in Theme-Dateien. KIEKKIST-LICENCE.txt im Paket nennt nur Lizenz-ID und Projekt.

Häufige Probleme

Die Seite sieht unformatiert aus, Schriften fehlen.

Meist fehlt der Ordner assets/ auf dem Server oder er liegt eine Ebene zu tief. index.html und assets/ müssen nebeneinander im Hauptverzeichnis liegen.

„Zu viele Weiterleitungen“ oder die Seite ist nicht erreichbar.

.htaccess leitet auf HTTPS um. Ist für die Domain noch kein TLS-Zertifikat aktiv, läuft das ins Leere. Erst im Kundenmenü des Hosters das Zertifikat aktivieren. Für einen Test kannst du die Zeilen im Block mod_rewrite auskommentieren.

Die 404-Seite erscheint nicht.

.htaccess wurde nicht hochgeladen (versteckte Datei) oder der Hoster nutzt kein Apache. Bei nginx trägt der Hoster die Fehlerseite und die Header in seiner Konfiguration ein.

Ein eingebettetes Video, eine Karte oder ein Formular-Dienst wird blockiert.

Die Content-Security-Policy in .htaccess und _headers erlaubt nur Inhalte von der eigenen Domain, auch Formulare nur an die eigene Domain (form-action). Trag den Dienst gezielt ein und ergänze die Datenschutzerklärung.

Das Formular schickt nichts ab.

Das ist Absicht: Im Paket ist es eine Demo. Trag die Adresse deines Formular-Empfängers als action ein und stell auf method="post" um.

Der Export bricht mit „export refused“ ab.

kk prüft das Design vor dem Export und nennt jeden Fehler mit Datei und Zeile, zum Beispiel einen Abschnitt ohne Namen. Das passiert, wenn du die HTML-Seiten im Paket vorher umgebaut hast. Behebe die genannte Stelle oder exportiere aus dem unveränderten Paket und ändere danach. Prüfe auch die Node-Version mit node -v: Unter 22 läuft das Werkzeug nicht.

Was wir geprüft haben

Geprüft mit zwei Designs (Fieldnote und Kestrel Row): Export erzeugt, jede Seite über einen lokalen Webserver im Browser geladen, ohne fehlende Dateien und ohne Anfragen an fremde Server.

Mehr zum Export Alle Anleitungen Zur Galerie

Andere Exporte: WordPress, Astro, React, Elementor