Installation und Konfiguration von Jigsaw in der ServBay-Umgebung

Was ist Jigsaw?

Jigsaw ist ein statischer Website-Generator basierend auf Laravel, geeignet zum Erstellen von Dokumentationen, Blogs und einfachen statischen Webseiten. Es bietet ein flexibles Template-System und leistungsstarke Entwicklungstools, die es sehr einfach machen, statische Webseiten zu erstellen und zu verwalten.

Schritte zur Installation von Jigsaw

In diesem Artikel zeigen wir, wie man Jigsaw in der ServBay-Umgebung installiert und konfiguriert.

Schritt 1: Erstellen eines Projektverzeichnisses

Erstellen Sie zunächst ein neues Projektverzeichnis im www-Verzeichnis von ServBay:

cd /Applications/ServBay/www
mkdir servbay-jigsaw-app
cd servbay-jigsaw-app

Schritt 2: Erstellen eines Jigsaw-Projekts mit Composer

ServBay verfügt bereits über Composer, daher können wir Composer direkt verwenden, um ein Jigsaw-Projekt zu erstellen:

composer create-project tightenco/jigsaw

Schritt 3: Konfiguration des Webservers

1. Neuen Website hinzufügen

   Öffnen Sie ServBay, klicken Sie auf den "Host"-Tab und fügen Sie eine neue Website hinzu:

   • Name: My Jigsaw Site
   • Domain: servbay-jigsaw.local
   • Website-Typ: PHP
   • PHP Version: Wählen Sie die entsprechende PHP-Version
   • Website-Root-Verzeichnis: /Applications/ServBay/www/servbay-jigsaw-app/build_local

2. Speichern der Konfiguration

   Speichern Sie die Konfiguration.

Schritt 4: Bau der Jigsaw-Website

1. Abhängigkeiten installieren

   Führen Sie im Projektverzeichnis den folgenden Befehl aus, um die npm Abhängigkeiten zu installieren:

   npm install

2. Website bauen

   Führen Sie den folgenden Befehl aus, um die Jigsaw-Website zu bauen:

   ./vendor/bin/jigsaw build

Schritt 5: Lokalen Entwicklungsserver ausführen

1. Zugriff auf den Entwicklungsserver

   Öffnen Sie einen Browser und rufen Sie https://servbay-jigsaw.local auf. Sie sollten die lokale Entwicklungsversion der Jigsaw-Website sehen.

Schritt 6: Jigsaw-Website anpassen

1. Inhalt bearbeiten

   Bearbeiten Sie die Markdown-Dateien und Blade-Template-Dateien im source-Verzeichnis, um den Inhalt und das Layout Ihrer Website anzupassen.

2. Neue Seiten hinzufügen

   Erstellen Sie im source-Verzeichnis neue Markdown-Dateien, um neue Seiten hinzuzufügen. Zum Beispiel, erstellen Sie eine about.md Datei:

   ---
   title: "Über uns"
   ---
   
   # Über uns
   
   Dies ist die Über uns-Seite.

3. Navigationsmenü konfigurieren

   Bearbeiten Sie die Blade-Template-Dateien des Navigationsmenüs im source/_layouts-Verzeichnis, um neue Navigationslinks hinzuzufügen.

4. Website neu bauen

   Führen Sie nach jeder Inhalts- oder Template-Änderung den folgenden Befehl aus, um die Jigsaw-Website neu zu bauen:

   ./vendor/bin/jigsaw build

Nutzung von Jigsaw zum Erstellen einer Website

Jetzt haben Sie erfolgreich Jigsaw in der ServBay-Umgebung installiert und konfiguriert und können es zum Erstellen Ihrer Website verwenden. Hier sind einige häufige Operationen:

Blog-Artikel erstellen

1. Artikel erstellen

   Erstellen Sie im source/_posts-Verzeichnis neue Markdown-Dateien, um Blog-Artikel hinzuzufügen. Zum Beispiel, erstellen Sie eine 2024-06-05-mein-erster-beitrag.md Datei:

   ---
   title: "Mein erster Beitrag"
   date: 2024-06-05
   ---
   
   # Mein erster Beitrag
   
   Dies ist der Inhalt meines ersten Beitrags.

2. Website neu bauen

   Führen Sie den folgenden Befehl aus, um die Jigsaw-Website zu bauen:

   ./vendor/bin/jigsaw build

Anpassung von Styles und Skripten

1. Styles bearbeiten

   Bearbeiten Sie die SCSS-Dateien im source/_assets/sass-Verzeichnis, um das Design Ihrer Website anzupassen.

2. Skripte bearbeiten

   Bearbeiten Sie die JavaScript-Dateien im source/_assets/js-Verzeichnis, um das interaktive Verhalten Ihrer Website anzupassen.

3. Ressourcen kompilieren

   Führen Sie den folgenden Befehl aus, um die SCSS- und JavaScript-Dateien zu kompilieren:

   npm run dev

Mit den oben genannten Schritten haben Sie Jigsaw erfolgreich in der ServBay-Umgebung installiert und konfiguriert und beginnen nun, Ihre Website zu erstellen. Die Einfachheit und Flexibilität von Jigsaw machen es zur idealen Wahl für das Erstellen statischer Websites.