Versionsverwaltung für Websites: Wie wir Änderungen im Griff behalten

Nehmen wir eine Feedbackrunde: Wir haben ein Foto ausgetauscht, den Bildausschnitt angepasst und die Texte daneben überarbeitet. Beim Vergleich der Entwürfe gefällt dir der frühere Ausschnitt besser. Die neuen Texte passen und sollen bleiben.

«Können wir beim Foto wieder die vorige Variante nehmen?»

Für diese Änderung können wir auf den gespeicherten Stand zugreifen und den früheren Ausschnitt technisch wiederherstellen. Die neuen Texte bleiben erhalten. Wir wählen aus, was zurückkommen soll. Danach stellt das Versionsverwaltungssystem die betreffenden Dateien automatisch wieder her. Anschliessend prüfen wir die Kombination in der Vorschau.

Bei Kröner & Starke nutzen wir dafür Git und GitHub. Diese Versionsverwaltung hilft uns, Änderungen schneller zuzuordnen, frühere Varianten wieder einzusetzen und im Team effizient zusammenzuarbeiten. Und sie macht den Projektcode zugänglich: Auf Wunsch kannst du selbst oder ein anderer Entwicklungspartner die vollständige Verwaltung übernehmen.

Wie das zusammenhängt, lässt sich an unserem Foto-Beispiel erklären. Dasselbe Prinzip nutzen wir auch für die Gestaltung und Entwicklung von Shopify-Shops.

Was wir an einer Website festhalten

Eine Website besteht aus Dateien und, je nach System, zusätzlichen Daten. In Dateien stehen beispielsweise die Seitenstruktur, Texte, Gestaltung, Funktionen und Verweise auf Bilder. Wenn wir diese Dateien bearbeiten, verändert sich das Ergebnis im Browser.

Die versionierten Projektdateien liegen in einem sogenannten Repository. Darin speichern wir zusammengehörige Entwicklungsschritte mit einer Beschreibung. Ein solcher gespeicherter Stand heisst Commit. Er hält fest, wie die erfassten Dateien zu diesem Zeitpunkt aussahen und welcher vorherige Stand dazugehört. Das Prinzip beschreibt auch das offizielle Git-Handbuch.

Wichtig ist die Einteilung dieser Schritte. Ein geänderter Bildausschnitt und ein neu aufgebauter Leistungsbereich sind unterschiedliche Aufgaben. Wenn sie getrennt und verständlich beschrieben gespeichert sind, lassen sie sich später leichter zuordnen.

Eine Beschreibung wie «Bildausschnitt auf der Startseite angepasst» hilft dabei mehr als «Update». Wer den Verlauf öffnet, versteht schneller, was passiert ist. Und bei einer Rückfrage können wir am passenden Punkt ansetzen.

Wir speichern dafür bewusst sinnvolle Zwischenstände. Auch eine im Editor gespeicherte Datei wird erst durch einen Commit Teil dieses Verlaufs.

Git speichert die Stände, GitHub hält sie gemeinsam verfügbar

Die beiden Namen tauchen oft gemeinsam auf. Sie haben unterschiedliche Aufgaben.

Git speichert die Entwicklungsschritte und stellt frühere Dateien wieder her. Es arbeitet mit der lokalen Projektkopie auf unserem Computer. Wenn wir den gewünschten gespeicherten Stand auswählen, kann Git die damaligen Dateien daraus wiederherstellen. Beim Bildausschnitt hilft uns das, die passende Datei oder Einstellung direkt zurückzuholen. Wir müssen die frühere Variante dafür nicht aus der Erinnerung neu aufbauen.

GitHub ist die gemeinsame Plattform für den Projektcode und seinen Verlauf. Dorthin übertragen wir die gespeicherten Änderungen. Die berechtigten Teammitglieder können den aktuellen Stand abrufen und ihre Arbeit wieder mit dem gemeinsamen Projekt zusammenführen. Gleichzeitig liegt dort eine zusätzliche Kopie der übertragenen Projektdateien samt Versionsverlauf.

In diesem Projektbestand sichern wir die Dateien, die wir für die Website versionieren: beispielsweise Code, Texte, Bilder und die zugehörigen Darstellungseinstellungen. Auch frühere gespeicherte Fassungen bleiben im Verlauf abrufbar. Der lokale Projektstand und die an GitHub übertragenen Versionen geben uns mehrere Kopien dieser Dateien.

Für dich bedeutet das vor allem: Wir finden die relevante Änderung schneller, können auf eine vorhandene Lösung zurückgreifen und eine Aufgabe im Team geordnet weitergeben. Du kannst dein Feedback zu Fotos und Texten geben, während wir die technische Zuordnung und Umsetzung übernehmen.

