#26 - Warum wir unsere Webseite mit KI komplett neu gebaut haben (Teil A)

00:00:00: Moin und herzlich willkommen zum KI-Tüpfelchen für Deinen Stalltag.

00:00:08: Wir tauchen ein in die Welt der künstlichen Intelligenz, und zeigen dir wie sie deinen Pferdealltag unterstützen kann!

00:00:15: Von praktischen Anwendungen bis zu zukunftsweisenden Möglichkeiten für dich und dein Pferd.

00:00:20: hier erfährst du was heute schon funktioniert und wie Du direkt davon profitieren kannst.

00:00:26: Los geht's Moin und herzlich willkommen zu einer neuen Solo Folge vom KI-Tüpfelchen Podcast für deinen Stalltag.

00:00:36: Schön, dass du wieder dabei bist!

00:00:39: Heute gibt es eine Folge auf die ich mich seit Wochen freue – und zwar gleich eine Doppelfolge.

00:00:46: Wir haben bei Kernkompetenz Pferde in den letzten Wochen unsere komplette Webseite neu gebaut.

00:00:54: Komplett von Grundauf mit KI Unterstützung ohne klassisches Entwicklerteam.

00:01:01: Wenn du Kernkompetenz-Pferdpunkt.de in den letzten Jahren mal besucht hast, dann hast Du eine WordPress-Seite mit Elementor gesehen über die Jahre gewachsen mit allem was da so dazugehört und das was Du da heute siehst läuft auf einem komplett neuen technischen Fundament.

00:01:21: Das ist eine eigene Plattform auf Basis von Next Jason also next.js.

00:01:28: Heute in Folge A geht es mir um das Warum und um das Wie im Groben.

00:01:34: Warum wir das überhaupt gemacht haben, was uns dazu gebracht hat?

00:01:38: Und wie der Weg ungefähr aussah.

00:01:42: In zwei Wochen.

00:01:42: dann dem üblichen Rhythmus gibt's Folge B. Darin gehe ich dann ein bisschen mehr ins Detail.

00:01:49: Da geht es um das wie ganz genau um die Knackpunkte Um die Stellen an denen wir oder ich besser gesagt mal richtig gestolpert bin und natürlich dann auch um mein ganz ehrliches Fazit.

00:02:03: Wenn du selbst eine Webseite betreibst und immer wieder gegen diese Grenzen deines Tools stößt, dann bleib unbedingt dran!

00:02:11: Ich glaube du nimmst aus dieser Folge richtig viel mit.

00:02:16: Lass mich zu Beginn einmal kurz einordnen wo wir herkommen.

00:02:20: Kernkompetenz fährt es seit fast neun Jahren oder fast zehn jahren online.

00:02:26: das heißt die webseite ist über die jahre gewachsen erst klein dann mehr inhalte mehr funktionen mehr seiten.

00:02:34: das kennst du wahrscheinlich wenn du selbst etwas im netz aufgebaut hast.

00:02:38: unser stack also unser setup unser die tools mit dem wir gearbeitet haben war bisher ganz klassisch wordpress als system elementor als visueller Page Bilder.

00:02:50: Du arbeitest vielleicht mit Wix, mit Stratum und irgendeinem anderen Page-Bilder aber nur so für die Einordnung.

00:02:59: Und daneben natürlich dann ein ordentlicher Park an Black Instrument herum.

00:03:04: Damit ich gleich fair bin Elementor war für unseren Start eine Superlösung.

00:03:10: Du baust visuell, du siehst sofort was du machst.

00:03:13: Du brauchst kein Entwickler für jede Kleinigkeit.

00:03:15: Das ist ein riesen Vorteil.

00:03:18: gerade am Anfang und vor allem vor zehn Jahren gab es das was wir heute machen noch gar nicht.

00:03:24: deswegen war das für uns damals genau das Richtige.

00:03:27: aber irgendwann hat sich das dann gedreht und ich nämlich kurz mit durch die sechs Punkte, die mich am Ende wirklich frustriert haben.

00:03:34: Vielleicht erkennst du dich an der einen oder anderen Stelle dann wieder und kannst unsere oder meine Entscheidung dann auch ein bisschen besser verstehen.

00:03:42: Punkt eins ich nenne es mal Kraut und Rüben.

00:03:46: über die Jahre habt jede Seite ein bisschen anders ausgesehen.

00:03:50: Hier mal ein anderer Button, da einen anderen Abstand.

00:03:54: Drüben eine andere Schriftgröße Mal blau, mal grün, mal irgendwas dazwischen.

00:04:00: Die Webseite hat ihre Designsprache ein bisschen verloren gar nicht im groben sondern eher im Detail.

