{"id":25958,"date":"2026-03-19T11:13:25","date_gmt":"2026-03-19T10:13:25","guid":{"rendered":"https:\/\/nowtec.solutions\/?p=25958"},"modified":"2026-03-19T11:13:29","modified_gmt":"2026-03-19T10:13:29","slug":"website-erstellung-fuer-dummies-so-baust-du-deine-seite-lokal-ganz-ohne-wordpress-und-co","status":"publish","type":"post","link":"https:\/\/nowtec.solutions\/de\/blog\/website-erstellung-fuer-dummies-so-baust-du-deine-seite-lokal-ganz-ohne-wordpress-und-co\/","title":{"rendered":"Website-Erstellung f\u00fcr Dummies: So baust du deine Seite lokal \u2013 ganz ohne WordPress und Co."},"content":{"rendered":"\n

Eine Gewohnheit der letzten 20 Jahre wird gerade langsam, aber sicher obsolet: Der Gedanke „Ich brauche eine Website, also schreibe ich ein Konzept, gehe damit zu einer Webagentur oder einem Designer, warte ein paar Wochen (oder Monate) und irgendwann habe ich dann meine Website.“ <\/p>\n\n\n\n

Dieser Prozess war teuer, starr und hat NGOs und kleine Organisationen oft wertvolle Zeit gekostet. Wenn du heute schnell auf eine politische Entwicklung reagieren oder eine Kampagne launchen musst, darf dich deine Technologie nicht ausbremsen. Und wenn du dann endlich live bist, k\u00e4mpfst du oft mit \u00fcberladenen WordPress-Installationen, st\u00e4ndigen Sicherheitsupdates und Datenbankfehlern.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dabei geht es heute ganz anders. Du kannst eine moderne, pfeilschnelle Website komplett lokal auf deinem eigenen Rechner bauen \u2013 ohne Datenbank, ohne US-Cloud-Zwang, ohne wochenlanges Warten auf eine Agentur und ohne dich durch endlose CMS-Men\u00fcs klicken zu m\u00fcssen. <\/p>\n\n\n\n

Wie das geht? Mit ein paar einfachen Werkzeugen und ein bisschen Neugier. Wir zeigen dir Schritt f\u00fcr Schritt, wie du die Kontrolle \u00fcber deine Webpr\u00e4senz zur\u00fcckgewinnst.<\/p>\n\n\n\n

Das Handwerkszeug: Was du brauchst<\/h2>\n\n\n\n

Bevor wir loslegen, r\u00e4umen wir mit ein paar Begriffen auf, die oft komplizierter klingen, als sie sind.<\/p>\n\n\n\n

Das Terminal: Deine direkte Leitung zum Computer<\/h3>\n\n\n\n

Wenn du an „Hacker“ im Film denkst, siehst du meistens Leute, die wild auf schwarzen Bildschirmen mit gr\u00fcnem Text herumtippen. Das ist das Terminal (oder die Kommandozeile). Es ist im Grunde nichts anderes als ein Chat-Fenster zwischen dir und deinem Computer. Anstatt mit der Maus auf Ordner zu klicken, schreibst du Befehle wie „Erstelle hier einen neuen Ordner“ oder „Starte dieses Programm“. Das Terminal ist auf jedem Mac (heisst dort „Terminal“) und Windows-PC (heisst „Eingabeaufforderung“ oder „PowerShell“) bereits vorinstalliert. Es ist der direkteste und schnellste Weg, deinem Rechner zu sagen, was er tun soll.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

z.B. OpenCode (App oder CLI): Dein intelligenter Assistent<\/h3>\n\n\n\n

Fr\u00fcher musstest du jede Zeile Code selbst schreiben oder teuer einkaufen. Heute hilft dir K\u00fcnstliche Intelligenz dabei. OpenCode ist eine Plattform, die dir einen KI-Agenten zur Seite stellt, der Code f\u00fcr dich schreibt. Du kannst OpenCode entweder als App in deinem Browser nutzen oder als CLI (Command Line Interface). Ein CLI ist ein kleines Programm, das du direkt in deinem Terminal ausf\u00fchrst. Du sagst dem CLI im Terminal: „Baue mir eine Startseite mit einem grossen Bild und drei Textbl\u00f6cken“, und die KI erledigt die harte Arbeit f\u00fcr dich.<\/p>\n\n\n\n

Der API-Key: Dein digitaler Ausweis f\u00fcr die KI<\/h3>\n\n\n\n

Hier gibt es oft ein Missverst\u00e4ndnis: Der API-Key kommt *nicht* von OpenCode selbst. OpenCode ist nur das Werkzeug (der Agent). Das eigentliche „Gehirn“, das den Code schreibt, kommt von Anbietern grosser KI-Modelle. <\/p>\n\n\n\n

Ein API-Key (Application Programming Interface Key) ist wie ein digitaler T\u00fcrsteher-Ausweis, den du dir direkt bei diesen Anbietern holst. Es ist eine lange, kryptische Zeichenfolge (z.B. `sk-12345abcdef`). Wenn dein lokales OpenCode nun Code generieren soll, klopft es mit diesem Ausweis beim Server des Modell-Anbieters an. Du brauchst ihn, damit dein lokales Werkzeug die Rechenpower der KI nutzen darf \u2013 und damit abgerechnet werden kann.<\/p>\n\n\n\n

Welches „Gehirn“ soll ich nutzen? Der grosse Modell-Vergleich<\/h2>\n\n\n\n

Da du den API-Key direkt vom Anbieter beziehst, hast du die Qual der Wahl. Jedes Modell hat seine eigenen St\u00e4rken, Schw\u00e4chen und Preise. Hier ist eine ehrliche \u00dcbersicht der wichtigsten Modelle f\u00fcr Entwickler (Stand 2026):<\/p>\n\n\n\n

Modell-Anbieter<\/td>Die besten Modelle<\/td>St\u00e4rken<\/td><\/tr>
Anthropic (Claude)<\/td>Claude Opus 4.6 , Sonnet 4.6<\/td>Der aktuelle Goldstandard f\u00fcr Code. Versteht komplexe Zusammenh\u00e4nge brillant, schreibt extrem sauberen Code und hat einen riesigen Kontext (kann ganze Projekte auf einmal lesen).<\/td><\/tr>
OpenAI (ChatGPT)<\/td>GPT-4o \/ o1 \/ o3<\/td>Der Allrounder. Sehr schnell (GPT-4o), extrem gut dokumentiert und die „o“-Modelle (wie o3) sind Meister im L\u00f6sen extrem harter, logischer Programmierprobleme.<\/td><\/tr>
DeepSeek<\/td>
DeepSeek V3 \/ R1<\/td>		Der Preis-Leistungs-Brecher. Liefert oft GPT-4-Qualit\u00e4t zu einem Bruchteil des Preises (oft nur 10% der Kosten). Open-Source-Ansatz.<\/td><\/tr>
Mistral AI<\/td>Mistral Large \/ Le Chat<\/td>Die europ\u00e4ische Hoffnung. Kommt aus Frankreich, exzellenter Datenschutz, sehr effizient und schnell. Bietet Open-Source-Modelle an, die man selbst hosten kann.<\/td><\/tr>
MiniMax<\/td>MiniMax M2.7 \/ MoE<\/td>Der asiatische Herausforderer. Extrem lange Kontextfenster, rasend schnell und sehr g\u00fcnstig. Sehr stark in Textverarbeitung und Agenten-Workflows.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Unser Tipp f\u00fcr den Start: Hol dir einen API-Key f\u00fcr **Claude Sonnet** (f\u00fcr die beste Code-Qualit\u00e4t) oder **Mistral** (wenn europ\u00e4ischer Datenschutz Prio 1 hat). Hinterlege diesen Key in OpenCode und leg los. (Falls du eine komplett lokale Alternative suchst und einen sehr starken Rechner hast, kannst du auch Modelle via **Ollama** lokal bei dir laufen lassen \u2013 dann verlassen deine Prompts deinen Rechner nie).<\/p>\n\n\n\n

Schritt f\u00fcr Schritt: Deine erste Business Page<\/h2>\n\n\n\n

Wir bauen jetzt eine einfache, aber professionelle Seite. Du musst daf\u00fcr keine Programmiersprachen fliessend sprechen. Dein KI-Assistent \u00fcbernimmt das \u00dcbersetzen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

1. Das Fundament legen<\/h3>\n\n\n\n

\u00d6ffne dein Terminal. Wir erstellen zuerst einen Ordner f\u00fcr dein Projekt und wechseln hinein. Tippe (und dr\u00fccke nach jeder Zeile Enter):<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

to copy: mkdir meine-neue-website cd meine-neue-website<\/p>\n\n\n\n

Jetzt bist du im richtigen Ordner.<\/p>\n\n\n\n

2. Den Assistenten starten<\/h3>\n\n\n\n

Wenn du das OpenCode CLI installiert hast, startest du es jetzt direkt in diesem Ordner. Du wirst nach deinem API-Key gefragt (den du dir z.B. bei Anthropic oder Mistral besorgt hast). F\u00fcge ihn ein.<\/p>\n\n\n\n

3. Den Prompt formulieren<\/h3>\n\n\n\n

Jetzt kommt der wichtigste Teil: Du musst deinem Assistenten genau sagen, was du willst. Ein guter „Prompt“ (Anweisung) ist das halbe Leben. Schreibe im OpenCode-Chat (oder CLI) etwas wie:<\/p>\n\n\n\n

„Erstelle eine moderne, responsive Landing Page f\u00fcr eine Schweizer NGO. Nutze HTML und Tailwind CSS f\u00fcr das Design. Die Seite braucht eine Navigation oben (Home, \u00dcber uns, Spenden), einen grossen Hero-Bereich mit einem Platzhalter-Bild und dem Titel ‚Gemeinsam f\u00fcr eine bessere Zukunft‘, darunter drei Spalten f\u00fcr unsere Kernprojekte und ganz unten einen Footer mit Kontaktangaben. Die Hauptfarbe soll ein dunkles Blau sein.“<\/p>\n\n\n\n

4. Das Ergebnis pr\u00fcfen<\/h3>\n\n\n\n

Der Agent rattert los und erstellt die n\u00f6tigen Dateien (meist eine index.html). Um dir das Ergebnis anzusehen, brauchst du keinen Server im Internet. Du kannst die index.html einfach per Doppelklick in deinem normalen Webbrowser \u00f6ffnen.<\/p>\n\n\n\n

5. Iterieren und Anpassen<\/h3>\n\n\n\n

Dir gef\u00e4llt das Blau nicht? Sag es einfach deinem Agenten: „\u00c4ndere die Hauptfarbe auf ein sattes Gr\u00fcn und mach die \u00dcberschrift im Hero-Bereich gr\u00f6sser.“ Der Agent passt den Code an, du l\u00e4dst die Seite in deinem Browser neu und siehst sofort das Ergebnis. Das ist der riesige Vorteil der lokalen Entwicklung: Du hast null Wartezeit.<\/p>\n\n\n\n

Design und Bilder: Profi-Optik auf Knopfdruck<\/h2>\n\n\n\n

Eine Website ohne gute Bilder wirkt leer. Fr\u00fcher hast du Stunden auf Stockfoto-Plattformen verbracht, Bilder heruntergeladen, zugeschnitten und manuell in deinen Code eingef\u00fcgt. Auch das geht heute smarter \u2013 direkt \u00fcber eine API.<\/p>\n\n\n\n

Ein hervorragendes Beispiel daf\u00fcr ist die Freepik API. Freepik bietet eine riesige Bibliothek an Vektorgrafiken, Icons und hochaufl\u00f6senden Fotos. Statt die Website zu durchsuchen, kannst du deinem OpenCode-Agenten sagen, er soll die Bilder automatisch f\u00fcr dich holen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So integrierst du professionelle Bilder:<\/p>\n\n\n\n

1.Freepik API-Key holen: Melde dich auf developer.freepik.com an. Du bekommst sofort einen kostenlosen API-Key (oft sogar mit einem kleinen Startguthaben von 5 USD).<\/p>\n\n\n\n

2.Den Agenten anweisen: Gib deinem OpenCode-Agenten folgenden Prompt:<\/p>\n\n\n\n

„Nutze die Freepik API (mein Key ist: [Dein Key]). Suche \u00fcber den Endpunkt \/v1\/resources nach dem Begriff ‚Teamwork Office‘. Nimm das erste relevante Bild und binde die URL direkt in den Hero-Bereich meiner Website ein.“<\/p>\n\n\n\n

3.Das Ergebnis: Der Agent schreibt nicht nur den Code, er kontaktiert im Hintergrund die Freepik-Server, sucht das Bild, holt sich den Link und setzt ihn perfekt formatiert in dein HTML ein.<\/p>\n\n\n\n

Das Beste daran: Du zahlst bei solchen APIs meist nur „Pay-per-use“ \u2013 also nur f\u00fcr die Bilder, die du wirklich abrufst. F\u00fcr kleine Projekte oder Prototypen reicht das kostenlose Startguthaben oft v\u00f6llig aus.<\/p>\n\n\n\n

Advanced: Automatische Mehrsprachigkeit mit der DeepL API<\/h2>\n\n\n\n

Die Schweiz ist mehrsprachig, und deine Kampagnen sollten es auch sein. Anstatt jede Seite m\u00fchsam von Hand zu \u00fcbersetzen, k\u00f6nnen wir das automatisieren. Hier kommt wieder ein API-Key ins Spiel \u2013 diesmal von DeepL, einem der besten \u00dcbersetzungstools auf dem Markt.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Wenn du deine Seite lokal baust, kannst du ein kleines Skript schreiben, das deine deutschen Texte nimmt, sie \u00fcber die DeepL-API an deren Server schickt und die franz\u00f6sische \u00dcbersetzung zur\u00fcckbekommt.<\/p>\n\n\n\n

So gehst du vor:<\/p>\n\n\n\n

1.  **DeepL Account anlegen:** Besorge dir einen API-Key auf der DeepL-Website.<\/p>\n\n\n\n

2.  **Dem Agenten den Auftrag geben:** Sag deinem OpenCode-Agenten: „Schreibe mir ein kleines Python-Skript. Es soll alle Texte aus meiner `index.html` lesen, sie \u00fcber die DeepL API (hier ist mein Key: [Dein Key]) auf Franz\u00f6sisch \u00fcbersetzen und eine neue Datei `index-fr.html` speichern.“<\/p>\n\n\n\n

3.  **Skript ausf\u00fchren:** Du f\u00fchrst das Skript in deinem Terminal aus (`python uebersetzen.py`). Innerhalb von Sekunden hast du eine perfekt \u00fcbersetzte, zweite Version deiner Website.<\/p>\n\n\n\n

Das ist echte digitale Souver\u00e4nit\u00e4t. Du bist nicht auf teure \u00dcbersetzungs-Plugins in WordPress angewiesen, die deine Datenbank zum\u00fcllen und Daten an Drittanbieter schicken. Du hast die volle Kontrolle \u00fcber deinen Code, deine Texte und deine \u00dcbersetzungen \u2013 alles sicher auf deinem eigenen Rechner.<\/p>\n\n\n\n

Probier es aus. Es braucht am Anfang etwas \u00dcberwindung, das Terminal zu \u00f6ffnen. Aber sobald du den Dreh raus hast, wirst du dich fragen, warum du dich jemals mit langsamen, komplizierten CMS-Systemen herumgeschlagen hast.<\/p>\n\n\n\n

***<\/p>\n\n\n\n

Im n\u00e4chsten Blogbeitrag sehen wir uns dann an, wie wir unsere lokal gebaute Webseite auf einen Webserver kriegen und sie \u00f6ffentlich zug\u00e4nglich machen.<\/p>\n\n\n\n

*Dieser Beitrag wurde unter teilweiser Verwendung von KI-Tools erstellt. Alle Inhalte wurden sorgf\u00e4ltig gepr\u00fcft, \u00fcberarbeitet und liegen in unserer Verantwortung.<\/p>\n","protected":false},"excerpt":{"rendered":"

Eine Gewohnheit der letzten 20 Jahre wird gerade langsam, aber sicher obsolet: Der Gedanke „Ich brauche eine Website, also schreibe ich ein Konzept, gehe damit zu einer Webagentur oder einem Designer, warte ein paar Wochen (oder Monate) und irgendwann habe ich dann meine Website.“  Dieser Prozess war teuer, starr und hat NGOs und kleine Organisationen […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[42],"tags":[135,136,134,137],"class_list":["post-25958","post","type-post","status-publish","format-standard","hentry","category-technologietrends-und-innovationen","tag-ai","tag-diy","tag-opencode","tag-vibecoding"],"acf":[],"_links":{"self":[{"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/posts\/25958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/comments?post=25958"}],"version-history":[{"count":1,"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/posts\/25958\/revisions"}],"predecessor-version":[{"id":25973,"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/posts\/25958\/revisions\/25973"}],"wp:attachment":[{"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/media?parent=25958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/categories?post=25958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nowtec.solutions\/de\/wp-json\/wp\/v2\/tags?post=25958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}