Baue Deine Website noch heute mit KI

Hi, mein Name ist Damjan Savic, ich bin Softwareentwickler und Medienproduzent und heute zeige ich euch, wie ihr eure eigene Website komplett selber aufbauen könnt, ohne eine einzige Zeile Code geschrieben zu haben.

Ihr Die Website ist DSGVO konform, verfügt über einen Cookie Banner und ein sehr schönes Design.

Darüber hinaus implementieren wir noch weitere Funktionalitäten, wie beispielsweise Mehrsprachigkeit, verschiedene Unterseiten, wie beispielsweise die Über mich Seite, wo ihr diverse Informationen zu euch veröffentlichen könnt, daraufhin eine Portfolioseite mit interaktiven Portfolioprojekten, die ihr potenziellen Kunden hier zeigen könnt.

Dazu auch eine Blogseite mit Blogposts, um die Seite SEO zu optimieren und daraufhin noch ein Kontaktformular für eure potenziellen Kunden, damit sie direkt Kontakt mit euch aufnehmen können.

Was genau bringt mir meine eigene Website?

Das zeige ich euch jetzt.

Indem ich nach meinem eigenen Namen google, sehe ich, dass meine website und mein LinkedIn Profil direkt unter den ersten Treffern sind.

Andere Personen wurden mit der Zeit nach unten verschoben.

Genauso könnte ich jetzt weitere Keywords auf meiner Website einbinden, um das Google Ranking unter bestimmten anderen Suchbegriffen zu verbessern.

Ein weiterer enormer Vorteil im Verhältnis zu anderen Systemen ist die Tatsache, dass wir beispielsweise unsere Webseite über Vercel direkt kostenlos als Projekt hosten können.

Bedeutet, wir brauchen nur einen Account und erstellen dann ein Projekt, unter welchem wir dann unser Projekt hosten.

Dafür brauchen wir dann noch GitHub und haben das gesamte Projekt dann auch in einer Repository geparkt.

Der Kostenfaktor bei diesem Projekt ist relativ übersichtlich.

Wir nutzen kein Baukastensystem wie Wix, WordPress oder Webflow, haben ein viel besseres System als die meisten anderen auf dem Markt und dementsprechend haben wir die Möglichkeit über GitHub das Projekt zu versionieren und per Vercel zu deployen.

Beide Accounts sind kostenlos.

In diesem Fall ist ein Kostenpunkt lediglich die KI, mit welcher wir arbeiten.

Hier würde ich einen Pro Plan empfehlen, beispielsweise bei Cloud AI bei und die Domain, welche wir kaufen, um die Website unter einer bestimmten URL abrufbar zu machen.

Ich zeige euch einmal GitHub.

Hier müsstet ihr euch einen Account anlegen, um eine Repo anzulegen bzw.

Ein Projekt, unter welchem ihr die Website veröffentlichen möchtet bzw.

Versionieren möchtet.

Daraufhin vercel Build and deploy the best web experiences.

Hier würde dann entsprechend eine Integration zwischen GitHub und Versal stattfinden, um die Website entsprechend direkt auch zu bauen bzw.

Das gesamte Projekt so zusammenzubauen, dass entsprechend die Website auch abrufbar ist.

Nachdem ihr euch bei GitHub Versal registriert und eingeloggt habt, habt ihr hier auf GitHub die Möglichkeit eine neue Repository anzulegen.

Das ist unser Projektverzeichnis.

Hier werden alle unsere Dateien des Projekts abgelegt und versioniert.

Diese werden wir dann später nutzen, um eine Integration mit Vercel aufzubauen und das Projekt über Vercel direkt zu builden, also sprich zusammenzubauen und zu deployen.

Der Rest kann erstmal so bleiben, wie er ist.

Diesen Link nutzen wir, um der KI zu sagen, wo sie die Projektdateien ablegen soll bzw.

Wohin diese gepusht werden sollen.

bei Versal sieht es ähnlich aus.

Hier werden wir später ein neues Projekt hinzufügen und entsprechend das Testprojekt hier einfach importieren.

Im nächsten Schritt erstellen wir einen lokalen Projektordner auf unserem Gerät, in meinem Fall meinem PC.

Hier werden wir die gesamten Dateien ablegen.

Bedeutet, wir benötigen den Dateipfad dorthin und werden diesen nutzen, um mit der KI zu interagieren.

Für dieses Projekt nutze ich Cloud Opus 4.5.

Ihr könnt natürlich auch Google Gemini oder ChatGPT für das Projekt nutzen.