00:04:08: Und das ganze auch nicht mit einem großen Knall, sondern einfach schleichend über die Jahre Mit jeder Seite und jedem neuen Programm Ein kleines bisschen mehr.

00:04:18: Punkt zwei Das war die globale Änderungen waren faktisch unmöglich.

00:04:24: Zum Ende hin!

00:04:26: Wenn ich auf Einenfünfzig verschiedenen Dankeseiten den Hauptbutton ändern wollte, dann war das ein Tagesprojekt.

00:04:33: Ich musste Seiten öffnen, Editor laden, ändern, speichern Nächste Seite, Einenwünftig mal das gleiche.

00:04:39: Das ist ehrlich gesagt keine Arbeit, das ist eine Bestrafung.

00:04:45: Punkt drei eines meiner absoluten Hate Stories, die Pop-up Story.

00:04:51: Stell dir vor du willst ein Pop up einbauen.

00:04:54: Klingt einfach!

00:04:56: Vielleicht ist es bei manchen kleineren Seiten auch tatsächlich noch einfach?

00:05:00: Bei uns hat mich jedes einzelne Papa einen halben Tag gekostet.

00:05:04: Placken auswählen, konfigurieren mit den Bedingungen also den Conditionskämpfen.

00:05:11: Mal wollte das Ding auf dem Mobile nicht aufgegeben mal hatte der Cookie-Banner damit gestritten mal war es zu schnell zu mal gar nichts zu und am Ende hat es trotzdem nicht so funktioniert wie ich es wollte.

00:05:24: Punkt vier einer der Härtesten Knackpunkte oder wichtigsten Stellschrauben, wichtigsten Entscheidungsfaktoren war die Ladegeschwindigkeit.

00:05:35: Vor allem auch auf dem Handy also auf Mobile Devices.

00:05:39: WordPress macht für jeden Seitenaufruf eine Datenbankabfrage.

00:05:43: Dazu kommen Pluck-In-Aufrufe dazu CSS aus etlichen verschiedenen Quellen und das merkt man vor allem auf dem Handy, vor allem im Stall wenn das Netz schwächelt und das Merken dann auch die Besucher.

00:05:57: Das ist ziemlich frustrierend, wenn du auf schnelles Internet und schnelle Seiten gewohnt bist.

00:06:03: Und dann eine Seite auf ne Seite kommst wo einfach gefühlt das Ding eine halbe Ewigkeit dauert um zu laden.

00:06:11: Punkt fünf unser Update-Rollett.

00:06:14: Bei jedem Plug in Update Bauchschmerzen geht jetzt was kaputt funktioniert das nach dem Update noch so wie es vorher funktioniert?

00:06:22: halt und ehrlich gesagt habe ich Updates oft genug rausgeschoben, weil ich keine Lust hatte auf Überraschungen hatte.

00:06:30: Punkt Nummer sechs Abhängigkeit von externen Experten.

00:06:35: Selbst die Sachen, die ich technisch verstanden habe, konnte ich oft nicht selber sauber umsetzen.

00:06:41: Für jede größere Anpassung musste ich also einen WordPress oder Elementor-Experten ranholen besonders dann für die Design-Elemente Weil ich es nicht so umsetzten konnte wie ich mir das vorgestellt hab.

00:06:54: Das hieß dann immer warten, manchmal Tage wochenlang bezahlen.

00:06:59: Auch gerne ordentlich bezahlen und am Ende war ich trotzdem nicht in der Lage das nächste Mal selbst nachzubessern oder das Ganze einfach nur zu duplizieren und als Template zu verwenden.

00:07:10: Das war also ein endloser Kreislauf, der mich am Ende doch extrem genervt hat!

00:07:17: Das sah dann so aus... Ich habe irgendwann eine Idee gehabt, gerne auch im Wochenende Sonntag ganz aufgeschrieben, raus geschickt.

00:07:26: Auf Termin gewartet, Angebot bekommen, Beauftragen auf Umletzung warten.

00:07:30: Der schwung mal weg bevor die Idee live war und wenn es kurzfristig ist was wirklich in Momentum gemacht oder erzeugt hätte war der Zug abgefahren.

00:07:42: also eigentlich ein totaler Killer.

00:07:45: Lass mich das einmal ein bisschen einsortieren.

00:07:47: bevor du denkst ich rede WordPress schlecht tue ich nicht.

00:07:52: Es war keine schlechte Lösung, es war die richtige Lösung für ihre Zeit.

00:07:56: Aber irgendwann merkst du halt... Du arbeitest nicht mehr mit deinem Tool!

00:07:59: Du arbetest irgendwie gegen es und alles sind Kompromisse Und du bist auch nicht mehr her über deine eigene Webseite.

