Mit Astro, Vibe Coding und kostenlosen Modellen aus China zur eigenen Marke im Content Marketing

Ein gutes Angebot hilft wenig, wenn es niemand findet. Bei uns lagen die KI Workshops tief in der Navigation von nevercodealone.de. Also haben Benjamin Klein und Roland Golla eine eigene Marke gestartet: Nerds in Shirts. Gebaut ist die Landingpage mit Astro und Vibe Coding, geschrieben mit kostenlosen Modellen aus China, und sie ist die Zentrale für das Content Marketing der neuen Marke. Roland zeigt im aktuellen Video, wie das abgelaufen ist. Hier steht, was ihr für so einen Schritt braucht und worauf es ankommt.

Wann sich eine eigene Marke lohnt

Eine Hauptseite wächst mit den Jahren. Neue Leistungen landen in Untermenüs, und irgendwann muss man jedem den Weg dorthin erklären. Eine eigene Marke lohnt sich, wenn diese Punkte zutreffen:

• Das Angebot hat eine eigene Zielgruppe: Bei uns sind das Unternehmen, die KI für das ganze Team wollen, nicht nur für die Developer.
• Der Weg über die Hauptseite ist zu lang: Wenn ihr eine URL mit drei Ebenen erklären müsst, verliert ihr Leute.
• Der Name trägt eine Geschichte: Nerds in Shirts sagt sofort, wofür die beiden stehen. KI Experten in Hemden gibt es auf LinkedIn genug. Echte Nerds in Shirts liefern.
• Die Marke soll mehrere Kanäle bespielen: Landingpage, LinkedIn, Instagram, Facebook und ein Google Unternehmensprofil greifen dann auf dieselbe Idee zurück.

Wichtig ist auch, was die Marke nicht ist. Nerds in Shirts ist kein eigenes Unternehmen mit eigenem Angebot. Gebucht wird weiter über Never Code Alone. Die Marke ist der leichte Einstieg, die Hauptseite liefert die Tiefe.

Was eine gute Landingpage für eine neue Marke braucht

Eine Landingpage ist schnell gebaut. Eine gute Landingpage braucht mehr als ein hübsches Layout. Diese Bausteine gehören dazu:

Baustein	Worauf es ankommt
Name und Domain	Vorher prüfen, ob es den Namen als Marke oder Shop schon gibt. Wichtige Endungen wie .de, .com und .eu gleich mit sichern.
Bildsprache	Ein eigenes Signet und echte Fotos statt Stockbildern. Dazu ein eigenes Social Media Bild, das beim Teilen erscheint.
Layout	Klare Marke oben, ein klarer Call to Action und nicht mehr Elemente, als die Seite tragen kann.
Inhalte	Texte, die das Angebot genau treffen, mit sauberen Links und einer SEO Ausrichtung.
Barrierefreiheit	Animationen lassen sich stoppen, Kontraste stimmen, auch im Dark Mode des Systems.
Technik	Schnell, statisch, sicher per HTTPS, bei Google verifiziert und einfach zu pflegen.

Das Social Media Bild wird gern vergessen. Viele Seiten nehmen dafür das Hero Bild. Hat die Seite kein klassisches Hero Element, braucht sie ein eigenes Titelbild. Sonst sieht jeder geteilte Link auf LinkedIn leer aus.

Vom Design zum Code mit Google Stitch

Fertige Portfolio Templates passten nicht zur Idee. Roland hat stattdessen Google Stitch genutzt. Er hat das neue Signet hochgeladen, ein Bild vom Hockenheimring und ein Foto von Benjamin und sich. Stitch hat daraus die Farben erkannt und erste Entwürfe für Mobil und Desktop gebaut.

Der erste Entwurf war zu voll. Sterne, Badges, zusätzliche Unterseiten, typischer KI Überfluss. Der eigentliche Teil der Arbeit war das Reduzieren. Varianten bauen, wegnehmen, wieder vergleichen. Per Rechtsklick lässt sich in Stitch auch eine Animation generieren, so kam der Matrix Effekt auf die Seite. Am Ende gibt Stitch den kompletten Code aus, mit Tailwind. Das passt gut, denn Tailwind nutzen wir ohnehin in Production. Über MCP lässt sich Stitch auch direkt an KI Agenten anbinden.

Vibe Coding mit kostenlosen Modellen aus China

Aus dem Code von Stitch wird per Vibe Coding ein echtes Astro Projekt. Dafür braucht es kein teures Abo. Wir arbeiten in OpenCode mit kostenlosen Open Weight Modellen aus China, etwa aus den Familien GLM, MiniMax und Qwen. Für eine Landingpage reicht das locker. Die Modelle setzen Layouts um, bauen Komponenten und passen Texte an, und das in einer Qualität, die vor Kurzem noch teuren Modellen vorbehalten war.

