Die Homepage

git

git ist ein Versionierungssystem, welches häufig für Websites verwendet wird. Dies ermöglicht paralleles Entwickeln mit mehreren Personen und Wiederherstellen oder Zugreifen auf alte Versionen. Wie das genau funktioniert, erfährst du hier:

Erst einmal musst du dir einen git-Client installerien. Für die Nutzung würde ich ein unixoides Betriebssystem, also Mac oder noch besser Linux, empfehlen, da Windows für unser Vorhaben nicht optimal ist. Du kannst aber auch, wenn du Windows hast, dort eine Virtuelle Maschine installieren (Weitere Infos). Git stellt hierzu wahlweise eine GUI-basierte (als Programm mit Benutzeroberfläche; bei Windows empfehlenswert) und eine CLI-basierte (über das Terminal) Lösung bereit. Für die CLI-Installation reicht auf unixoiden Systemen diese Zeile:
sudo apt-get install git

Jetzt kannst du eigentlich starten. Des weiteren werde ich die Schritte aufzählen, welche du mit im Terminal machen kannst. Wenn du verstanden hast, wie das funktioniert, kannst du es auch auf die GUI-Lösung übertragen.

Zunächst müssen wir das Repository (repo), das ist ein "Ordner" in welchem sich das Projekt im Account auf github/bitbucket befindet, klonen, das heißt, auf unseren PC ziehen, damit wir lokal daran arbeiten können. Damit stören wir niemanden, der daran arbeitet und können selbst genauso herumprobieren, ohne von anderen gestört zu werden, bis wir unser Ergebnis wieder auf bitbucket zur Verfügung stellen, damit die Besucher der Homepage es sehen können.

Dazu gehst du in das Verzeichnis, in welches du das repo klonen willst und kannst es dann mithilfe der URL auf deinen dorthinein kopieren:
cd Pfad/zu/deinem/Ordner;
git clone bitbucketurl

Den Ordnerpfad und die URL im Beispiel musst du natürlich entsprechend ersetzen. Jetzt kannst du innerhalb des Ordners an deinem Projekt lokal arbeiten. Wenn du Änderungen gemacht hast, kannst du sie mit dem Befehl git status im Terminal ansehen. Hier werden nun alle Änderungen mit einem Hinweis zur Änderung aufgelistet. Wenn du diese Änderung übernehmen willst, musst du zunächst den Befehl git add Datei (Pfad (sofern nicht im root-Verzeichnis) und Namen der Datei angeben). Bist du fertig, kannst du deine fertigen (geaddeten) Dateien comitten, das heißt also quasi eine zusammenhänge Änderung an einer oder mehreren Dateien abschließen. Das passiert mit der folgenden Zeile: git commit -m "Kommentar". Nach einem oder mehreren Comits (sofern du mehrere Änderungen in einem Arbeitsprozess gemacht hast) erfolgt nun der Schritt, in welchem du deine Dateien wieder an bitbucket schickst.

git push

Damit sollten andere für das Repository freigeschaltete Personen deine Änderungen (comits und einzelne Dateiänderungen) sehen können. Beim nächsten Mal kannst du genauso vorgehen, nur dass du das Projekt nicht erneut klonen musst, sondern stattdessen den Befehl git pull eingibst, um die Änderungen seit deinem letzten Push herunterzuladen und deine lokalen Dateien zu aktualisieren.

middleman

Middleman ist eine Arbeitsumgebung zum lokalen Entwicklen von Websites, welche auch precompiler wie Less, Sass, SCSS, Erb, Haml, Coffeescript und viele mehr unterstüzt. Wie unsere Homepage aufgebaut ist und wie du Artikel erstellst und bearbeitest, erfährst du hier:

Zunächst musst du middleman installieren. Auf unixoiden Betriebssystemen (Linux/Mac) ist die dafür benötigte Programmiersprache Ruby bereits vorinstalliert (auf Windows muss das noch gemacht werden) und wir können damit starten, die folgenden Sachen zu installieren:

sudo apt-get install ruby-dev make zlib1g-dev
sudo gem install middleman

Sobald middleman installiert ist, kannst du in den Ordner gehen, in welchem sich deine Website befindet (sofern du wie oben angegeben bereits das boypoint-Repository geklont hast) und anfangen, mit middleman zu arbeiten. Die Entwicklung mit middleman läuft in zwei Phasen: Der Entwicklungsphase und der live- oder static-Phase, also das, was du später als Besucher der Homepage tatsächlich siehst. So kannst du neue Seiten erstellen, ohne dass jeder dir dabei zuguckt und sich fragt, warum der Absatz nach einer halben Seite aufhört ;)

Um die Änderungen trotzdem live mitverfolgen zu können, bietet middleman die Möglichkeit, dir eine Vorschau auf einen lokalen Server zu generieren. Hier einfach den folgenden Befehl ins Terminal eingeben und dann sollte deine Seite über http://localhost:4567/ erreichbar sein.

bundle exec middleman server