00:08:07: So war's zumindest bei mir oder bei uns und das war echt ein sehr bescheidenes Gefühl.

00:08:13: Was hat denn jetzt endlich den Ausschlag gegeben?

00:08:17: Ganz ehrlich KI-Tools mit denen du Kot schreiben kannst.

00:08:21: Das war bei uns so der Auslöser und für mich der initiale Funke, der mich auf diese Idee gebracht hat.

00:08:27: Bei mir konkret war es dann tatsächlich Claude Kot.

00:08:32: Vielleicht hast du den Begriff Vibe Coding schon mal gehört falls nicht.

00:08:36: kurz erklärt beschreibst in normaler Sprache was du willst.

00:08:40: Du sagst der KI auf Deutsch oder auf Engelich oder auf welcher Sprach auch immer Was du brauchst Und die KI schreibt dir den Code dafür.

00:08:50: Du testest das Ganze, du gibst Feedback sie verbessert und so arbeitest du dich Stück für Stück voran.

00:08:57: Du musst dafür kein klassischer Entwickler sein aber lass dir gesagt sein ein bisschen technisches Verständnis hilft da enorm!

00:09:05: Ähm...und dass ist mir an der Stelle wichtig.

00:09:09: ehrlich zu sein Ich war nie professioneller Webendleck-Wickler.

00:09:14: Ich verstehe Code mittlerweile, wenn ich ihn sehe.

00:09:17: Und in den fast zehn Jahren Kernkompetenz fährt mein technisches Verständnis Schritt für Schritt aufgebaut und würde mich da jetzt einmal auf dem fortgeschrittenen Entwicklerniveau einstufen.

00:09:34: Aber ich hätte trotzdem vor zwei Jahren niemals eine Webseite in dieser Größenordnung selbst gebaut!

00:09:39: Was ich verändert hat, ist also nicht unbedingt meine Fähigkeit natürlich auch ein bisschen.

00:09:45: Aber was sich verändert hat ist tatsächlich das Werkzeug.

00:09:50: und damit du mich hier auch nicht falsch verstehst die KI ist da definitiv kein Zauberstab.

00:09:57: sie macht immer noch Fehler und deswegen Du musst verstehen was sie tut sonst baust du dir blind Sicherheitslücken ein oder eine Architektur die dir später um die Ohren fliegt.

00:10:09: Also Vibe-Coding ja, aber wie immer wenn ich was sage mit Kopf anschalten.

00:10:15: Und das ist auch der Gedanke hinter diesem Podcast ne?

00:10:19: Du weißt es Team Kopf einschalten!

00:10:22: Ich nehme dich jetzt mit.

00:10:23: zu den drei Treibern.

00:10:28: also drei Gründe warum mich am Ende gesagt habe wir machen dass ich baue das jetzt neu.

00:10:34: Treiber Nummer Eins war die Flexibilität und die Eigenständigkeit.

00:10:39: Ich wollte ein System, in dem ich neue Funktionen selbst bauen kann.

00:10:44: Sobald ich sie brauche!

00:10:45: Nicht warten bis irgendein Plug-Inhersteller das Feature liefert oder eben nicht liefert... ...oder bis vielleicht einen Entwickler für mich Zeit hat und mir das für viel Geld dann auf WordPress Elementor Basis baut.

00:11:02: Es läuft dann so ab.

00:11:03: Heute habe eine Idee Ich setze mich an den Rechner mit Plotcode im Rücken Und nach zwei Stunden ist das Ding live.

00:11:09: Die Souveränität ist das, wofür ich das alles gemacht habe.

00:11:13: Konkretes Beispiel dazu – wir haben unseren Pferdemenschen-Typen-Test auf der Webseite gerade komplett neu gebaut auch dann als Folgeprojekt von der neuen Laseite.

00:11:24: mit eigener Logik und eigenen Modal, eigene Auslieferungen.

00:11:29: in WordPress wäre das ein Albtraum gewesen oder besser gesagt nahezu unmöglich bis dato oder bis zu dem Wechsel.

00:11:41: So gemacht auf der WordPress Seite gab es einen Button einlegend, der auch eine externe Plattform auf einem Formulatool verwiesen hat.

00:11:51: Dort war dann dieser Test mit neuen Fragen.

00:11:54: dort waren Regel hinterlegt die für jede Frage ein Punktesystem bewertet.

00:12:00: am Ende gab's ein Formular der die Nutzer dann eingetragen hat bei uns im e-mail Marketing Tool.

00:12:06: Sie haben eine E-Mail mit dem Ergebnis bekommen, also du siehst schon viele, viele Schritte viel Conversion Killer zwischendrin, die am Ende das Tool wirklich unschön gemacht haben oder diesen Test unschöne gemacht haben und für uns auch die Conversion kaputtgemacht haben.

