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 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ämpfst du oft mit überladenen WordPress-Installationen, ständigen Sicherheitsupdates und Datenbankfehlern.
Dabei geht es heute ganz anders. Du kannst eine moderne, pfeilschnelle Website komplett lokal auf deinem eigenen Rechner bauen – ohne Datenbank, ohne US-Cloud-Zwang, ohne wochenlanges Warten auf eine Agentur und ohne dich durch endlose CMS-Menüs klicken zu müssen.
Wie das geht? Mit ein paar einfachen Werkzeugen und ein bisschen Neugier. Wir zeigen dir Schritt für Schritt, wie du die Kontrolle über deine Webpräsenz zurückgewinnst.
Das Handwerkszeug: Was du brauchst
Bevor wir loslegen, räumen wir mit ein paar Begriffen auf, die oft komplizierter klingen, als sie sind.
Das Terminal: Deine direkte Leitung zum Computer
Wenn du an „Hacker“ im Film denkst, siehst du meistens Leute, die wild auf schwarzen Bildschirmen mit grünem 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.
z.B. OpenCode (App oder CLI): Dein intelligenter Assistent
Früher musstest du jede Zeile Code selbst schreiben oder teuer einkaufen. Heute hilft dir Künstliche Intelligenz dabei. OpenCode ist eine Plattform, die dir einen KI-Agenten zur Seite stellt, der Code für 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ührst. Du sagst dem CLI im Terminal: „Baue mir eine Startseite mit einem grossen Bild und drei Textblöcken“, und die KI erledigt die harte Arbeit für dich.
Der API-Key: Dein digitaler Ausweis für die KI
Hier gibt es oft ein Missverständnis: 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.
Ein API-Key (Application Programming Interface Key) ist wie ein digitaler Türsteher-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 – und damit abgerechnet werden kann.
Welches „Gehirn“ soll ich nutzen? Der grosse Modell-Vergleich
Da du den API-Key direkt vom Anbieter beziehst, hast du die Qual der Wahl. Jedes Modell hat seine eigenen Stärken, Schwächen und Preise. Hier ist eine ehrliche Übersicht der wichtigsten Modelle für Entwickler (Stand 2026):
| Modell-Anbieter | Die besten Modelle | Stärken |
| Anthropic (Claude) | Claude Opus 4.6 , Sonnet 4.6 | Der aktuelle Goldstandard für Code. Versteht komplexe Zusammenhänge brillant, schreibt extrem sauberen Code und hat einen riesigen Kontext (kann ganze Projekte auf einmal lesen). |
| OpenAI (ChatGPT) | GPT-4o / o1 / o3 | Der Allrounder. Sehr schnell (GPT-4o), extrem gut dokumentiert und die „o“-Modelle (wie o3) sind Meister im Lösen extrem harter, logischer Programmierprobleme. |
| DeepSeek | DeepSeek V3 / R1 | Der Preis-Leistungs-Brecher. Liefert oft GPT-4-Qualität zu einem Bruchteil des Preises (oft nur 10% der Kosten). Open-Source-Ansatz. |
| Mistral AI | Mistral Large / Le Chat | Die europäische Hoffnung. Kommt aus Frankreich, exzellenter Datenschutz, sehr effizient und schnell. Bietet Open-Source-Modelle an, die man selbst hosten kann. |
| MiniMax | MiniMax M2.7 / MoE | Der asiatische Herausforderer. Extrem lange Kontextfenster, rasend schnell und sehr günstig. Sehr stark in Textverarbeitung und Agenten-Workflows. |
Unser Tipp für den Start: Hol dir einen API-Key für **Claude Sonnet** (für die beste Code-Qualität) oder **Mistral** (wenn europäischer 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 – dann verlassen deine Prompts deinen Rechner nie).
Schritt für Schritt: Deine erste Business Page
Wir bauen jetzt eine einfache, aber professionelle Seite. Du musst dafür keine Programmiersprachen fliessend sprechen. Dein KI-Assistent übernimmt das Übersetzen.
1. Das Fundament legen
Öffne dein Terminal. Wir erstellen zuerst einen Ordner für dein Projekt und wechseln hinein. Tippe (und drücke nach jeder Zeile Enter):
to copy: mkdir meine-neue-website cd meine-neue-website
Jetzt bist du im richtigen Ordner.
2. Den Assistenten starten
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üge ihn ein.
3. Den Prompt formulieren
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:
„Erstelle eine moderne, responsive Landing Page für eine Schweizer NGO. Nutze HTML und Tailwind CSS für das Design. Die Seite braucht eine Navigation oben (Home, Über uns, Spenden), einen grossen Hero-Bereich mit einem Platzhalter-Bild und dem Titel ‚Gemeinsam für eine bessere Zukunft‘, darunter drei Spalten für unsere Kernprojekte und ganz unten einen Footer mit Kontaktangaben. Die Hauptfarbe soll ein dunkles Blau sein.“
4. Das Ergebnis prüfen
Der Agent rattert los und erstellt die nötigen 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 öffnen.
5. Iterieren und Anpassen
Dir gefällt das Blau nicht? Sag es einfach deinem Agenten: „Ändere die Hauptfarbe auf ein sattes Grün und mach die Überschrift im Hero-Bereich grösser.“ Der Agent passt den Code an, du lädst die Seite in deinem Browser neu und siehst sofort das Ergebnis. Das ist der riesige Vorteil der lokalen Entwicklung: Du hast null Wartezeit.
Design und Bilder: Profi-Optik auf Knopfdruck
Eine Website ohne gute Bilder wirkt leer. Früher hast du Stunden auf Stockfoto-Plattformen verbracht, Bilder heruntergeladen, zugeschnitten und manuell in deinen Code eingefügt. Auch das geht heute smarter – direkt über eine API.
Ein hervorragendes Beispiel dafür ist die Freepik API. Freepik bietet eine riesige Bibliothek an Vektorgrafiken, Icons und hochauflösenden Fotos. Statt die Website zu durchsuchen, kannst du deinem OpenCode-Agenten sagen, er soll die Bilder automatisch für dich holen.
So integrierst du professionelle Bilder:
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).
2.Den Agenten anweisen: Gib deinem OpenCode-Agenten folgenden Prompt:
„Nutze die Freepik API (mein Key ist: [Dein Key]). Suche über 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.“
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.
Das Beste daran: Du zahlst bei solchen APIs meist nur „Pay-per-use“ – also nur für die Bilder, die du wirklich abrufst. Für kleine Projekte oder Prototypen reicht das kostenlose Startguthaben oft völlig aus.
Advanced: Automatische Mehrsprachigkeit mit der DeepL API
Die Schweiz ist mehrsprachig, und deine Kampagnen sollten es auch sein. Anstatt jede Seite mühsam von Hand zu übersetzen, können wir das automatisieren. Hier kommt wieder ein API-Key ins Spiel – diesmal von DeepL, einem der besten Übersetzungstools auf dem Markt.
Wenn du deine Seite lokal baust, kannst du ein kleines Skript schreiben, das deine deutschen Texte nimmt, sie über die DeepL-API an deren Server schickt und die französische Übersetzung zurückbekommt.
So gehst du vor:
1. **DeepL Account anlegen:** Besorge dir einen API-Key auf der DeepL-Website.
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 über die DeepL API (hier ist mein Key: [Dein Key]) auf Französisch übersetzen und eine neue Datei `index-fr.html` speichern.“
3. **Skript ausführen:** Du führst das Skript in deinem Terminal aus (`python uebersetzen.py`). Innerhalb von Sekunden hast du eine perfekt übersetzte, zweite Version deiner Website.
Das ist echte digitale Souveränität. Du bist nicht auf teure Übersetzungs-Plugins in WordPress angewiesen, die deine Datenbank zumüllen und Daten an Drittanbieter schicken. Du hast die volle Kontrolle über deinen Code, deine Texte und deine Übersetzungen – alles sicher auf deinem eigenen Rechner.
Probier es aus. Es braucht am Anfang etwas Überwindung, das Terminal zu öffnen. Aber sobald du den Dreh raus hast, wirst du dich fragen, warum du dich jemals mit langsamen, komplizierten CMS-Systemen herumgeschlagen hast.
***
Im nächsten Blogbeitrag sehen wir uns dann an, wie wir unsere lokal gebaute Webseite auf einen Webserver kriegen und sie öffentlich zugänglich machen.
*Dieser Beitrag wurde unter teilweiser Verwendung von KI-Tools erstellt. Alle Inhalte wurden sorgfältig geprüft, überarbeitet und liegen in unserer Verantwortung.