Einen früheren Bildausschnitt übernehmen, die neuen Texte behalten

Zurück zu unserem Beispiel. Zwischen dem ersten Entwurf und der aktuellen Vorschau können mehrere Dinge passiert sein: Ein Foto wurde ersetzt, eine Beschreibung präzisiert, ein weiterer Abschnitt ergänzt. Jetzt geht es um den früheren Bildausschnitt.

Wir sehen zuerst nach, welche Dateien dafür zuständig sind. Ein Ausschnitt kann als eigene Bilddatei vorliegen. Er kann auch durch eine Einstellung entstehen, etwa durch die Position des Bildes innerhalb seines Rahmens. Diese Unterscheidung entscheidet, was wir übernehmen.

Dann vergleichen wir die gespeicherten Stände. Für Text und Code zeigt ein sogenannter Diff die veränderten Zeilen. Bei Bildern betrachten wir die betreffenden Dateien und das Ergebnis in der Seite. So lässt sich nachvollziehen, ob das Motiv selbst, die Datei oder die Darstellung geändert wurde.

Jetzt wählen wir die passende Bilddatei oder Einstellung aus dem früheren Stand aus. Git übernimmt die technische Wiederherstellung; die aktuellen Texte lassen wir bestehen. Je nach Aufgabe können wir eine komplette gespeicherte Version, einzelne Dateien oder ausgewählte Text- und Codeänderungen zurückholen. Die Möglichkeiten zum gezielten Wiederherstellen sind im Git-Handbuch dokumentiert.

Danach prüfen wir die Seite erneut. Passt der Ausschnitt zum inzwischen geänderten Text? Bleibt das Motiv auf dem Handy gut sichtbar? Sind Bildgrösse und Ladeverhalten weiterhin passend? Auch eine Rückkehr zu einem früheren Detail wird als neuer, nachvollziehbarer Schritt festgehalten.

Du kannst dich damit auf die Wirkung konzentrieren: welches Bild besser passt, welche Formulierung dein Angebot klarer erklärt und welche Variante sich nach deinem Unternehmen anfühlt. Wir kümmern uns darum, die gewünschte Kombination technisch sauber zusammenzubringen. Wie diese Abstimmung in den gesamten Ablauf passt, zeigt unser Einblick zum Website-Projekt.

Unser Team kann Änderungen effizienter umsetzen

In einem Projekt werden Texte, Gestaltung und technische Umsetzung miteinander abgestimmt. Dabei hilft eine gemeinsame Codebasis, auf die die vorgesehenen Teammitglieder zugreifen können.

Jeder arbeitet mit einer lokalen Kopie. Neue gemeinsame Änderungen werden abgerufen, eigene Änderungen zunächst dort entwickelt und geprüft. Für getrennte Aufgaben können wir eigene Entwicklungszweige verwenden. Ein solcher Branch beginnt bei einem bestehenden Stand und hält die weitere Arbeit zunächst separat. GitHub beschreibt dieses Prinzip im branchbasierten Arbeitsablauf.

Das ist beispielsweise sinnvoll, wenn ein neuer Inhaltsbereich entsteht, während an anderer Stelle eine Textkorrektur ansteht. Die Aufgaben können getrennt bearbeitet und zu einem passenden Zeitpunkt zusammengeführt werden.

Wenn zwei Änderungen dieselbe Stelle betreffen, vergleichen wir sie und entscheiden, wie das Ergebnis aussehen soll. Der Verlauf hilft dabei, beide Beiträge und ihren Zweck zu verstehen. Zum Zusammenführen gehört deshalb auch eine fachliche Prüfung der gemeinsamen Version.

Für dich zahlt sich das bei der Umsetzung aus. Die nächste Person im Team kann am dokumentierten Stand weiterarbeiten, statt Dateien und letzte Änderungen zusammensuchen zu müssen. Eine Textkorrektur und eine grössere Erweiterung lassen sich geordnet bearbeiten. Die Abstimmung im Hintergrund hält dein Feedback und den daraus entstehenden Website-Stand zusammen.

Was der direkte Zugriff auf den Code ermöglicht

Bei einer individuell entwickelten Website arbeiten wir direkt an den Bausteinen, aus denen der Auftritt entsteht. Wir können beispielsweise eine Bilddarstellung anpassen, einen Leistungsbereich erweitern oder eine wiederkehrende Komponente verbessern. Die zugehörigen Dateien lassen sich prüfen und ihre Änderungen vergleichen.