00:12:23: Heute sieht es jetzt so aus dass alles in Next Jason auf unserer Seite stattfindet Natürlich auch am Ende mit einem Eintragungsformular, aber auch das über Next Jason gebaut.

00:12:37: Ohne Conversion-Tiller.

00:12:39: der Nutzer bekommt direkt sein Ergebnis und hat seinen Mehrwert daraus gezogen.

00:12:46: Treiber Nummer zwei war ganz klar die Geschwindigkeit.

00:12:50: Eine moderne Next Jason Seite läuft technisch in einer ganz anderen Liga als eine gewachsene WordPress-Seite.

00:12:59: ist einfach so.

00:13:00: Und ich bin selber jetzt nach einer Woche Live-Lauf der Seite immer noch einfach jedes Mal begeistert, wenn ich was anklicke und boom!

00:13:11: Die Seite ist da.

00:13:13: Das hat wie gesagt tatsächlich vorher fünf, sechs, sieben Sekunden gedauert bis es da war.

00:13:18: Wenn du auf etwas wartest sind sieben sekunden eine Weltreise.

00:13:23: Also das ist wirklich dieser Vergleich ist Unterschied wie Tag und Nacht.

00:13:28: Warum ist das jetzt so?

00:13:29: Statisches Pre-Ranering, also Seiten die schon fettig sind und fertig da liegen wenn der Besucher kommt.

00:13:36: Das führt einfach zu viel schnelleren Ladezeiten.

00:13:39: wir haben keine Datenbanken, Roundtrips für jeden Aufruf weniger Code der überhaupt ausgeliefert wird und das spüren die Besucher direkt!

00:13:49: Und das ist auch super seorelevant.

00:13:52: Also Google misst wie schnell deine Seite lädt und wertet das ein.

00:13:58: Und wie gesagt, das ist ein Unterschied wie Tag und Nacht.

00:14:04: Treiber Nummer drei war wirklich die Konsistenz und die globale Kontrolle.

00:14:13: Das hängt direkt am Punkt eins von vorhin, Kraut und Rüben.

00:14:18: im neuen System wirkt sich eine Kotänderung zum Beispiel auf alle Einen Fünfzig Danke.

00:14:23: Seiten aus, die diese Komponente nutzen.

00:14:27: Das heißt, die Designsprache wird nicht mehr nur eingehalten.

00:14:31: Weil ich daran denke, sondern weil das System es erzwingt!

00:14:36: Jetzt möchte ich noch kurz auf einen Punkt eingehen der dir vielleicht gerade durch den Kopf geht und der dir da draußen auch oft vermittelt oder verkauft wird.

00:14:44: Verkauft ist ein passender Begriff.

00:14:47: Vielleicht denkst du na klar Henrik und dann sparst du auch noch Geld dabei Stopp ganz klar stopp.

00:14:54: das stimmt nämlich nicht.

00:14:56: Also dir wird da draußen oft verkauft, dass diese selbst programmierten KI-Tools viel günstiger als alles andere sind.

00:15:04: Das mag an vielen Stellen stimmen aber wenn man jetzt mal so die Kosten für WordPress und Elementor.

00:15:10: das sind auch hunderte tausende Euro nicht hundarte Tausend Euro sondern Hunde oder Tausende Euros pro Jahr.

00:15:18: Aber das ist jetzt kein Weltuntergang.

00:15:22: Warum sage ich dir das?

00:15:23: Wir sind nämlich jetzt bei Ursell Pro, das ist dazu komme ich gleich noch.

00:15:29: Also unser neuer Deployment Anbieter und da wie gesagt im Pro-Tarif und auch bei Superbase einer Datenbank die wir jetzt benutzen auch im Pro Tarif.

00:15:41: Das heißt unsere reine Infrastruktur ist eher sogar ein kleines bisschen teurer als vorher was die Webseite angeht.

00:15:51: aber perspektivisch auf die Möglichkeiten, die uns es gibt.

00:15:55: Die Punkte, die ich dir eben beschrieben habe

00:15:57: etc.,

00:15:58: pp ist das von der Preisleistung her definitiv ein No-Brainer.

00:16:05: Aber das war auch wie gesagt bei mir nie der Punkt.

00:16:08: Ich wollte jetzt nicht günstiger werden mit dem ganzen Setup.

00:16:11: Der Punkt war was sich oder ist besser gesagt Was ich heute in einer Stunde umbauen kann hätte mich im WordPress eine Woche gekostet oder einen externen Dienstleister auf den ich gewartet hätte.

00:16:27: Also diese Investition rechnet sich in Zeit, in Flexibilität, in Möglichkeiten und nicht in eingesparten Euros.

