Neues Website-Design mit Astro und Claude
Die Website ist von Canva zu Astro umgezogen. Ich beschreibe Schritt für Schritt, wie das neue Design mit Claude als Entwicklungspartner entstanden ist.
Munot Informatik hat ein komplett neues Website-Design. Was vor einigen Wochen noch eine einfache Canva-Seite war, ist jetzt eine vollständige Website mit eigener Navigation in der Seitenleiste, 12 Leistungsseiten, einem Blog, Kundenstimmen und optimiertem SEO. In diesem Beitrag beschreibe ich offen und Schritt für Schritt, wie das entstanden ist.
Warum überhaupt ein neues Design
Die erste Version auf Canva hat ihren Zweck erfüllt, weil sie schnell online und übersichtlich war. Mit der Zeit wurde aber klar, dass Canva für das, was ich mir vorstellte, zu begrenzt ist. Es fehlten eine individuelle Navigation, eigene Unterseiten für jede Leistung und ein Blog.
Ich wollte deshalb eine Website, die wirklich zu Munot Informatik passt.
Schritt 1: Astro-Themes entdecken
Zuerst habe ich einen geeigneten Ausgangspunkt gesucht. Auf astro.build/themes gibt es eine grosse Auswahl an kostenlosen und kostenpflichtigen Themes für Astro, ein modernes Framework für statische Websites.
Ich habe mich für ein professionelles Marketing-Theme entschieden, das optisch bereits viel hergab, mit einem dunklen Design, schönen Animationen und einer klaren Struktur. Inhaltlich war es jedoch für ein privates Beteiligungsunternehmen ausgelegt und passte damit überhaupt nicht zu einer Computerhilfe in Schaffhausen. Von diesem Stand aus habe ich angefangen.
Schritt 2: Claude als Entwicklungspartner
Statt einen Entwickler zu engagieren oder mich durch stundenlange Tutorials zu arbeiten, habe ich Claude, das KI-Modell von Anthropic, als Entwicklungspartner eingesetzt.
Das Prinzip war einfach, denn ich habe beschrieben, was ich möchte, und Claude hat es umgesetzt. Danach habe ich das Ergebnis im Browser überprüft und eine Rückmeldung gegeben. Was dabei entstanden ist, hat mich ehrlich gesagt überrascht.
Schritt 3: Inhalte ersetzen
Der erste grosse Schritt war, alle Inhalte zu ersetzen. Das Theme enthielt Texte über Firmenübernahmen und Investoren, die ich durch echte Informationen über Munot Informatik ersetzt habe. Dazu gehörten:
- die Seite über mich mit 20 Jahren IT-Erfahrung, 7 Jahren bei Swisscom und dem EFZ als ICT-Fachmann
- 12 Leistungsseiten mit jeweils eigenen Beschreibungen und Unterseiten
- echte Kundenstimmen, darunter Bewertungen aus meiner Zeit bei Swisscom
- eine Kontaktseite mit WhatsApp, RustDesk-Fernwartung und einem Link zu den Google-Bewertungen
Schritt 4: Design anpassen
Die ursprüngliche Farbe des Themes war Gold, was zu einer Finanzfirma passt, aber nicht zu einer Computerhilfe. Ich habe sie deshalb auf ein klares Blau geändert, das besser zur Technik passt.
Zudem habe ich das Logo angepasst und die Navigation in der Seitenleiste überarbeitet. Alle deutschen Texte habe ich auf eine persönliche Ich-Form umgestellt, weil Munot Informatik ein Ein-Mann-Betrieb ist und kein Unternehmen mit Team.
Schritt 5: SEO optimieren
Eine schöne Website bringt wenig, wenn sie niemand findet. Deshalb habe ich alle Meta-Beschreibungen auf unter 160 Zeichen gekürzt und mit lokalen Suchbegriffen versehen. Dazu kamen Schema.org-Daten mit Öffnungszeiten und Adresse, eine robots.txt und hreflang-Tags für Schweizer Deutsch.
Jede Leistungsseite hat jetzt einen eigenen, für Suchmaschinen optimierten Titel und eine eigene Beschreibung.
Schritt 6: Hosting mit Cloudflare
Die fertige Website läuft kostenlos auf Cloudflare, wobei das Deployment automatisch geschieht. Jedes Mal, wenn ich eine Änderung zu GitHub pushe, wird die Website neu gebaut und innerhalb von ein bis zwei Minuten veröffentlicht.
Die Domain munot-informatik.ch ist bei Canva registriert und zeigt über einen DNS-Eintrag auf Cloudflare, wobei SSL-Zertifikat und CDN inbegriffen sind.
Was ich gelernt habe
Am wichtigsten finde ich, dass man heute kein Entwickler sein muss, um eine professionelle Website zu haben. Mit einem guten Ausgangspunkt wie einem passenden Astro-Theme, einem Werkzeug wie Claude für die Umsetzung und klaren Rückmeldungen dazu, was man möchte und was nicht, entsteht eine Website, die sich wirklich nach einem selbst anfühlt.
Der Prozess hat Zeit gebraucht, weil viele Durchgänge und kleine Korrekturen nötig waren. Mit dem Ergebnis bin ich aber sehr zufrieden.
Falls Sie für Ihr KMU oder Ihr Projekt ebenfalls eine einfache, professionelle Website suchen, finden Sie unter Webdesign mehr dazu, denn auch das gehört zu den Leistungen von Munot Informatik.