Große Coding Modelle laufen dabei aus der Cloud, zum Beispiel über Ollama Cloud oder Z.AI. Das ist bei einer Landingpage unkritisch, denn alle Inhalte sind ohnehin öffentlich. Welche Modelle sich für welche Aufgabe eignen, vergleichen wir bei den Vibe Coding Modellen. Wie das live aussieht, zeigt der Bericht vom UPSCALER Event in Essen, wo Roland mit OpenCode und freien Modellen vor Publikum gebaut hat.

Astro trennt Inhalte vom Layout

Umgesetzt ist die Seite mit Astro und Tailwind. Die wichtigste Regel dabei: Inhalte und Layout bleiben getrennt. Alle Texte liegen in einer Markdown Datei. Darin stehen Titel, Beschreibung und die einzelnen Blöcke der Seite. Das Layout besteht aus Komponenten, die diese Blöcke darstellen.

src/
  content/
    pages/
      home.md
  components/
  layouts/

Das hat drei Vorteile. Texte lassen sich ändern, ohne das Layout anzufassen, zum Beispiel mit Vim oder Obsidian. Weitere Seiten entstehen aus denselben Komponenten. Und eine KI kann Inhalte gezielt bearbeiten, ohne das Layout zu zerstören. Wie wir Frontends mit Astro bauen, steht bei unserem Frontend Development.

Die Landingpage als Zentrale fürs Content Marketing

Eine Landingpage allein bringt noch keine Anfragen. Sie wird erst stark, wenn das ganze Content Marketing auf sie einzahlt. Ist das Wissen über die Marke einmal sauber aufgeschrieben, lässt sich daraus sehr schnell neuer Content ableiten:

• Social Media Profile: LinkedIn Seite, Instagram und Facebook nutzen dieselben Texte und Bilder.
• Posts mit Ziel: Jeder Beitrag verlinkt auf die Landingpage oder direkt auf einen Workshop.
• Google Unternehmensprofil: Die Beschreibung entsteht aus denselben Kernaussagen.
• Blog und Videos: Beiträge wie dieser erzählen die Geschichte hinter der Marke.

Genau das lernen Teams im KI Workshop. Für ein Social Media Team hat Roland zum Beispiel einen LinkedIn Post Generator gebaut. Er liest Branchennews aus und verbindet sie mit den Produkten des Unternehmens. Solche KI Features stecken in kleinen Astro Projekten, sind produktionsreif und machen Spaß. Warum eigene Tools mehr bringen als einzelne Chatbots, steht in Tools statt Chatbots.

KI schreibt mit, Menschen entscheiden

Die Texte sind im Chat mit einer KI entstanden, die über einen Connector die Inhalte von nevercodealone.de kennt. Sie wusste also, was in den Workshops passiert. Trotzdem gab es Missverständnisse. Ein alter Link lieferte nur noch eine Weiterleitung, weil die KI einen älteren Stand der Website kannte. Und eine Frage war offen: Ist das eine eigene Marke neben NCA oder eine Untermarke?

Noch wichtiger war ein anderer Punkt. Ein Workshop Name mit Nerd Humor hat die KI begeistert. Menschen fanden ihn missverständlich. Eine KI findet fast jede Idee super. Validiert Namen und Texte deshalb immer auch mit echten Menschen. Heute heißt das Angebot schlicht NCA KI Workshop für alle Abteilungen, für die Developer gibt es den NCA KI Workshop für Developer.

Kostenlos hosten auf GitHub Pages

Eine statische Astro Seite braucht keinen eigenen Server. Wir hosten Nerds in Shirts kostenlos auf GitHub Pages. Das Repository ist öffentlich, und das ist bei einer Landingpage kein Problem. Die Einrichtung läuft in drei Schritten:

1. DNS beim Registrar: Für die Hauptdomain kommen vier A Records auf die Adressen von GitHub. Sie sehen fast gleich aus, unterscheiden sich aber. Dazu ein TXT Eintrag ohne Namen für die Google Site Verification.
2. Pages im Repository: In den Settings unter Pages die eigene Domain eintragen, prüfen lassen und Enforce HTTPS aktivieren.
3. Build per Workflow: Ein GitHub Workflow baut die Astro Seite bei jedem Push und stellt sie statisch bereit.

Die Adressen und alle Hinweise zur Verifizierung stehen in der GitHub Doku zu eigenen Domains. Den passenden Workflow beschreibt die Astro Anleitung für GitHub Pages. Ein Tipp: Macht einen Screenshot eurer DNS Einstellungen und lasst euch von einer KI erklären, was für GitHub Pages fehlt.