00:16:38: Jetzt einmal kurz zu der Frage, womit habe ich das eigentlich gebaut?

00:16:44: Du musst dir die Begriffe nicht merken!

00:16:46: Ich sage dir kurz worum es bei jedem geht damit du Kopf fast.

00:16:52: Erstens NextJSON statt WordPress, also NextJson ist ein modernes Framework für richtige Web Apps.

00:17:00: Alles ist Code, alles ist Versions verwaltet.

00:17:05: das heißt jede Änderung ist nachvollziehbar, jede Änderung kann ich notfalls zurückrollen.

00:17:11: Zweitens GitHub.

00:17:14: Das ist die Stelle an der unser kompletter Code liegt.

00:17:19: Du kannst dir das vorstellen wie eine riesige versionierten Aktenschrank für alles was zur Webseite gehört.

00:17:29: Jede Änderung wird dort gespeichert, wer hat was wann gemacht?

00:17:32: Was war der letzte Stand letzte Woche?

00:17:36: Was ist der Stand vor drei Monaten?

00:17:38: Alles ist also nachvollziehbar genau!

00:17:43: Drittens Wurzel als Hosting Anbieter.

00:17:47: Das ist eine Plattform auf der die Seite am Ende läuft und jetzt wird es spannend, denn Wursel hängt direkt an GitHub!

00:17:55: Damit du dir das vorstellen kannst wie das im Alltag aussieht gehe ich kurz durch wie eine Änderung bei mir dann uploaden.

00:18:04: Also ich habe die komplette Webseite als Ordner lokal auf meinem Rechner.

00:18:09: Ein Ordner mit ganz vielen Dateien drin, Code-Dateien, die im Endeffekt wenn von mir beauftragt mit GitHub synchronisiert werden.

00:18:20: Ich öffne diesen Ordner Klotcode.

00:18:26: passt den Code an.

00:18:27: Ich teste das auf meinem Rechner lokal, bevor ich das veröffentliche und wenn ich zufrieden bin mache ich einen sogenannten Komet.

00:18:36: Das ist nichts anderes als zu sagen diesen Stand will ich speichern dann ein Push abschicken.

00:18:43: das heißt es schickt diesen stand zu GitHub hoch mehr oder weniger.

00:18:47: das sage ich dem System.

00:18:49: Und in dem Moment in dem GitHub den neuen Stand hat Schnappwessel ihn sich automatisch und stellt ihn live.

00:18:58: Also, dreißig Sekunden später ist die Änderung im Internet.

00:19:01: Heißt kein FTP mehr?

00:19:03: Kein Wartungsfenster?

00:19:05: Keine Angst dass bei einem Deployment irgendwas schief geht?

00:19:08: Und wenn doch mal was schiefgeht dann gehe ich in GitHub ein Stand zurück, drücke wieder Push und Vercel stellt den alten funktionierenden Stand wieder her!

00:19:17: Das ist eine Sicherheit, die du dir an einer klassischen WordPress Installation in der Form nie hart ist oder die dir nie gegeben war.

00:19:28: Viertens Tailwind als CSS Framework, das ist das System mit dem die Seite gestaltet wird.

00:19:37: Das sorgt dafür dass die Designsprache durchgängig konsistent ist.

00:19:43: Und fünften, ich habe es vorhin schon angesprochen, Superbase als Datenbank.

00:19:47: Da liegen dann Daten die wir später brauchen für einen eventuellen Mitgliederbereich, für eine Bilddatenbank, für alles was wir in Zukunft darauf satteln.

00:20:00: Was du dir merken kannst unabhängig von den Namen?

00:20:03: Du baust dir also kein Tool mehr zusammen das dir vielleicht passt!

00:20:06: Du bauchst dir eine Plattform die mit dir mitwächst und das ist tatsächlich der entscheidende Unterschied.

00:20:14: Es gibt einen Punkt an dieser Bauweise, den ich extra rausziehen will weil er mir wirklich am Herzen liegt und der wird im Trubel der ganzen Toolnamen oft übersehen.

00:20:26: Ich habe diese Webseite jetzt mit Cloudcode gebaut?

00:20:30: klar aber ich bin überhaupt nicht auf Cloudcode festgelegt.

00:20:33: wenn ich morgen aufwache und sage ich hab jetzt Lust mit Codex von OpenAI zu arbeiten dann kann ich das tun!

00:20:41: Wenn ich übermorgen sage Ich probiere jetzt Antigravity von Gemini, also von Google aus.

00:20:48: Dann öffne ich genau den gleichen Ordner mit dem nächsten Tool und es geht weiter wo ich aufgehört habe!

00:20:56: Code liegt.

