Kategorien
Content Management Systeme seafolly.ch

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

Erster Aufruf von Yellow
Erster Aufruf von Yellow

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!

Anmeldung
Anmeldung

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.

Ansicht nach dem Anmelden
Ansicht nach dem Anmelden

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

Ein Seite mit Bild
Ein Seite mit Bild

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
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.

Links


tl;dr: Yellow ist ein inspirierendes, dateibasiertes CMS für Menschen die Websites erstellen.

Kategorien
Content Management Systeme Shared Hosting Webdesign

GRAV, ein schnelles, dateibasiertes, einfaches CMS

Modern, Crazy Fast, Ridiculously Easy and Amazingly Powerful Flat-File CMS

Im Jahr 2004 installierte ich zum ersten Mal Drupal. Die Version 4.x war aktuell und all die hippen Module wie Views und Panels gab es noch nicht. Was mich damals faszinierte, waren die einfachen, klaren Strukturen, die Inhaltstypen, Felder, Berechtigungen, Templates, Ordnerstrukturen. Ich fing sofort an, damit zu „spielen“. Einen ähnlichen Effekt löste Mambo bei mir im Jahr 2002 und PHPNuke im Jahr 1999 aus (und davor Perl, und davor Lego 🙂 ). In den letzten 10 Jahren ist mir im Bereich PHP basierte Open Source CMS nichts über den Weg gelaufen, was einen ähnlichen Aha- und Bastel-Effekt bei mir auslöste und mich dazu brachte sofort eine Website damit zu bauen.

Ende 2014 stolperte ich über GRAV CMS. Es ist dateibasiert und benötigt daher keinen Installationsvorgang im klassischen Sinne. Das Dateipaket wird ausgepackt und die Website ist da! Es gibt Standard-, Listing– und Modulare Seiten, die mit Text und Bildern gefüllt werden können. Es gibt zusätzliche Plugins und Themes. Die Inhalte werden in der Auszeichnungssprache Markdown geschrieben und dann mittels vordefinierten Twig Templates formatiert. Für die Geschwindigkeit wird auf Doctrine Cache zurückgegriffen, für die Wartbarkeit und Erweiterbarkeit auf Pimple (Was ist Pimple?). Der Symfony Event Dispatcher sorgt wie bei Drupal 8 für das Plugin handling und die Symfony Console für ein Kommandozeilen Interface. Bilder werden mit der Gregwar Image Library in einem Aufruf bearbeitet.

Um schnell zu brauchbaren Ergebnissen zu kommen, gibt es ein gute Dokumentation, ein Forum und einen Chat. GRAV ist als persönliches Projekt von Andy Miller, dem Gründer von Rocket Theme, Mitte 2014 gestartet worden. Es steht unter der MIT Lizenz und das Business Modell ist einfach zu verstehen: Jeder kann Erweiterungen schreiben und diese kostenlos anbieten oder verkaufen. Das Team um Andy Miller erstellt und verkauft über Rocket Theme seit 10 Jahren Themes für Joomla, Drupal, WordPress, Magento und PHPbb und hat dabei praktische Erfahrungen aus allen CMS sammeln können sowie Nervenstärke bei den Architektur-Entscheidungen der jeweiligen Projekte erwerben müssen. Beide Faktoren wirken sich positiv pragmatisch auf das GRAV Projekt aus.

In Joomla, Drupal und WordPress gibt es jeweils Einzeldarstellungen (eine Seite) und Listdarstellungen von Inhalten (mehrere angerissene Einzelinhalte auf einer Seite mit weiterlesen Link, o.ä.). Die Einzeldarstellungen sind meist auf eine Komponente (Joomla), ein Modul (Drupal) oder ein Plugin (WordPress) beschränkt. In TYPO3 können die Einzelseitendarstellungen mit zusätzlichen Elementen angereichert werden. Dieses Grundprinzip lässt sich über Erweiterungen verändern, aber das führt nicht unbedingt zu einer übersichtlicheren Struktur. Das Design einer Seite mit Inhalt zu verändern ist dabei kein trivialer Vorgang. Um eine wirklich „runde“ Website mit einem dieser „klassischen“ CMS zu erstellen, benötigt man einiges an Know How und Budget, heute also eher klassisches Agenturgeschäft.

GRAV vereinfacht den Bau von Websites erheblich, verzichtet im Core auf den ganzen Overkill aus Datenbank, Benutzerkonten, und -Berechtigungen und ist dabei natürlich ungemein schnell bei der Seitenausgabe. Es vereint die Vorteile bei der Inhaltsdarstellung aller oben genannten CMS und bricht sie auf das Wesentliche herunter (Einzel-, List- und Modulardarstellung). Das Schreiben von Inhalten in Markdown macht Spass und ist einfach zu erlernen, die Pflege der Texte kann über FTP, GitHub, Dropbox und theorethisch alle Services, auf denen Dateien gehostet werden können, erfolgen.

