Installer et configurer Jigsaw dans l'environnement de ServBay

Qu'est-ce que Jigsaw ?

Jigsaw est un générateur de site statique basé sur Laravel, idéal pour créer des documentations, des blogs et des sites statiques simples. Il offre un système de templating flexible et des outils de développement puissants, rendant la construction et la gestion des sites statiques très simples.

Étapes pour installer Jigsaw

Dans cet article, nous allons expliquer comment installer et configurer Jigsaw dans l'environnement de ServBay.

Étape 1 : Créer le répertoire du projet

Tout d'abord, créez un nouveau répertoire de projet dans le répertoire www de ServBay :

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

Étape 2 : Utiliser Composer pour créer un projet Jigsaw

ServBay est livré avec Composer, donc nous pouvons directement utiliser Composer pour créer un projet Jigsaw :

composer create-project tightenco/jigsaw

Étape 3 : Configurer le serveur web

1. Ajouter un nouveau site

   Ouvrez ServBay, cliquez sur l'onglet « Hôtes » et ajoutez un nouveau site web :

   • Nom : My Jigsaw Site
   • Domaine : servbay-jigsaw.local
   • Type de site web : PHP
   • Version PHP : sélectionnez la version PHP correspondante
   • Répertoire racine du site web : /Applications/ServBay/www/servbay-jigsaw-app/build_local

2. Enregistrer la configuration

   Enregistrez la configuration.

Étape 4 : Construire le site Jigsaw

1. Installer les dépendances

   Exécutez la commande suivante dans le répertoire du projet pour installer les dépendances npm :

   npm install

2. Construire le site

   Exécutez la commande suivante pour construire le site Jigsaw :

   ./vendor/bin/jigsaw build

Étape 5 : Exécuter le serveur de développement local

1. Accéder au serveur de développement

   Ouvrez un navigateur et accédez à https://servbay-jigsaw.local, vous verrez la version locale du site Jigsaw.

Étape 6 : Personnaliser le site Jigsaw

1. Modifier le contenu

   Modifiez les fichiers Markdown et les fichiers de templates Blade dans le répertoire source pour personnaliser le contenu et la mise en page de votre site.

2. Ajouter une nouvelle page

   Créez de nouveaux fichiers Markdown dans le répertoire source pour ajouter de nouvelles pages. Par exemple, créez un fichier about.md :

   ---
   title: "About Us"
   ---
   
   # About Us
   
   This is the about page.

3. Configurer le menu de navigation

   Modifiez les fichiers de templates Blade pour le menu de navigation dans le répertoire source/_layouts pour ajouter de nouveaux liens de navigation.

4. Reconstruire le site

   Chaque fois que vous modifiez le contenu ou les templates, exécutez à nouveau la commande suivante pour construire le site Jigsaw :

   ./vendor/bin/jigsaw build

Utiliser Jigsaw pour construire un site web

Vous avez maintenant installé et configuré Jigsaw dans l'environnement de ServBay et pouvez commencer à l'utiliser pour construire votre site web. Voici quelques opérations courantes :

Créer des articles de blog

1. Créer un article

   Créez un nouveau fichier Markdown dans le répertoire source/_posts pour ajouter un article de blog. Par exemple, créez un fichier 2024-06-05-my-first-post.md :

   ---
   title: "My First Post"
   date: 2024-06-05
   ---
   
   # My First Post
   
   This is the content of my first post.

2. Reconstruire le site

   Exécutez la commande suivante pour construire le site Jigsaw :

   ./vendor/bin/jigsaw build

Personnaliser les styles et les scripts

1. Éditer les styles

   Modifiez les fichiers SCSS dans le répertoire source/_assets/sass pour personnaliser les styles de votre site.

2. Éditer les scripts

   Modifiez les fichiers JavaScript dans le répertoire source/_assets/js pour personnaliser le comportement interactif de votre site.

3. Compiler les ressources

   Exécutez la commande suivante pour compiler les fichiers SCSS et JavaScript :

   npm run dev

En suivant ces étapes, vous avez réussi à installer et configurer Jigsaw dans l'environnement de ServBay et à commencer à l'utiliser pour construire votre site web. La simplicité et la flexibilité de Jigsaw en font un choix idéal pour construire des sites statiques.