Manuel d’utilisation du dossier partagé

Table des Matières

1. Comment monter le dossier partagé

Le dossier partagé peut être monté sur votre ordinateur à partir d’un des protocoles suivants :

SMB / CIFS / Samba
SFTP, une extension de SSH

Monter avec SMB / CIFS / Samba

Sur Windows

Ouvrir l’Explorateur de Fichiers
Dans le panneau de gauche, clic-droit sur “Ce PC”
Dans le menu contextuel, sélectionner “Ajouter un emplacement réseau”
Cliquer sur Suivant dans la fenêtre de bienvenue.
Cliquer sur la seule option, “Choisissez un emplacement réseau personnalisé”
Entrer l’adresse du dossier partagé distant sous la forme //SERVER/SHARE

Où :

SERVER est le nom de domaine de votre serveur (e.g. monsiteweb.com) ou alors l’adresse IP de votre serveur.

SHARE est le nom du dossier SMB distant à monter. Il vous sera communiqué par votre administrateur.

Choisir un nom pour l’emplacement réseau, qui sera affiché dans l’explorateur de fichiers. Un nom est suggéré.
Cliquer sur Finir et vous devriez être capable d’utiliser le dossier partagé.

Quelques explications graphiques en anglais

Monter avec SSH / SFTP

Cette section est en trois parties :

Nous présentons vos identifiants ssh et vos droits sur le serveur.
Nous expliquons comment vous connecter à votre serveur avec un client ssh.
Puis, nous vous expliquons comment monter le dossier partagé.

Identifiants ssh et vos droits sur le serveur

Vous pouvez accéder à votre serveur, avec le protocole ssh, grâce aux informations suivantes

clef	valeur d’exemple
login (nom de l’utilisateur sur le serveur)	client
host (nom de domaine du serveur)	votresiteweb.com
mot de passe	VOTREMOTDEPASSE
point de montage distant (un dossier sur le serveur)	/pambda

Votre administrateur vous communiquera toutes ces valeurs.

Vos droits sur le serveur

dossier	permission
votresiteweb-input	lecture/écriture
votresiteweb-input-edited	lecture

Se connecter via ssh

Le client ssh sur Windows

Vous devriez avoir un client ssh par défaut. Si ça n’est pas le cas : Démarrer > Paramètres > Applications > applications facultatives > Ajouter une app > client OpenSSH

Le client ssh sur Linux et MacOS

Un client ssh devrait être présent par défaut, sinon installez le client openssh.

Utiliser le client ssh

Ouvrir un terminal : p. ex., sur windows, Démarrer > Cmd.
Exécutez la commande ssh client@votresiteweb.com
La première fois que vous vous connectez, il vous sera posé une question (oui/non). Tapez oui pour continuer la connexion et ajouter votresiteweb.com à la liste des hôtes connus.
Quand il vous sera demandé, entrez votre mot de passe ssh.
L’invite de commande (le début de la ligne) devrait changer et vous devriez voir quelque chose comme client@machine:~. Cela signifie que vous êtes bien connecté et logué sur le serveur !
Sur le serveur, vérifiez vos permissions en exécutant la commande ls -l /pambda.

Vous devriez voir quelque chose comme

drwxrwxr-x  8 admin admin        4096 Dec 20 16:52  votresiteweb-input-edited
drwxrwxr-x  8 client client      4096 Dec 20 16:52  votresiteweb-input-prod
drwxrwxr-x  8 pambda pambda      4096 Dec 20 16:52  votresiteweb-output

Cela signifie que votre utilisateur sur le serveur a les bons droits sur les dossiers.

Déconnectez-vous du serveur en fermant la fenêtre qui contient la ligne de commande.

Monter le dossier partagé comme un dossier local

Sur Windows

Installez l’utilitaire SSHFS-Win

Téléchargez et installez les logiciels suivants. Pour chacun, téléchargez et exécutez les fichiers *.exe ou *.msi qui conviennent à votre système d’exploitation.

WinFsp : permet la création d’un système de fichiers dans l’espace utilisateur. (L’équivalent de FUSE, sur Linux, mais pour Windows)
SSHFS-Win : permet de monter un système de fichiers distant en utilisant le protocole SFTP. (équivalent de SSHFS sur Linux)
SSHFS-Win-Manager : une interface graphique bien pratique pour gérer SSHFS-Win.

Monter le dossier

Lancez SSHFS-Win-Manager
Ajoutez la connexion et remplissez les champs de texte avec vos identifiants ssh. (Ici nous prenons les valeurs d’exemple précédentes.)
1. Nous recommandons d’utiliser
```
client@votresiteweb.com:22 /pambda
```
  comme valeur pour “NAME”
2. “IP/HOST” sera votresiteweb.com
3. “USER” sera client
4. pour “AUTHENTICATION METHOD”, choisissez “PASSWORD”
5. “PASSWORD” sera YOURPASSWORD
6. “PATH” sera /pambda
7. Laissez la “DRIVE LETTER” suggérée par SSHFS-Win-Manager
8. Sauvegardez
Cliquez sur l’icône de connexion
Cliquez sur l’icône de dossier

