Tutorial - Installation und Konfiguration von Cecil, einem Static Site Generator (SSG) in PHP

Ziel

Dieses Tutorial zeigt Ihnen, wie Sie Cecil installieren und konfigurieren können. Es ist eine in PHP geschriebene Anwendung, die statische Webseiten generieren und verwalten kann.

Eine im Wesentlichen aus statischen Seiten bestehende Website garantiert Ihren Besuchern eine bessere Ladezeit und eine höhere Sicherheit. Ohne dynamischen Inhalt sind Ihre Seiten robuster gegen Cyber-Angriffe. Das Erzeugen von statischen Seiten erlaubt mehr Freiheiten bei der Seiten-Erstellung. Sie sparen auch Zeit, da Sie nicht bei Null anfangen müssen.

In diesem Tutorial wird erläutert, wie Sie mit Cecil Ihre statische Website mit einer modernen Template-Engine (Jamstack) erstellen können.

Voraussetzungen

• Sie verfügen über ein OVHcloud Webhosting mit SSH-Zugang. Über diesen Zugriff können Sie eine oder mehrere Alternativlösungen online installieren, ergänzend zu den Webhosting-Standarddiensten.
• Sie sind mit der Befehlszeileneingabe vertraut.
• Sie können Ihre Dateien per FTP mit einem Client wie FileZilla übertragen.
• Ihre DNS-Zone ist konfiguriert, damit Ihr Domainname (oder Subdomain) auf Ihr Webhosting weitergeleitet wird. Dies ist insbesondere nützlich, wenn Sie mehrere Webseiten auf Ihrem Webhosting einrichten möchten.
• Sie haben Composer installiert, mit der Datei composer.phar im Wurzelverzeichnis Ihres Webhostings oder im Zielordner Ihres Domainnamens.

In der praktischen Anwendung

Ein Webhosting ermöglicht es, Domains oder Subdomains auf den darin enthaltenen Webseiten zu deklarieren. Eine Domain oder Subdomain ist erforderlich, um Ihre mit Cecil erstellte Website bereitzustellen.

Um Ihnen bei der Einrichtung einer Domain oder Subdomain auf einer der Webseiten Ihres Webhostings zu helfen, konsultieren Sie unsere Seite „Mehrere Webseiten auf einem Webhosting einrichten“.

Erstellen Sie das Verzeichnis für Ihre Dateien

Sobald Sie sich über SSH auf Ihrem Webhosting eingeloggt haben, erstellen Sie ein Root-Verzeichnis mit dem folgenden Befehl:

mkdir mystaticwebsite

Ersetzen Sie mystaticwebsite durch den Ordnernamen Ihrer Wahl (ohne Akzente und Leerzeichen).

Wechseln Sie anschließend zu diesem Ordner:

cd mystaticwebsite

Ersetzen Sie mystaticwebsite durch Ihren Ordnernamen.

Download

Laden Sie in dem Verzeichnis, das Sie gerade erstellt haben, Cecil herunter:

curl -OL https://github.com/Cecilapp/Cecil/releases/latest/download/cecil.phar

Installation

Starten Sie die Cecil-Installation mit dem folgenden Befehl:

php cecil.phar new:site

Tragen Sie die angeforderten Informationen ein:

• Titel Ihrer Webseite
• Eine Baseline für Ihre Webseite
• URL Ihrer Seite (Beispiel: https://mywebsite.ovh)
• Eine Beschreibung Ihrer Seite

Nachdem Sie diese Informationen eingegeben haben, können Sie die Website mit dem folgenden Befehl bereitstellen:

php cecil.phar build

Wenn Sie den Inhalt des Verzeichnisses anzeigen, finden Sie dort das Verzeichnis _site. Dieses Verzeichnis enthält alle HTML-Dateien und Assets:

Sie können nun das Ergebnis sehen, indem Sie Ihren Domainnamen aufufen:

Konfiguration des Domainnamens

Um die Ergebnisse in Ihrem Browser anzuzeigen, muss Ihr Domainname auf das Verzeichnis _site verweisen, das Sie bei der Installation von Cecil erstellt haben.

Wenn Ihr Domainname oder Subdomain bei OVHcloud gehostet wird, konsultieren Sie unsere Anleitungen zu der DNS-Konfiguration und zur Einrichtung einer Webseite auf Ihrem Webhosting.

Ihre Webseite konfigurieren

Allgemeine Informationen zu Ihrer Website können Sie in der Datei config.yml konfigurieren:

nano config.yml

Ersetzen Sie die Standardinformationen durch Ihre eigenen, und speichern Sie die Datei.

Neue Seite erstellen

Sie können Webseiten mithilfe von Dateien im Markdown-Format erstellen. Diese Seiten können angepasst werden. Cecil enthält Twig, die Template Engine, die standardmäßig für das Symfony Framework verwendet wird.

Ordner und Dateien sind wie folgt organisiert:

• assets: Enthält Grafiken, Audio, Video, JavaScript und Formatvorlagen (CSS, Sass).
• layouts: Enthält Templates.
• pages: Enthält Markdown-Dateien.
• _site: Verzeichnis, in dem sich die generierten Dateien befinden und auf das der Domainname verweist.
• static: Enthält alle statischen PDF-Dateien.

Erstellen einer Markdown-Datei in der Befehlszeile

Geben Sie im Stammverzeichnis der Seite den folgenden Befehl ein:

php cecil.phar new:page mypage.md

Ersetzen Sie mypage durch den Namen Ihrer Seite.

Anschließend wird im Stammverzeichnis /pages die Datei mypage.md erstellt.

Statische Dateien generieren

Geben Sie im Stammverzeichnis den folgenden Befehl ein:

php cecil.phar build

Ihre Datei befindet sich im Ordner _site/mypage/:

Sie können sie auf dem Server öffnen, indem Sie die URL Ihrer Seite gefolgt von /mypage/ eingeben:

Passen Sie Ihre Website-Dateien an

Auf dem Server arbeiten

Markdown-Dateien können direkt auf dem Webhosting-Server bearbeitet werden. Mit dem SSH-Zugang der Performance Hostings können Sie GNU nano, vi oder vim verwenden.

Die Screenshots dieses Tutorials wurden unter GNU nano erstellt.

Bearbeiten Sie die Datei mypage.md im Verzeichnis pages, indem Sie im Stammverzeichnis den folgenden Befehl eingeben:

nano pages/mypage.md

Ersetzen Sie mypage durch den Namen Ihrer eigenen Seite.

Fügen Sie Zeilen mithilfe der Markdown-Syntax hinzu:

Löschen Sie die Dateien im Cache mit dem folgenden Befehl:

php cecil.phar clear

Erstellen Sie Ihre Seiten neu (build), nachdem Sie Ihre Datei gespeichert haben:

php cecil.phar build

Kehren Sie dann zu Ihrer Seite zurück, um das Ergebnis zu sehen:

Arbeitsumgebung ändern

Wenn Sie es vorziehen, Ihren gewohnten Code-Editor zu verwenden, melden Sie sich mit einem FTP-Client auf Ihrem Server an, um die Dateien auf Ihren Computer zu übertragen:

Sie können nun die Dateien in Ihrer I.D.E. bearbeiten:

Laden Sie einfach Ihre veränderten oder neuen Dateien auf den Server und führen Sie build aus, um Ihre Seiten online zu stellen.

Die erstellte Seite zum Menü Ihrer Seite hinzufügen

Um diese neue Seite zum Website-Menü hinzuzufügen, ändern Sie manuell den Header der .md-Datei, indem Sie die folgende Zeile hinzufügen:

menu: main

Fazit

Cecil ist ein Tool, mit dem eine statische Site aus Markdown-Dateien erstellt werden kann. Diese Markup-Sprache ist einfacher zu implementieren als HTML. Die Organisation von Markdown-Dateien bestimmt die Hierarchie Ihrer Webseiten.
Die Verwendung einer Template Engine, die in der Web-Entwickler-Community weit verbreitet ist, ermöglicht es Ihnen, viele Quellen im Internet zu finden, um eine professionell aussehende Benutzeroberfläche zu entwerfen.

Weiterführende Informationen

Dynamischen Inhalt auf einer statischen Webseite hinzufügen, die mit Cecil erstellt wurde

Offizielle Webseite von Cecil

Hilfe zum Markdown-Format

Verwendung von FileZilla

Kontaktieren Sie für spezialisierte Dienstleistungen (SEO, Web-Entwicklung etc.) die OVHcloud Partner.

Treten Sie unserer User Community bei.