Ein kleiner Fix zeigt den ganzen Ablauf

Im Video fällt Roland ein Fehler auf. Im Browser Tab steht der Name Nerds in Shirts doppelt. Das Layout hängt den Seitennamen noch einmal an den Titel. Der Fix ist eine Zeile im Layout. Danach folgt der übliche Weg:

1. Änderung lokal committen und pushen.
2. Pull Request gegen das Repository der Organisation stellen und mergen.
3. Der Workflow baut die Seite neu, nach wenigen Sekunden ist die Änderung live.

Den Umweg über den Fork braucht ihr nur, wenn ihr wie wir als Person in einer Organisation beitragt. Arbeitet ihr allein, pusht ihr direkt.

Warum zwei Stunden nicht reichen

Viele versprechen eine fertige Landingpage in unter zwei Stunden. Einen ersten Entwurf bekommt man mit Vibe Coding so schnell hin. Eine Seite mit Anspruch nicht. Allein der Bau von Nerds in Shirts hat rund sechs Stunden gedauert, in einer Nacht am Wochenende. Dazu kommen Texte, Bilder, SEO Feinschliff, Social Media Profile und ein Google Unternehmensprofil. Am Ende sind es mehrere Tage. Und das in einer Domäne, die wir seit Jahren kennen.

Genau da liegt unser Ansatz. Wir bauen mit Astro, Tailwind und Inhalten in Markdown, damit eure Seite schnell bleibt und ihr sie selbst pflegen könnt. Wir nutzen kostenlose Modelle dort, wo sie reichen, und richten euer Team so ein, dass es selbst weiterbauen kann. Wir achten auf Barrierefreiheit und auf Details wie das Social Media Bild. Und wir schätzen den Aufwand ehrlich, statt Schnellschüsse zu versprechen. Abgerechnet wird transparent nach Minuten. Begleitung beim Einstieg gibt es in der Vibe Coding Beratung. Wie ein Workshop bei einem echten Kunden aussah, zeigt der Nachbericht vom Hockenheimring. Und wer die beiden live erleben will, findet alles zum KI Vortrag mit Nerds in Shirts. Das Ergebnis selbst seht ihr auf nerdsinshirts.de.

Häufige Fragen zur Landingpage mit Astro und Vibe Coding

Wie lange dauert eine Landingpage mit Vibe Coding 2026?

Einen ersten Entwurf habt ihr mit KI Tools in wenigen Stunden. Eine Seite mit Anspruch braucht mehr. Für Nerds in Shirts lag allein der Bau bei rund sechs Stunden. Mit Texten, Bildern, SEO und Social Media Profilen sind es mehrere Tage.

Reichen kostenlose Modelle aus China 2026 für eine Landingpage?

Ja. Open Weight Modelle aus den Familien GLM, MiniMax oder Qwen setzen Layouts, Komponenten und Texte für eine Landingpage sehr gut um. Wir nutzen sie in OpenCode. Große Coding Modelle laufen dabei aus der Cloud. Bei öffentlichen Inhalten wie einer Landingpage ist das unkritisch.

Warum Astro 2026 für eine Landingpage?

Astro baut statische Seiten, die sehr schnell laden und sich kostenlos hosten lassen. Inhalte liegen in Markdown, das Layout in Komponenten. So bleibt die Seite leicht zu pflegen, und eine KI kann Texte ändern, ohne das Layout zu beschädigen.

Was kann Google Stitch für eine Landingpage?

Stitch baut aus Bildern und einer Beschreibung Entwürfe für Mobil und Desktop, erkennt Farben und erzeugt Varianten und Animationen. Am Ende gibt es den Code mit Tailwind aus. Über MCP lässt es sich an KI Agenten anbinden. Das Reduzieren und die Inhalte bleiben eure Arbeit.

Wie hilft die Landingpage beim Content Marketing?

Sie bündelt die Kernaussagen der Marke an einem Ort. Social Media Posts, Profile, das Google Unternehmensprofil und Blogbeiträge greifen darauf zurück und verlinken dorthin. So zahlt jeder Beitrag auf dasselbe Ziel ein, bei uns die Buchung eines Workshops.

Reicht es, Texte von einer KI prüfen zu lassen?

Nein. Eine KI findet fast jede Idee gut und kennt oft einen alten Stand eurer Inhalte. Namen, Claims und Links sollten Menschen prüfen. Bei uns ist so ein Workshop Name durchgefallen, den die KI noch gefeiert hatte.