Das hilft auch, wenn die Website wächst. Kommt später eine neue Leistung hinzu, können wir vorhandene Strukturen gezielt weiterverwenden. Wenn eine gemeinsame Komponente geändert wird, prüfen wir ihre betroffenen Einsatzstellen. Die technische Grundlage wird zusammen mit dem Auftritt weiterentwickelt.

Versionsverwaltung unterstützt diese Arbeit, weil der Weg zum aktuellen Stand erhalten bleibt. Sie lässt sich ebenso bei anderen codebasierten Systemen einsetzen, etwa für ein WordPress-Theme. Für unsere Custom-Code-Projekte ist sie ein fester Teil des Entwicklungsprozesses. Die grundsätzliche Systementscheidung behandeln wir ausführlicher im Vergleich von WordPress, Baukasten und Custom Code.

Wenn du später Inhalte selbst pflegst, richten wir den passenden Bearbeitungsweg dafür ein. Die Arbeit mit Git übernimmt unser Entwicklungsteam. Welche Inhalte du im Alltag ändern möchtest, klären wir für dein Projekt.

Du kannst den Code selbst verwalten oder weitergeben

Der Zugriff auf den Projektcode ist auch für deine Unabhängigkeit wichtig. Du bist für die weitere Entwicklung deiner Website nicht an Kröner & Starke gebunden.

Auf Wunsch geben wir dir Zugriff auf das Repository. Ebenso können wir von dir beauftragte Entwickler oder eine andere Agentur berechtigen. Wenn du die vollständige Verwaltung übernehmen möchtest, können wir das Repository in ein von dir verwaltetes Konto übertragen. Dabei bleibt der gespeicherte Versionsverlauf Teil des Projekts.

Damit kann der nächste Entwicklungspartner auf dem vorhandenen Code und den gespeicherten Ständen aufbauen. Bei der Übergabe stimmen wir auch die Informationen zur Entwicklung und Veröffentlichung sowie die benötigten Zugänge für die eingesetzten Dienste ab.

Du kannst also die laufende technische Arbeit bei uns lassen und gleichzeitig Zugriff auf ihre Grundlage haben. Und wenn du später mit jemand anderem weiterarbeiten möchtest, steht dir dieser Weg offen.

Auch bei Shopify entwickeln wir den Theme-Code lokal

Dasselbe Vorgehen nutzen wir für Shopify, eine Plattform zum Betreiben von Online-Shops. Sie stellt unter anderem die Verwaltung von Produkten und Bestellungen sowie den Bestell- und Zahlungsablauf bereit. Wir entwickeln darauf die sichtbare Shop-Oberfläche passend zum Unternehmen und seinem Angebot.

Dieses Paket aus Seitenvorlagen, Gestaltung und Funktionen heisst bei Shopify Theme. Es bestimmt beispielsweise, wie eine Produktseite aufgebaut ist, welche Bilder sie zeigt und wie sich die einzelnen Bereiche verhalten.

Im Theme arbeiten mehrere Dateitypen zusammen. HTML beschreibt die Struktur, CSS die Gestaltung und JavaScript ergänzt interaktive Funktionen. Liquid ist Shopifys Vorlagensprache: Sie setzt zum Beispiel Produktnamen, Bilder und Preise in die vorgesehene Seitenstruktur ein. JSON ist ein strukturiertes Dateiformat, in dem unter anderem Seitenvorlagen und Einstellungen festgehalten werden können.

Wir haben diesen Theme-Code lokal auf unserem Computer und können ihn im Editor entwickeln, prüfen und mit Git versionieren. Ein individuell aufgebauter Produktbereich oder eine angepasste Bilddarstellung wird dadurch genauso als Änderung nachvollziehbar wie bei einer anderen Website.

Für die Entwicklung setzen wir auf diesen lokalen Code-Workflow. Die später vorgesehene Pflege im Shopify-Editor kann damit zusammenarbeiten. Dabei achten wir darauf, dass relevante Änderungen aus dem Shop wieder im Projektstand berücksichtigt werden.

Vorschau ansehen, während der veröffentlichte Shop weiterläuft

Für die Vorschau verwenden wir ein Entwicklungswerkzeug namens Shopify CLI. CLI steht für Command Line Interface: Wir steuern das Werkzeug mit Befehlen auf unserem Computer. Der Befehl shopify theme dev verbindet die lokalen Theme-Dateien mit einem separaten Entwicklungstheme im Shop. Über eine lokale Adresse können wir die neue Variante im Browser ansehen, mit den Produktdaten des verbundenen Shops. Shopify erklärt diese Entwicklungsvorschau in seiner Dokumentation.