Ich wechsel von der Chat Ansicht in die Code Ansicht, wähle den Ordner aus, wo wir das Projekt abbilden möchten.

In meinem Fall auf dem Desktop unter Website.

Und hier haben wir einen Prompt vordefiniert, um das gesamte Projekt damit abzubilden.

Im Vorfeld ist es natürlich sehr wichtig, dass die KI einige Informationen zu uns oder zu der Thematik hat, zu welcher die Website aufgebaut wird.

In meinem Fall habe ich in dem Projektordner hier meinen Lebenslauf und ein Anschreiben abgelegt, um der KI schon mal initiale Informationen mitzuteilen.

In meinem Fall sieht der vorbereitete Projektordner wie folgt Ich habe hier auf dem Desktop den Website Ordner angelegt, mein Anschreiben und den CV hinterlegt.

Zusätzlich habe ich hier einen Source Ordner aus meinem Portfolio Projekt hinzugefügt.

Bedeutet, ihr startet bereits mit einem vorgegebenen Aufbau und einem Design basierend auf der Portfolioseite, welche ich euch am Anfang gezeigt habe.

Das heißt, wir haben jetzt hier eine komplette Designvorgabe und diverse Informationen, die wir angehangen haben.

Diese können wir nutzen, um über die KI diese vollständig individualisieren und implementieren zu lassen.

Wieder in Cloud Code angekommen, haben wir hier die Möglichkeit unseren Projektordner zu definieren und den folgenden Prompt einzugeben.

Sehr Ich habe diesen Prompt noch um weitere Informationen erweitert, welche infolge von Fragen aufgetreten sind.

Hier habe ich gesagt, dass die KI sich am Lebenslauf und Anschreiben aus dem Projektordner orientieren soll, um die Informationen zu erhalten, welche sie benötigt, um das Projekt abzuwickeln.

Dazu habe ich gesagt, dass der Source Ordner als Grundlage für den Aufbau und das Design verwendet werden soll.

Weitere Informationen habe ich hier jetzt eingefügt, damit Unklarheiten beseitigt werden.

Starten wir nun das Projekt.

Cloud arbeitet sich gerade durch alle Ordner und Dateien in unserem Projektordner durch und hat jetzt eine Roadmap erstellt.

Im nächsten Schritt beginnt Cloud mit der Entwicklungsarbeit.

Hier wird er oftmals nach Berechtigungen fragen.

Hier einfach Always allow for project klicken, um für die Dauer des Projekts alle Berechtigungen zu setzen.

Während Claude sich fast vollständig autonom durch das Projekt arbeitet, können wir natürlich im Hintergrund jetzt weitere Sachen machen.

Wir können nach Bildern im Internet suchen, nach bestimmten Themen, um neue Blogbeiträge zu entwickeln oder ein neues Portfolioprojekt konzipieren.

Und wieder werden wir nach Berechtigungen gefragt.

Claude hat den ersten Schritt bereits vervollständigt.

Jetzt wird die gesamte Projektstruktur erstellt mit allen relevanten Dateien und Verzeichnissen.

Nun arbeitet Cloud an den Kerndateien des Projekts und beginnt mit der Konfiguration.

Nachdem auch der letzte Punkt auf der Roadmap abgearbeitet wurde, haben wir hier eine Zusammenfassung erhalten, was im Projekt gemacht wurde.

Im nächsten Schritt gehen wir auf GitHub, kopieren die Projekt URL und haben dann die Möglichkeit der KI hier zu sagen, dass das gesamte Projekt dorthin gepusht werden soll bzw.

Alle Dateien aus dem Projekt dort abgelegt werden sollen.

Auf Vercel können wir dann das Projekt importieren und dort über eine Domain bzw.

Eine Testdomain öffentlich zugänglich machen.

Im nächsten Prompt habe ich hier definiert, dass meine GitHub Repo unter dem folgenden Link verfügbar ist.

Daraufhin dürfte Cloud Code jetzt hiermit fortfahren und das gesamte Projekt auf GitHub pushen, damit wir es später auf Vercel importieren können.

So, das Projekt wurde jetzt auf GitHub veröffentlicht und jetzt haben wir die Möglichkeit zu Versal zu wechseln.

Hier sehen wir das ursprüngliche Projekt, welches wir auf GitHub angelegt haben und wenn ich jetzt die Seite aktualisiere, sehe ich das gesamte Projekt, welches hier gepusht wurde.

