Yellow ist für Menschen die Websites machen

Den Text der Überschrift habe ich getweetet, nachdem ich das Yellow Demo ausprobiert hatte.

Mit Yellow können Sie kleine, merhsprachige Websites, Blogs und Wikis erstellen. Der Inhalt kann online bearbeitet werden. Yellow ist ein Flat-File-CMS und benötigt nur einen Webserver mit PHP (keine Datenbank). Die Firma Datenstrom, die das CMS entwickelt, stellt es frei zur Verfügung. Der Artikel 20 Flat-File-Systeme im Test vom 21. Oktober 2014 empfahl Yellow folgendermassen:

Wenn du ein bisschen experimentieren willst und Inspiration suchst, dann versuch es mal mit Yellow.

Nach dem Demo war auch ich neugierig und habe es ausprobiert. Schliesslich braucht unser Kunstprojekt seafolly.ch noch eine Website und da liegt es ja nahe, mit einem inspirirenden CMS mehrsprachig, aber klein anzufangen 🙂

Installation

So grundsätzlich können Sie Yellow einfach herunterladen und entpacken.
Dann ist es fertig installiert und Sie können loslegen.

Virtueller Server

Legen Sie die Konfigurationsdatei und die benötigten Dateiverzeichnisse an. Ich mache das hier mit dem Editor Nano unter Ubuntu 14.04 mit dem Apache Webserver:

sudo nano /etc/apache2/sites-available/seafolly.ch.conf

und kopieren Sie die folgenden Anweisungen hinein

<VirtualHost *:80>
  ServerAdmin webmaster@seafolly.ch
  ServerName seafolly.ch
  ServerAlias www.seafolly.ch
  DocumentRoot /var/www/seafolly.ch/public_html/    
  ErrorLog /var/www/seafolly.ch/logs/error.log
  CustomLog /var/www/seafolly.ch/logs/access.log combined
  <Directory "/var/www/seafolly.ch/public_html">
     Options FollowSymLinks
     AllowOverride All
     Order allow,deny
     Allow from all
  </Directory>
</VirtualHost>

Speichern Sie die Datei ab.

Erstellen Sie ein Verzeichnis für die Website und darin ein Verzeichnis für die Logdateien:

sudo mkdir /var/www/seafolly.ch
sudo mkdir /var/www/seafolly.ch/logs

Wechseln Sie in das Unterverzeichnis der Website:

sudo cd /var/www/seafolly.ch/

Laden Sie den Quellcode aus Github (oder per Download und Entpacken des Zip Pakets):

sudo git clone https://github.com/datenstrom/yellow.git

Bennennen Sie das Verzeichnis yellow in public_html um:

sudo mv yellow public_html

Geben Sie dem Webserver User die Eigentumsrechte:

sudo chown -R www-data:www-data /var/www/seafolly.ch/public_html/

Danach können Sie die Apache Konfigurationsdatei aktivieren und den Apache Service neu laden.

sudo a2ensite seafolly.ch.conf
sudo service apache2 reload

Sie können nun im Browser die entsprechende URL aufrufen, in meinem Fall http://seafolly.ch

Benutzeraccount anlegen

Da es keine Datenbank gibt, muss irgendwo ein Benutzername und ein Passwort erzeugt und hinterlegt werden. Das kann man entweder online auf der datenstrom.se Site machen oder auf der Konsole.
Ich entscheide mich für die Konsole.

Wechseln Sie in das Verzeichnis, in dem sich die yellow.php Datei befindet (in meinem Fall /var/www/seafolly.ch/public_html)

Erzeugen Sie ein Benutzerkonto mit dem Befehl:

sudo php yellow.php user email@example.com horsebattery

Ihr Benutzername ist email@example.com und das Passwort horsebattery.
Die E-Mail Adresse und der Passworthash werden in der Datei system/config/user.ini eingetragen.

Loggen Sie sich ein!

Inhalt erstellen ändern und löschen

Nun sieht Yellow etwas anders aus. Sie können jetzt Seiten editieren, hinzufügen und löschen.
Probieren Sie es aus!
Text schreiben Sie in der Auszeichnungssprache Markdown, beispielsweise

Normal *Kursiv* **Fettschrift** `Code`

* Punkt eins
* Punkt zwei
* Punkt drei

