Du hast mit Claude Code, Lovable oder Codex eine kleine HTML-Seite gebaut und willst sie jetzt im Netz haben, damit Freunde, Kunden oder Kollegen sie sehen können? In diesem Snip zeige ich dir das Setup, das ich selbst für Prototypen nutze: GitHub für den Code, Vercel fürs Hosting. Beide Tools sind im kostenlosen Plan nutzbar, du brauchst keine Kreditkarte, und du legst dir gleich eine Basis, mit der du später auch komplexere Projekte hosten kannst.
Ergebnis
Nach diesem Snip liegt deine HTML-Datei in einem eigenen GitHub-Repository, ist mit Vercel verknüpft und unter einer echten URL live im Netz. Jede Änderung in GitHub wird ab dann automatisch deployed. Optional bindest du am Ende noch deine eigene Domain oder Subdomain an.
- Erstelle dir bei github.com einen kostenlosen Account (oder logge dich ein) und klicke oben rechts auf das Plus, dann auf “New repository”.
- Vergib einen Namen für dein Repository (z. B. “snipki-comic”), wähle Public oder Private und gehe auf “Create repository”.
- Im leeren Repository scrollst du etwas runter zu “uploading an existing file” und ziehst deine .html-Datei in das Fenster.
- Schreibe eine kurze Commit-Nachricht (z. B. “snipki first design”) und bestätige mit “Commit changes”.
- Lege dir bei vercel.com ebenfalls einen kostenlosen Account an und verbinde dabei deinen GitHub-Account.
- Klicke in Vercel oben rechts auf “Add new > Project”, wähle dein soeben erstelltes Repository aus der Liste und gehe auf “Import”.
- Lass die Standardeinstellungen so wie sie sind und klicke auf “Deploy”. Nach wenigen Sekunden zeigt Vercel dir eine Live-Vorschau.
- Öffne die generierte URL (z. B. snipki-comic.vercel.app) in einem neuen Tab und prüfe, ob deine Seite richtig aussieht.
- Optional: Unter “Domains” hinterlegst du deine eigene Domain oder eine Subdomain (z. B. comic.snipki.de) und setzt die angezeigten DNS-Einträge bei deinem Domain-Provider.
- Verstehen, wofür GitHub und Vercel gut sind und warum sie zusammen ein starkes Setup für eigene Projekte ergeben.
- Ein eigenes Repository für ein Vibe-Coding-Projekt anlegen und eine Datei sauber hochladen.
- Den GitHub-Account mit Vercel verknüpfen und ein Repository als Projekt importieren.
- Eine HTML-Seite per Klick deployen und unter einer echten URL erreichbar machen.
- Eine eigene Domain oder Subdomain mit dem Vercel-Projekt verbinden.
- GitHub
- Vercel
- Claude Code (alternativ: Lovable, Codex oder andere Vibe-Coding-Tools)
- Bonus: Skill für Claude Code: Bonus Tipp: https://vercel.com/changelog/introducing-vercel-plugin-for-coding-agents
- Interaktive Landingpages für kleine Unternehmen oder Projekte erstellen.
- Schnelle Prototypen von Webseiten entwickeln, bevor man mit detaillierter Entwicklung beginnt.
- Automatisierte Content-Generierung für Blogs oder Portfolioseiten.
- Integration von Video-Elementen oder multimedialen Features auf Webseiten per KI-Unterstützung.
- Unterstützung beim Lernen von HTML und Webentwicklung durch KI-gestützte Codebeispiele.