Vous devriez voir le contenu du dossier partagé. Vous pouvez maintenant lire et modifier le contenu de ce dossier comme s’il s’agissait d’un dossier local !

Sur Linux

Sur la plupart des distributions

Ajoutez cette ligne au fichier /etc/fstab

client@votresiteweb.com:/pambda /votresiteweb.com/pambda fuse.sshfs allow_other,_netdev,noauto,x-systemd.automount,x-systemd.idle-timeout=0,comment=systemd.automount,transform_symlinks,follow_symlinks 0 2

puis

systemctl daemon-reload
systemctl restart votresiteweb.com-pambda.automount

(Selon le nom de votre montage dans fstab, votre service pourra avoir un nom différent. Vous pouvez lister les services de automount avec la commande systemctl list-unit-files --type automount.)

Après ceci, le dossier partagé devrait être monté au chemin local /votresiteweb.com/pambda, sur votre système.

2. Organisation du dossier partagé

Fichiers initiaux

Nous listons ici les fichiers nécessaires à la racine du dossier partagé.

index.ext: Ce fichier définit la page d’accueil de votre site internet. Quand quelqu’un va à l’URL https://yourwebsite.com, il verra cette page web en premier. (Remplacez l’extension “ext” avec l’extension du format que vous avez choisi)

Le nom de ce fichier, “index”, est une ancienne convention en développement web.

favicon.ico: C’est une petite image qui est affichée dans les onglets des navigateurs internet. La plupart du temps, c’est le logo de votre site.

Vous pouvez utiliser un générateur de favicon en ligne.

.fonts.ttf: Un fichier avec des fontes de caractères qui peut être utilisée sur votre site web.

Vous pouvez prévisualiser et télécharger de nombreuses fontes sur le site fontsquirrel.com.

config-client.json: Un fichier de configuration au format json. La section “Configuration du thème” explique ce fichier plus en détail.
.COMPONENT.ext: Selon le thème que vous avez choisi dans le fichier de configuration, vous aurez besoin de définir les différents composants du thème.

À la racine du dossier partagé, les fichiers et dossiers, qui définissent le thème et les composants, commencent par des points.

Quelques exemples de composants :

.header.ext (habituellement .header.html) définit l’en-tête (au-dessus de la barre de navigation)
.navbar.ext définit la barre de navigation (sous l’en-tête). C’est grosso modo une liste à puces qui définit les liens de la barre de navigation.
.footer.ext définit le pied de page, Tout en bas de votre site web.
.sidebar.ext sera requis si vous choisissez le thème “sidebar” (barre latérale). Ce fichier définit le contenu de la barre latérale : un panneau sur la gauche de votre page, qui sera affiché sur toutes les pages web.

Fichiers des composants

Les composants de votre site internet comme la barre de navigation, le pied de page, la barre latérale (s’il y en a une), etc. sont définis à partir de vos fichiers également.

fichier d’exemple	composant correspondant
fichier html pour l’en-tête	Cet en-tête, au-dessus de la barre de navigation
fichier markdown pour la barre de navigation	Cette barre de navigation, au-dessous de l’en-tête

Configuration du thème

Le fichier de configuration est principalement une liste de “clef”: “valeur”

{
    "theme": "default",
    "colorNavBar": "#060654",
    "colorNavBarHover": "#ec6f1d",
    "colorNavBarText": "#ffffff",
    "colorFooter": "#060654",
    "colorHamburgerMenu": "#ec6f1d",
    "gapBetweenPara": "1em",
    "navBarFontSize": "1.2rem",
    "fontSize": "1rem",
    "lineHeight": "1.5",
    "allHeadersInclude": "",
    "displayFigCaption": false,
    "fontFamily": "arial, sans-serif"
}

Les thèmes disponibles :

default : pareil que pambda.com.
sidebar : avec une barre latérale (“sidebar” en anglais), que vous définissez grâce au fichier de composant .sidebar.ext.
custom : utilisez votre propre thème !

Avec le thème custom, les autres options du fichier de configuration n’ont plus aucune utilité.

Les couleurs sont définies avec une des syntaxes CSS.

Les longueurs sont, elles aussi, définies avec une des syntaxes CSS et admettent ainsi différentes unités de mesure.

Certaines valeurs sont des booléens et admettent soit true (vrai) soit false (faux).

Toutes les clefs ont des valeurs par défaut. Si une valeur n’est pas précisée, la valeur par défaut sera utilisée.

Le thème custom

Le thème custom utilise un dossier spécial à la racine du dossier partagé, nommé .templates. Dedans, l’utilisateur a un total contrôle sur les fichiers html, css et javascript qui servent d’ossature à son site. Plus d’informations à ce sujet bientôt. L’exemple de dossier partagé plus bas, utilise un thème custom.

Exemple de dossier partagé

Inspirez-vous du dossier de pambda.fr.