Mit dem + und dem – Zeichen können Seiten erzeugt und gelöscht werden.

Sie können die Inhalte über den Browser und über das Dateisystem bearbeiten.

Das Prinzip von Seiten und Navigationseinträgen spiegelt sich im Dateisystem.
Im Verzeichnis content haben Sie zwei weitere Unterverzeichnisse:

01-Home
02-About

In jedem Verzeichnis finden Sie eine page.txt Datei. In dieser page.txt Datei befindet sich Ihr Markdown Text. Wenn Sie mit dem + Zeichen eine neue Seite angelegt haben, so befindet sie sich in dem Verzeichnis, dessen page.txt sie gerade aufgerufen hatten. Eine deutschsprachige detailierte Beschreibung finden Sie unter https://github.com/datenstrom/yellow/wiki/Adding-content-de.

Bilder und Dateien

Das Verzeichnis media/downloads enthält Dateien, das Verzeichnis media/images Bilder

![image](icon.png)

zeigt ein Bild aus dem Verzeichnis media/images an. Probieren Sie es aus

Es gibt auch ein Image Plugin um Bildgrössen zu ändern!

Einstellungen, Mehrsprachigkeit, Plugin und Themes

Alle Einstellungen befinden sich im system Verzeichnis.

In der config.ini habe ich die folgenden Einstellungen vorgenommen:

sitename = seafolly.ch
author = Hagen Graf
language = de
theme = flatsite

…

multiLanguageMode = 1

Als ich die Seite wieder aufrief, bekam ich folgende Fehlermeldung

Something went wrong. Language ‚de‘ does not exist!

Die Standardsprache ist Englisch und damit auch alle Seiten.

Extensions laden

Es gibt zusätzliche Sprachen, Plugins und Themes.
Die einfachste Variante ist, diese zunächst zu laden und bei Bedarf ins entsprechende Systemverzeichnis zu kopieren (https://github.com/datenstrom/yellow-extensions).

Damit ich eine mehrsprachige Seite erhalte, muss ich die Ordnerstruktur für die Inhalte anpassen

einsprachig Englisch

content/1-home
content/2-about

Mehrsprachig Deutsch/Englisch/Französisch

content/1-en/1-home
content/1-en/2-about
content/2-de/1-startseite
content/2-de/2-ueber
content/3-fr/1-accueil
content/3-fr/2-apropos

Den Seiten (page.txt) sollten Sie eine Language Variable hinzufügen

---
Title: Startseite
Language: de
---
Willkommen bei bei Seafolly

Die jeweiligen Sprachdateien müssen ins system/config Verzeichnis geladen werden.
Bei mir sieht der Inhalt des Verzeichnisses so aus:

config.ini      
language-en.ini 
language-de.ini 
language-fr.ini 
page-error-401.txt 
page-error-404.txt 
page-error-424.txt 
page-error-500.txt 
page-new-default.txt 
user.ini
robots.txt

Zwischen den Sprachen wechseln Sie im Browser

English – seafolly.ch
Deutsch – seafolly.ch/de
Französisch – seafolly.ch/fr

Individuelle Navigation

Irgendwo müssen Sie die Links zu den anderen Sprachen anzeigen.

Die einfachste Variante sind vermutlich zusätzliche Links in der Navigation, also los.

Die Navigation liegt in system/themes/snippets/navigation.php

Erweitern Sie sie einfach um die Sprachlinks

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation() ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
<li><a href="/">EN</a></li>
<li><a href="/de">DE</a></li>
<li><a href="/fr">FR</a></li>
</ul>
</div>

<div class="navigation-banner"></div>

Das Ergebnis sieht dann so aus:

Yellow mit individualisierter Navigation

Plugins und Themes

Wie Sie bereits beim Download der Extensions gesehen haben, gibt es u.a. Plugins mit den Namen blog, disqus, fontawesome, image, search, toc, wiki, breadcrumbs, googlemaps, imagegallery, piwik, sitemap, soundcloud, userpermission, youtube, contact, feed und viele andere mehr.

Wenn Sie bis hierher mitgemacht haben, beginnt Ihnen die Sache vermutlich Spass zu machen, daher höre ich jetzt auf mit der Vorstellung und wünsche Ihnen viel Erfolg beim Ausprobieren 🙂

Für seafolly.ch werde ich erstmal bei Yellow bleiben.