So kannst du immer überprüfen, wie die von dir getätigten Änderungen aussehen. Middleman hat im root-Verzeichnis (Hauptverzeichnis, also im obersten Ordner deines Projekts) ein paar Dateien, welche middleman selbst benutzt und die du nur verändern solltest, wenn du weißt, was du tust, und diese Änderungen mit dem Team abgesprochen wurden, da sie grundlegende Änderungen an der Seite herbeiführen können. Dann gibt es da noch zwei (oder drei Ordner). Diese beiden heißen build und source. Im source-Ordner befinden sich die Dateien, die du bearbeiten kannst und deren Änderungen auf deinem lokalen Server wie oben beschrieben angezeigt werden, da wir uns in der Entwicklungsphase befinden. Das build-Verzeichnis enthält den aktuellen Stand, wie ihn die Benutzer sehen, und sollte, solange deine Änderungen noch nicht abgeschlossen sind, nicht verändert werden (dazu kommen wir später). Als letztes gibt es bei dir eventuell auch einen data-Ordner. Hier befinden sich (meist .json- oder .yml-) Dateien, welche zusätzliche Daten enthalten, welche an beliebiger Stelle auf der Seite angezeigt werden können.

Sofern du über HTML- und CSS-Kenntnisse verfügst, kannst du wie gewohnt auch in middleman Seiten erstellen. Hierfür sind nur ein paar Kleinigkeiten zu beachten. Middleman arbeitet mit Layoutdateien und Contentdateien. Die Layoutdateien beeinhalten den grundsäztzlichen Aufbau der Seite (Header, Footer, Navigation). Auch sie sollten mit Bedacht bearbeitet werden, da eine Änderung sich hier meistens nicht nur auf eine Seite auswirkt. An der Stelle, an welcher der jeweilige Seiteninhalt angezeigt werden soll, fügt man folgendes ein:

<%= yield %>

An dieser Stelle werden nun alle von dir in diesem Verzeichnis erstellen Seiten eingefügt. Layoutdateien enden immer auf .erb und befinden sich im layout-Ordner. Erb ist eine Templating Engine (zur Arbeit mit Platzhalten und Funktionen, die vor der live-Phase in Code umgewandelt werden), die middleman für einige Sachen nutzt. Deine Contentdateien enden auf .html.erb. Wenn du in deiner Contentdatei mehrere Abschnitte einfügen willst, kannst du sogenannte "Partials" benutzen. Das funktioniert folgendermaßen:

<%= partial "" %>

In den Anführungszeichen musst du dann nur noch den Namen deines Partials eintragen. Partialdateien fangen immer mit einem Unterschrich an und enden auf .erb. Den Unterstrich darfst du im oben genannten Code, mit dem du die Partials auf deine Seite einfügst allerdings nicht mitangeben. Er dient middleman nur zur Unterscheidung der Dateien und ist deshalb im Dateinamen nötig.

Für Bilder und Links nimmst du hiervon den jeweiligen Code (Das ist nötig, damit middleman die Pfade selbst richtig verlinken kann):

<%= link_to "Linktext", "URL" %>
<%= image_tag 'Dateiname des Bildes', :alt => "alt-Text" %>

So haben wir jetzt gesehen, wie du generellen Seiteninhalt erstellst. Wenn du soweit fertig bist, kannst du deinen aktuellen Stand von middleman umwandeln lassen, sodass du die Seite später im Browser ebenfalls korrekt angezeigt werden kann. Hierzu führst du nun folgenden Befehl aus und kannst die fertige Website (live-Phase)dann im build-Ordner aufrufen. Mache am besten vor und nach dem build einen push mit git. Den push nach dem build gibst du auch den Kommentar "build".

bundle exec middleman build

Wenn du nun noch ein paar fortgeschrittenere Sachen machen möchtest, hilft dir das hier sicher zum weiteren Verständnis:

  • &lgt;%= irgendwas %>  erzeugt eine Ausgabe (wie 'echo' in PHP), also zeigt den Inhalt einer Variable, den Text oder das Ergebnis einer Funktion (Rückgabewert) an
  • Wenn du das =-Zeichen hinter dem ersten %-Zeichen weglässt kannst du zwischen &lgt;% und %> Code schreiben, der nicht (direkt) ausgeführt wird (z.B. Variablen deklarieren, Schleifen anfangen (siehe unten), etc.)
  • Solltest du mehrere Variablen deklarieren wollen, tue dies aber lieber ganz oben auf der Seite in einem separaten Abschnitt:
---
title: boypoint.de - Backstagebereich - Die Homepage
---
  • Solltest du größere und/oder verschachtelte Arrays und/oder Objekte deklarieren wollen, tue dies wiederum eher in einer gesonderten Datei aus JSON (.json) oder YAML (.yml) und speichere diese Datei im data-Ordner. Dein Objekt/Array ist dann folgendermaßen aufrufbar (gehen wir davon aus, die Datei heißt "user.json" und enthält ein Array von Objekten mit Benutzern):
<ul>
	<% data.user.each do |user| %>
		<li><%= user.name %></li>
	<% end %>
</ul>
  • Das oben gezeigte Beispiel mit der Variable title lässt sich analog dazu aufrufen, mit der Änderung, dass vor data noch ein current_page. kommt, da sich die Variable ja in derselben Datei befindet.
(c) 2015, 2016 Boypoint.de IMPRESSUM