Ein browserbasierter Administrationsbereich war ursprünglich von Rocket Theme geplant, wurde aber von niemandem implementiert und bisher auch nicht wirklich vermisst. Bei höheren Anforderungen (eCommerce) kann das System abhängig vom eigenen Wissensstand über vordefinierte oder selbst geschriebene Plugins erweitert werden.

Achja, und hier ist meine erste GRAV Website (fimidi.com).

Lassen Sie uns eine kleine Website mit dem GRAV CMS erstellen. Sie können das lokal auf Ihrem PC machen oder direkt auf Ihrem Root-Server. Ich nehme mal gleich den Server.

Installation

Wir arbeiten immer noch mit Ubuntu 14.04 und dem Apache Webserver. Erstellen Sie also zunächst einen vhost (Viele virtuelle Server auf einem Root-Server), entpacken dann GRAV in ihr Dokumentenverzeichnis und rufen Sie es in Ihrem Browser auf. Die aktuellste Version finden Sie auf getgrav.org/downloads.

wget https://github.com/getgrav/grav/releases/download/0.9.15/grav-v0.9.15.zip
unzip grav-v0.9.15.zip

Rufen Sie nun im Browser die entsprechende URL auf und GRAV ist fertig installiert.

GRAV Installation
GRAV Installation
Die Dateien, die sich im Ordner /user befinden, enthalten die Inhalte, Metadaten und Formatierungen Ihrer Website. Wenn Sie Ihre Site lokal mit Inhalt befüllen, so müssen Sie einfach diesen Ordner mit Ihrem Server synchronisieren.

  • user/config/ – Konfiguration Ihrer Website sowie des GRAV Systems
  • user/data/ – Hier können von Plugins bei Bedarf Daten gespeichert werden
  • user/pages/ – die einzelnen Seiten
  • user/plugins/ – die installierten Plugins (Die Plugins error und problem sind Standard)
  • user/themes/ – das Theme Antimatter ist Standard

In der 1.0 Version wird noch der Ordner user/accounts/ hinzukommen.

  • user/accounts/ – Benutzerkonten und Berechtigungen

Konfiguration und Erstellung von Inhalt

Editieren Sie zunächst die Datei user/config/site.yaml

title: serverblogger.ch
author:
  name: Hagen Graf
  email: 'hagen@novatrend.ch'
metadata:
    description: 'Wir zeigen, wozu man Root-Server benutzen kann!'

Die einzige Seite, die vordefiniert ist, ist die Home Seite (user/pages/01.home/default.md). Der Dateiname default.md heisst default, weil es ein Twig-Template mit dem gleichen Namen im Antimatter Theme gibt, über das der Inhalt der Home Seite interpretiert wird (user/themes/antimatter/default.html.twig). Die Endung .md steht für Markdown. So sieht eine einfache Seite aus. Der Titel ist gleichzeitig der Name des Menülinks.

---
title: Startseite
---

# Eine Website mit GRAV
## Die Installation war wirklich einfach

Das hier ist der Text meiner **ersten** Seite
Grav simple page
Grav simple page
Wenn Sie ein Bild auf Ihrer Seite haben wollen, so kopieren Sie es einfach in Ihr Seitenverzeichnis /user/pages/01.home. Hier ein Beispiel:

cd /user/pages/01.home
wget https://farm8.staticflickr.com/7508/15154508894_3338ae7a2b_k.jpg

Editieren Sie die default.md entsprechend, um das Bild anzeigen zu können.

---
title: Startseite
---

# Eine Website mit GRAV
## Die Installation war wirklich einfach

Das hier ist der Text meiner **ersten** Seite
![Maserati](15154508894_3338ae7a2b_k.jpg?resize=400,200)
default.md mit Bild
default.md mit Bild
Probieren Sie ein anderes Twig-Template aus, um ein Gefühl für das Prinzip zu bekommen. Benennen Sie dazu die Datei default.md um in blog.md. Das Ergebnis sieht so aus:
blog.md
blog.md
Das Blog Template macht aus Ihrem Bild automatisch ein Headerbild und verändert die Farbe. Ausserdem taucht noch ein Text Widget auf. Wenn Sie eine zweite Seite haben wollen, erstellen Sie einfach einen Ordner /user/pages/02.seitenname und darunter eine Datei mit dem Namen eines existierenden Templates.

Es gibt für alle Beispielsites (Skeleton) für gängige Anwendungen (z.B. Blog, Shop, One-Page-Site), viele nützliche Plugins und natürlich Themes.

Als ich an diesem Punkt das erste Mal ankam, beschloss ich unsere fimidi Site damit zu bauen 🙂

Wenn es Ihnen genauso geht, hier sind nochmal die momentan wichtigsten Ressourcen (getgrav.org).

Dokumentation, Forum und Chat.

Und nun wünsche ich Ihnen viel Spass und viel Zeit!


tl;dr: Das dateibasierte CMS GRAV macht einfach Spass und Lust auf mehr.