Der öffentlich sichtbare Shop kann währenddessen mit seinem veröffentlichten Theme weiterlaufen. Wir prüfen die neue Variante separat: Wie wirken die Bilder? Ist die Produktbeschreibung verständlich aufgebaut? Funktioniert die Darstellung auf unterschiedlichen Bildschirmgrössen?

Für eine geteilte, länger verfügbare Vorschau können wir die Theme-Dateien in ein unveröffentlichtes Theme übertragen. Du bekommst dann einen Link zur gemeinsamen Durchsicht. Shopify beschreibt die Schritte von der Theme-Anpassung über die Freigabe bis zur Veröffentlichung ebenfalls.

Diese Entwicklungsvorschau ist mit Shopify verbunden. Versioniert wird dabei der Theme-Code; Produkte, Bestellungen, Kundendaten und App-Daten werden in den jeweiligen Shopify-Systemen verwaltet. So bleibt klar, welchen Teil des Shops ein gespeicherter Entwicklungsstand abbildet.

Codeprüfung und tatsächlicher Shop gehören zusammen

Zu den Werkzeugen gehört auch shopify theme check. Damit lässt sich der Theme-Code auf bestimmte Fehler und Verstösse gegen die hinterlegten Prüfregeln untersuchen. Welche Prüfungen das Werkzeug abdeckt, dokumentiert Shopify für Theme Check.

Ergänzend schauen wir uns die Umsetzung im Browser an. Ein Werkzeug kann eine technische Auffälligkeit melden. Ob ein Foto im Zusammenhang mit dem Text gut wirkt oder eine Produktinformation verständlich platziert ist, beurteilen wir beim tatsächlichen Durchgehen der Seiten.

Nach der Freigabe folgt die Veröffentlichung der vorgesehenen Version. Danach prüfen wir den Live-Shop nochmals, weil dort die tatsächliche Domain, die eingebundenen Dienste und die reale Nutzung zusammenkommen.

Speichern, teilen und veröffentlichen sind eigene Schritte

Ein gespeicherter Code-Stand kann eine Arbeitsversion, einen besprochenen Zwischenstand oder die Grundlage für eine Veröffentlichung abbilden. Mit einem Push übertragen wir lokale Commits in das gemeinsame Repository. Ob daraus automatisch eine Website gebaut wird, hängt von der eingerichteten Veröffentlichung ab.

Bei einer Custom-Code-Website kann eine Vorschau unter einer eigenen Entwurfsadresse laufen. Bei einem Shopify-Theme nutzen wir die passende Theme-Vorschau. In beiden Fällen gehört zur Arbeit, den vorgesehenen Stand in seiner Umgebung zu prüfen und anschliessend die veröffentlichte Seite zu kontrollieren.

Unser Foto-Beispiel durchläuft damit einen klaren Weg:

1. Wir finden den gespeicherten Stand mit dem gewünschten Ausschnitt.
2. Wir übernehmen die passende Datei oder Darstellungseinstellung in die aktuelle Version.
3. Die neuen Texte bleiben erhalten; wir prüfen ihr Zusammenspiel mit dem Bild.
4. Wir halten die Überarbeitung als neuen Entwicklungsschritt fest und zeigen die entsprechende Vorschau.
5. Der vereinbarte Stand wird veröffentlicht und auf der Live-Seite überprüft.

Das funktioniert auch später, wenn die Website bereits länger online ist. Ein früherer gespeicherter Text kann erneut betrachtet, eine Bildvariante verglichen und eine bestehende Lösung als Ausgangspunkt für eine neue Idee genutzt werden.

Was du davon im Projekt merkst

Du kannst uns auf einen konkreten Zwischenstand hinweisen: «Das Foto aus der letzten Vorschau» oder «Die kürzere Beschreibung aus dem ersten Textentwurf». Je klarer die Bezugspunkte sind, desto direkter können wir die gewünschte Variante zuordnen.

Wir können dazu die gespeicherten Dateien abrufen, die passende Variante technisch zurückholen und die gewünschte Kombination gezielt umsetzen. Unser Team arbeitet auf einer gemeinsamen Grundlage weiter. Und du kannst auf Wunsch selbst oder mit einem anderen Partner die Verwaltung des Projektcodes übernehmen.

Für mich gehört das zu einer sorgfältig entwickelten Website: Änderungen lassen sich effizient bearbeiten, frühere Lösungen bleiben verfügbar und die weitere Entwicklung bleibt offen.