🧑‍💻 Wie ich mit Codex eine Website erstellt habe

Ich teile weiterhin Neuigkeiten darüber, wie mein KI-Training läuft.

Letzte Woche habe ich mich intensiv mit Vibe Coding beschäftigt. Für die Praxis habe ich eine reale Aufgabe gewählt – eine Landingpage für meine Beratungsleistungen zu erstellen.

Früher hatte ich eine Seite auf Taplink, aber Design, Funktionalität und die monatliche Gebühr passten mir nicht. Also beschloss ich, mit Codex von OpenAI eine eigene Website zu erstellen.

Warum Codex? Meiner Meinung nach steht er für solche Aufgaben Claude in nichts nach, kostet aber weniger als 20 $ pro Monat.

🙈 Schritt-für-Schritt-Prozess für Anfänger

1️⃣ Ich habe Websites gefunden, die mir in Struktur und Design gefallen haben.

2️⃣ Ich habe Texte, Fotos und Links vorbereitet. Alles zusammen mit Referenzen an Codex übergeben.

3️⃣ Nach etwa 15 Minuten erhielt ich die erste Version der Website, die bereits veröffentlicht werden konnte.

4️⃣ Dann habe ich sie über den Chat verfeinert: Texte und Überschriften geändert, unnötige Blöcke entfernt, Design angepasst.

5️⃣ Ich habe darum gebeten, das Layout für Computer, Tablets und Smartphones zu optimieren.

6️⃣ Ich habe ein Repository auf GitHub erstellt und das Projekt dorthin hochgeladen. Nach der Autorisierung kann Codex dies selbstständig tun.

7️⃣ Ich habe mich bei Vercel registriert, GitHub verbunden und das Projekt importiert. Jetzt wird die Website nach jeder Codeänderung automatisch aktualisiert.

8️⃣ Ich habe eine Domain bei Beget gekauft. In meinem Fall war sie günstiger als bei Reg.ru.

9️⃣ Ich habe die Domain mit Vercel verbunden und DNS-Einträge konfiguriert, die die Domain mit dem Hosting verknüpfen.
Nach einiger Zeit war die Website im Internet verfügbar.
Vor der Veröffentlichung sollte man außerdem prüfen:
— die mobile Version;
— Schaltflächen und Links;
— Kontaktformulare;
— die Korrektheit der Texte;
— die Funktion von HTTPS.

🚀 Fortgeschrittenes Niveau

🔟 Ich habe die Website mit Page Speed Insight geprüft und einen Bericht über die Ladegeschwindigkeit erhalten.

1️⃣1️⃣ Ich habe die Empfehlungen an Codex übergeben. Er hat Code, Bilder und das Laden der Seite optimiert. Danach öffnete sich die Website auf alten Telefonen deutlich schneller.

1️⃣2️⃣ Ich habe um eine grundlegende SEO-Optimierung gebeten:
— Einrichten von Titeln und Beschreibungen der Seiten;
— Verbessern der Textstruktur;
— Hinzufügen von Bildbeschreibungen;
— Erstellen von robots.txt;
— Erstellen einer Sitemap.

Zusätzlich sollte man Analytics, Google Search Console einbinden und die Sitemap zur Indexierung einreichen.

Beim ersten Mal hat der gesamte Weg etwa 8 Stunden gedauert.
Änderungen an der fertigen Website dauern 1–5 Minuten. Selbst wenn ich das Design komplett ändern möchte, reicht es, die Aufgabe im Chat zu beschreiben. Codex aktualisiert den Code, und Vercel veröffentlicht automatisch die neue Version.

Das Ergebnis könnt ihr auf den Bildern oben sehen ☝️ Schriftart und Icons hat Codex selbst ausgewählt.

Wenn ihr diesen Weg nachvollziehen möchtet, empfehle ich den Kurs zu Vibe Coding. Dort gibt es dasselbe, aber mit ausführlichen Videoanleitungen:
👉 [Link zum Kurs]

🎁 10% Rabatt mit dem Aktionscode: IRESHEV