00:21:16: Nicht falsch verstehen, also da liegt kein Code drunter sondern eine Code zeilen, sprich viele Einsen und Nullen und Computersprache.

00:21:26: Und das ist Standardcode.

00:21:27: Das ist Standardcomputersprach Standard Frameworks.

00:21:31: Jede KI die heute beim Programmieren helfen kann versteht diesen Code.

00:21:36: Sie sieht meinen Ordner sie sieht meine Komponenten sie sieht den Verlauf bei GitHub.

00:21:43: So ist das hier also aufgebaut, da kann ich dran anknüpfen.

00:21:46: Das ist ein riesiger Unterschied zu der Welt aus der wir oder ich kommen.

00:21:51: In WordPress war ich abhängig vom Tool selbst und Elementor war ich von Pagebildern.

00:21:57: Wenn der Hersteller morgen die Preise verdoppelt hat oder das Produkt einstellt habe mich ein Problem.

00:22:02: Und jetzt ist es anders!

00:22:03: Mein Code gehört mir, mein Code liegt bei GitHub in meinem Account.

00:22:08: und welche KI ich gerade als Co-Pilot benutze Auch hier, ja Ko-Pilot weiß wieder der falsche Begriff weil es auch eigentlich ein Tool von Microsoft ist.

00:22:18: Also welche KI ich jetzt heute im Moment zur Unterstützung benutze?

00:22:23: Ist eine reine Komfortentscheidung!

00:22:25: Heute Kloat, morgen vielleicht eine andere übermorgen Wiederkloat und das ist Souveränität auf einer ganz anderen Ebene als bei den drei Treibern von vorhin Und das ist mir mit jedem Monat, den ich auf dem neuen System arbeite, wichtiger geworden.

00:22:46: Vielleicht fragst du dich an dieser Stelle Hendrik wenn Du wirklich von Null heute anfangen würdest und bauen würdest eine neue Webseite?

00:22:55: Wo fängst Du da an?

00:22:58: Das ist definitiv ne berechtigte Frage!

00:23:00: Ich nehme Dich gerne einmal in die ersten drei Schritte.

00:23:06: Schritt Nummer eins Inventarisierung.

00:23:10: Bevor du irgendetwas Neues baust, musst du wissen was Du eigentlich hast!

00:23:16: Ich habe mir mit einem kleinen Skript alle Pages, alle Posts, alle Bilder, alle PDF aus der WordPress API gezogen und in eine Liste geschrieben.

00:23:29: Damit du eine Vorstellung bekommst was bei uns dann zusammengekommen ist.

00:23:34: das war ein Über hundertfünfzig Blog-Posts, einen Fünfzig Dankesseiten.

00:23:39: Jede Menge Hauptseiten für die ganzen Onlinekurse.

00:23:42: Mehrere Varianten für die KKP-Welt.

00:23:46: Etliche Bilder.

00:23:49: Allein durch die Inventur ist mir wirklich klar geworden wie groß das Ding eigentlich war oder ist und weshalb dieser Umzug noch wichtiger ist.

00:24:02: Jetzt habe keine Angst dieses Skript, was ich dafür gebaut habe.

00:24:06: Das hab' ich mir nicht aus meinen Gehirnzellen rausgesogen.

00:24:10: Ich wusste...ich brauch die Inventarisierung.

00:24:12: Also ich muss wissen wo ich herkomme Was ich habe, was sich bei einem Neubau berücksichtigen muss.

00:24:17: Und das hab' mit der KI, mit Claude Cout besprochen und er hat mir dann auch dieses Skrip gebaut Welches über das ich über die WordPress API all diese Daten gezogen haben.

00:24:29: Schritt Nummer zwei war dann tatsächlich NEXT, JSON und VERSAL aufsetzen.

00:24:39: Das ist so der technische Grundaufbau.

00:24:41: Klingt groß?

00:24:43: Ist das aber eigentlich gar nicht!

00:24:44: Das passiert an einem Nachmittag.

00:24:46: Du legst das Projekt an, du verbindest es mit Vercel.

00:24:49: Du machst den ersten Deploy also den ersten Livegang, ein Code von GitHub auf Vercal pushen... Und dann hast du im Internet schon eine erste leere Seite, die unter deiner künftigen Adresse läuft.

00:25:03: Also du kannst es erst mal über eine Vercel Homepage oder UL laufen lassen.

00:25:08: Du kannst dann aber auch direkt auf dein eigene Domain verknüpfen.

00:25:14: Das ist dir vollkommen freigelassen und du kannst tatsächlich auch kostenlos starten!

00:25:20: Also Vercels gibt da einen kostenlosen Plan im Github.

00:25:25: Kannst du auch mit einem kostenlose Plan benutzen?