Daraufhin fahren wir bei Vercel fort, sagen, dass wir ein neues Projekt hinzufügen möchten und importieren unser Testprojekt.

Dieses deployen wir dann auch direkt.

Wenn hier in den Build Logs irgendwelche Fehler entstehen, sehen wir auch direkt, dass dieser rot markiert wird und daraufhin haben wir die Möglichkeit, alle Logs direkt zu kopieren.

Diese können wir gegebenenfalls dann bei Claude Code noch einmal als Prompt mitgeben und diese Fehler werden dann auch systematisch behoben.

Die Warnungen, die gelben Meldungen sind nicht so schlimm.

Perfekt.

Unser Output bzw.

Unser gesamtes Projekt wird jetzt deployed unter einer Domain dann entsprechend zur Verfügung gestellt.

So, unser Projekt ist jetzt verfügbar.

Gehen wir zum Dashboard des Projekts und öffnen es über die Domain.

Hier haben wir nun unser gesamtes Projekt.

Das ist die gesamte Website, welche wir aufgebaut haben mit Cookie, Banner, verschiedenen Unterseiten und wie ihr sehen könnt, lädt die Seite extrem schnell.

Im nächsten Schritt würden wir dann eben schauen, dass wir verschiedene Funktionalitäten ausprobieren und entsprechend die Seite etwas schöner machen, vor allen Dingen Bilder hinzufügen und eventuell noch ein paar Elemente mit reinnehmen, die die gesamte Seite etwas schöner machen würden.

Jedenfalls habt ihr jetzt gesehen, wie man die gesamte Website aufbaut.

Im nächsten Schritt könnte Cloud Code dann beispielsweise OK, pass auf, hier auf der Homepage möchte ich im Header ein anderes Bild haben.

Dieses könnt ihr dann direkt in Cloud Code anhängen und dieses würde dann auch im Projektordner dort abgelegt werden, damit es hier ordentlich angezeigt wird.

Wichtig ist, dass sie jedes Mal, wenn ihr eine Änderung am Projekt vornehmt, Claude diese Änderung erstmal an Gitter pusht und diese dann automatisiert deployed werden, das heißt in einer neuen Version veröffentlicht werden auf Versal.

Damit habt ihr dann eine voll funktionsfähige Website, welche auch mobil optimiert ist.

Bedeutet, wir haben auch in der Mobilansicht auf Telefonen eine sehr coole Website.

Jetzt liegt es an euch im nächsten Schritt zu schauen, welches Design ihr implementieren möchtet.

Beispielsweise hättet ihr die Möglichkeit, über Seiten wie Awards euch verschiedene Seiten anzuschauen.

zuzugreifen.

Beispielsweise macht es Sinn, sich auch erstmal mit vielleicht Templates auseinanderzusetzen, die es auf Envato Elements gibt.

Da könnt ihr euch beispielsweise dann okay, was gibt es für Websites?

Hier haben wir dann beispielsweise Grafikvorlagen für komplette Website Templates und diese einzelnen Templates, die müsst ihr euch nicht kaufen.

Die könnt ihr einfach quasi in Screenshot Form einmal abbilden und Claude Code zur Verfügung stellen und ihm dann hey, mir gefällt jetzt beispielsweise hier diese Seite sehr gut.

Dieses Bild kopiere ich mir jetzt und schicke es an Claude.

Claude baut dann das Projekt sehr ähnlich angelehnt entsprechend an das Design so auf, wie ihr es haben möchtet.

Genau.

Ihr habt jetzt hier gesehen, wie die Website aufgebaut wurde.

Diese sieht ziemlich gut aus, kann natürlich nochmal in eine bestimmte Richtung gebogen werden, je nachdem welches Design ihr haben möchtet.

Und natürlich könnt ihr auch so prompten, dass ihr dann beispielsweise sagt OK, pass auf, ich möchte eine andere Farbe haben, ich möchte andere Bilder implementieren oder stell mir zumindest schon mal Platzhalter zur Verfügung, welche ich als Bilder nutzen kann und dementsprechend.

Genau, Ihr habt jetzt gesehen, wie ich eine Portfolio Website als Entwickler aufgebaut habe, aber diese Anleitung ist allgemeingültig für egal, welche Form von Website.

Bedeutet, ihr hättet eigentlich die Möglichkeit, innerhalb von einer halben Stunde eine komplette Website aufzubauen, welche euch dabei hilft, euch besser zu positionieren, ob als Selbstständiger, als Unternehmen oder einfach als Projekt.