00:25:29: Es sind erstmal finanziell keine Hörden, die auf dich zukommen.

00:25:33: Und dann Schritt Nummer drei ist die erste Seite als Prototyp.

00:25:38: Bei mir war das tatsächlich oder bei uns war es tatsächlich eine Landingpage, die ich gebaut habe, die auch zu Beginn kurz parallel laufen hatte als eigenständiges Subdomain zu unserer ursprünglichen WordPress Elementor Seite.

00:25:55: Also einfach, um sich das Ganze anzusehen ist die ist bei uns wirklich live gelaufen parallel zu dem bestehenden Setup und das war ja auch der Moment wo ich gesagt habe, boah das funktioniert richtig gut und das hätte ich gerne für die komplette Seite und deswegen bin ich dieses große Projekt dann auch noch angegangen.

00:26:13: also du kannst mit irgendeiner Seite anfangen einfach um zu sehen wie fühlt sich das an?

00:26:18: Wie schnell komme ich hier voran?

00:26:20: Wo sind sie Stolper stellen?

00:26:22: Und genau in dieser Phase kam, wie eben schon beschrieben mein großer Aha-Moment und der hatte ganz klar einen Namen.

00:26:31: Die Komponenten.

00:26:34: Eine Komponente ist ein Stück Kot das ich überall wieder verwende.

00:26:39: Stell dir das vor wie ein Lego Stein einmal gebaut beliebig oft eingesetzt Und wenn ich am Lego Stein etwas ändere dann ändert sich das überall wo er steckt.

00:26:52: Erinnert dich daran, ich habe es zu Beginn gesagt.

00:26:53: Wir hatten einundfünfzig verschiedene Dankesseiten.

00:26:58: In WordPress hieß das Ich hab's ganz am Anfang schon mal gesagt.

00:27:02: Einenfünfzig Mal Editor öffnen.

00:27:05: Einundfünftig mal ändern Hoffen dass du keine vergisst.

00:27:09: Im neuen System ist jetzt eine Code Änderung alle Einen-Fünfzig Seiten sofort aktualisiert.

00:27:17: Das war für mich der Moment wo ich gedacht habe so muss sich die Arbeit mit KI und die Arbeit so einem Tool anfühlen.

00:27:26: So macht das Spaß!

00:27:30: Damit das nicht abstrakt bleibt, gebe ich dir drei Beispiele aus unserem Alltag wie sich das umgesetzt habe oder wie wir es umgesetzt haben.

00:27:40: Beispiel eins ist zum Beispiel die Freebie Page Layout oder das Freebie page layout was wir haben sprich das Design eines Null-Euro-Produktes bei uns.

00:27:56: Wir haben davon ein paar, sprich wir haben ein paar Freebie-Seiten und auf jeder bekommst du etwas geschenkt, du trägst dich ein, du bekommest es zugeschickt.

00:28:05: diese vier Seiten teilen sich jetzt eine einzige Layout Komponente pro Seite gebe ich nur noch das Bild rein oder den Text rein Formular, welches wir verwenden.

00:28:24: Also wie es halt welches Eintragungsformular daran hängt und den Rest macht das System.

00:28:30: Beispiel zwei Du hast jetzt schon mehrmals gehört aber noch einmal damit's wirklich hängen bleibt die einundfünfzig Dankesseiten basieren auf einer einzigen Vorlage.

00:28:41: wenn ich morgen entscheide dass auf jeder dankes Seite ein zusätzlicher Hinweis stehen soll keine Ahnung irgendwie einen Link zu unserer zu den Erfahrungsberichten oder zu einer aktuellen Aktion die läuft, dann ist das mit einem Schnipser gemacht.

00:28:57: Nicht einen Fünfzig sondern an einer Stelle einmal gemacht fertig.

00:29:03: Beispiel Nummer drei ist unser Call to Action System.

00:29:07: also Call To Actions sind Handlungsaufforderungen.

00:29:12: so haben wir eigentlich bei jeder Blockseite auf jedem Blog Artikel Boxen eingebaut in denen passende relevante Online-Kurse, aber auch Freebies auf die KKP-Welt oder auch auf andere Blogartikel verweisen.

00:29:28: Diese liegen jetzt alle in einer zentralen Bibliothek.

00:29:32: Im einzelnen Blogartikel sage ich dem System nur noch nimm Call to Action XY und Call To Action Y oder Z und baue die da ein Und das führt dazu dass eigentlich keine E-Läufer mehr drin sind.

00:29:52: Also jetzt gerade beim Umzug ist mir aufgefallen, dass ich bei älteren Podcastfolgen noch Call to Actions drin hatte die auf einem Programm start das war Projekt Mein gesundes Pferd von vor drei Jahren hingewiesen haben und der Link lief dann ins Leere.

00:30:10: also da musste ich manchmal echt schmunzeln und auch teilweise an den Kopf fassen, dass uns das nicht eher aufgefallen war.

00:30:18: Und das ist im Endeffekt das Geheimnis von einer guten Softwareentwicklung.

00:30:23: Nicht dass Copy-Paste, sondern wiederverwenden und das geht in Kote tausendmal eleganter als in einem visuellen Page-Bilder!

00:30:36: Jetzt sind wir schon relativ weit fortgeschritten.

00:30:39: bevor du dir jetzt denkst Hendrik das klingt wahnsinnig befreiend.

00:30:44: ich mache das auch direkt.

00:30:45: nächstes Wochenende hier ein kurzer Realitätscheck.

00:30:51: Die erste Phase, also Stack aufsetzen, Inventur, Komponenten anlegen, Hauptseite bauen hat bei uns ehrlich gesagt einige Wochen gedauert nicht Tage sondern Wochen und das waren bei mir viele Abende, viele Morgende, Viele Wochenenden auch dabei Phasen in denen ich mich gefragt habe Wooh, war das jetzt wirklich notwendig, dass ich mir das angetan habe.

00:31:20: Jetzt den Nachgang.

00:31:21: definitiv Yes Hell yes!

00:31:23: Das war das Beste was ich jemals machen konnte.

00:31:25: aber zwischendurch War es echt ein langwieriger Prozess und Ich hab mir zwischenzeitlich Ech gedacht ich habe das ein bisschen unterschätzt wie viel Aufwand ist doch ist Aber jetzt im nachgang tatsächlich wow das beste die beste Entscheidung ever.

00:31:45: Das heißt, die Lernkurve war steil.

00:31:48: Auch mit KI musst du verstehen was du gerade baust sonst sitzt du irgendwann auf einem Bergcode den du nicht mehr durchchaust und ohne meine zehn Jahre Vorerfahrung als der bei Kernkompetenz Fert den technischen Hut aufhat wäre ich nicht in dieser Geschwindigkeit durchgekommen.

00:32:09: also klare Ansage an dieser Stelle wer Claude Code oder jedes andere Tool, was dafür herangezogen werden kann.

00:32:16: Ob es jetzt Codex, Antigravity oder was auch immer ist... Oder irgendein Vibecoding-Tool.

00:32:24: Wer das benutzt und glaubt am nächsten Tag eine fettige Migration zu haben, der irt sich leidern!

00:32:30: Die KI nimmt dir nicht das Denken ab Sie nimmt dir das Tippen ab Und das ist schon mal sehr viel wert.

00:32:36: Aber den Architektenhut musst du trotzdem aufhaben.

00:32:40: So wir nähern uns dem Ende für heute Damit du weißt, was er dich in zwei Wochen dann in Folge B erwartet.

00:32:47: Hier kurz eine kleine Vorschau... In Folge B gehe ich für dich ins Eingemachte oder ein bisschen mehr ins EINGEMACHTE Wie die ganzen Blogposts samt aller Bilder rübergekommen sind welche Integration wir gebraucht haben also welche Tools bei uns dort eine Rolle gespielt haben klickte Cookie Consents, Zeo, Tracking.

00:33:14: Welche fiesen Knackpunkte beim Go Live gewartet haben von Mobile Bugs über den DNS Switch bis zu Seiten die wir schlicht übersehen hatten.

00:33:27: und am Ende dann mal ein ehrliches Fazit für wen ist dieser Weg das Richtige?

00:33:31: Und für wen definitiv nicht.

00:33:34: wenn dich das Thema gepackt hat abonniere gerne das KI-Trip-Wildchen also abonniert den Podcast dann verpasst du die nächste Folge definitiv nicht.

00:33:48: Und genau, damit verabschiede ich mich für heute und wir hören uns in zwei Wochen wieder.

00:33:55: ganz lieben Gruß!

00:34:11: Tüpfelchen mit ue geschrieben.

00:34:14: Ich schreibe das Ganze natürlich auch noch einmal für dich in die Show Notes, damit du das dort auch sehen kannst.

00:34:21: Wolltest du jemanden kennen?

00:34:22: Sei es ein Pferdemensch vielleicht sogar du selbst oder auch in Unternehmen der, die oder dass in unserer Pferdewelt aktiv ist und wo KI bereits eine wichtige Rolle spielt dann schreib mich gerne an.

00:34:35: wir können uns super gerne zu dem spannenden Thema einmal austauschen.

00:34:40: Ich sage auf Wiederhören und bis zum nächsten Mal.

00:34:43: Macht's gut!