From 75a62c57897f0e19433eadbfd9cf7c1409b7f047 Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Tue, 28 Feb 2023 21:54:25 +0100 Subject: try to flatten --- content/prise_en_main/_index.md | 4 +- .../avec-un-g\303\251n\303\251rateur.md" | 50 +++++++ content/prise_en_main/aws-cli.md | 57 ++++++++ content/prise_en_main/compte.md | 2 + content/prise_en_main/creer-du-contenu.md | 13 ++ content/prise_en_main/cryptpad.md | 2 + content/prise_en_main/drive_garage.md | 150 +++++++++++++++++++++ content/prise_en_main/emails.md | 2 + .../initialiser-votre-acc\303\250s.md" | 34 +++++ content/prise_en_main/jitsi.md | 2 + content/prise_en_main/matrix.md | 2 + content/prise_en_main/mettre-place-DNS.md | 38 ++++++ content/prise_en_main/plume.md | 2 + content/prise_en_main/publier-le-contenu.md | 32 +++++ content/prise_en_main/rclone.md | 104 ++++++++++++++ content/prise_en_main/rclone_mount.md | 53 ++++++++ .../prise_en_main/statique-comment-\303\247a.md" | 16 +++ content/prise_en_main/stockage.md | 10 ++ content/prise_en_main/stockage/_index.md | 7 - content/prise_en_main/stockage/drive_garage.md | 148 -------------------- content/prise_en_main/stockage/rclone_mount.md | 51 ------- content/prise_en_main/web.md | 26 ++++ content/prise_en_main/web/_index.md | 23 ---- .../web/cr\303\251er-du-contenu/_index.md" | 11 -- .../avec-un-g\303\251n\303\251rateur.md" | 48 ------- .../cr\303\251er-du-contenu/\303\240-la-main.md" | 39 ------ .../web/initialiser-votre-acc\303\250s.md" | 32 ----- content/prise_en_main/web/mettre-place-DNS.md | 36 ----- .../prise_en_main/web/publier-le-contenu/_index.md | 30 ----- .../web/publier-le-contenu/aws-cli.md | 55 -------- .../prise_en_main/web/publier-le-contenu/rclone.md | 102 -------------- .../prise_en_main/web/publier-le-contenu/winscp.md | 60 --------- .../web/statique-comment-\303\247a.md" | 14 -- content/prise_en_main/winscp.md | 62 +++++++++ "content/prise_en_main/\303\240-la-main.md" | 41 ++++++ 35 files changed, 701 insertions(+), 657 deletions(-) create mode 100644 "content/prise_en_main/avec-un-g\303\251n\303\251rateur.md" create mode 100644 content/prise_en_main/aws-cli.md create mode 100644 content/prise_en_main/creer-du-contenu.md create mode 100644 content/prise_en_main/drive_garage.md create mode 100644 "content/prise_en_main/initialiser-votre-acc\303\250s.md" create mode 100644 content/prise_en_main/mettre-place-DNS.md create mode 100644 content/prise_en_main/publier-le-contenu.md create mode 100644 content/prise_en_main/rclone.md create mode 100644 content/prise_en_main/rclone_mount.md create mode 100644 "content/prise_en_main/statique-comment-\303\247a.md" create mode 100644 content/prise_en_main/stockage.md delete mode 100644 content/prise_en_main/stockage/_index.md delete mode 100644 content/prise_en_main/stockage/drive_garage.md delete mode 100644 content/prise_en_main/stockage/rclone_mount.md create mode 100644 content/prise_en_main/web.md delete mode 100644 content/prise_en_main/web/_index.md delete mode 100644 "content/prise_en_main/web/cr\303\251er-du-contenu/_index.md" delete mode 100644 "content/prise_en_main/web/cr\303\251er-du-contenu/avec-un-g\303\251n\303\251rateur.md" delete mode 100644 "content/prise_en_main/web/cr\303\251er-du-contenu/\303\240-la-main.md" delete mode 100644 "content/prise_en_main/web/initialiser-votre-acc\303\250s.md" delete mode 100644 content/prise_en_main/web/mettre-place-DNS.md delete mode 100644 content/prise_en_main/web/publier-le-contenu/_index.md delete mode 100644 content/prise_en_main/web/publier-le-contenu/aws-cli.md delete mode 100644 content/prise_en_main/web/publier-le-contenu/rclone.md delete mode 100644 content/prise_en_main/web/publier-le-contenu/winscp.md delete mode 100644 "content/prise_en_main/web/statique-comment-\303\247a.md" create mode 100644 content/prise_en_main/winscp.md create mode 100644 "content/prise_en_main/\303\240-la-main.md" (limited to 'content/prise_en_main') diff --git a/content/prise_en_main/_index.md b/content/prise_en_main/_index.md index c97ae39..7687c80 100644 --- a/content/prise_en_main/_index.md +++ b/content/prise_en_main/_index.md @@ -3,6 +3,8 @@ title: "Prise en main" description: "Prise en main" weight: 10 sort_by: "weight" +extra: + parent: null --- Ce manuel vous accompagne dans la découverte de nos outils. @@ -60,7 +62,7 @@ Je veux créer un site web qui soit référencé dans les moteurs de recherche, un espace où je puisse gérer finement mon contenu, et vers lequel je peux envoyer des gens s'y référer -[↣ Apprendre à créer un site web](@/prise_en_main/web/_index.md) +[↣ Apprendre à créer un site web](@/prise_en_main/web.md) # URL des services diff --git "a/content/prise_en_main/avec-un-g\303\251n\303\251rateur.md" "b/content/prise_en_main/avec-un-g\303\251n\303\251rateur.md" new file mode 100644 index 0000000..c6da234 --- /dev/null +++ "b/content/prise_en_main/avec-un-g\303\251n\303\251rateur.md" @@ -0,0 +1,50 @@ +--- +title: "Avec un générateur" +description: "Créer du contenu avec un générateur" +sort_by: "weight" +date: 2022-09-01 +weight: 2 +extra: + parent: créer-du-contenu +--- + +Si vous souhaitez par exemple écrire un blog, vous allez probablement avoir une page par post. À la longue, on peut sans problème arriver à des dizaines de pages... Si on les écrit à la main, il va falloir copier/coller une bonne partie du code HTML, mais pas tout. Pour éviter ce travail rébarbatif, il existe ce qu'on appelle des générateurs de sites statiques. Ils vous permettent d'écrire dans une syntaxe très simple (Markdown) vos contenus, sans vous soucier du HTML ou du CSS, car ils emballeront eux-mêmes vos écrits dans des modèles prévus à cet effet. [Le guide que vous êtes en train de lire en ce moment même utilise un tel outil !](https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr) + +### Choisir un générateur et un thème +Il existe de nombreux générateurs de sites statiques. On peut citer [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/), [Zola](https://www.getzola.org/), et bien d'autres... En général, ils se ressemblent beaucoup. À titre indicatif, pour ce guide, nous utilisons Zola. Nous baserons nos exemples sur lui. Si votre système d'exploitation est Linux, cherchez dans votre gestionnaire de paquet si vous trouvez l'un d'entre eux. Zola est ainsi facilement installable sur Arch, Ubuntu, et Fedora. + +Une fois un générateur de site statique installé, rendez-vous sur le site officiel de celui-ci pour choisir un thème. Chez Zola, il faut aller [ici](https://www.getzola.org/themes/). Si vous cliquez sur l'un d'entre eux, vous aurez des instructions sur comment l'installer. Il s'agit souvent de télécharger le thème dans le dossier correspondant à votre site, et de modifier le fichier `config.toml`, nécessaire pour Zola, afin de sélectionner le thème. + +### Décrire le contenu +Pour écrire le contenu de vos pages, ou de vos billets de blog par exemple, il vous faudra utiliser la syntaxe Markdown. Rassurez-vous, elle a été pensée pour être très simple et peut-être apprise en quelques minutes. Voici un exemple : +``` +# Ceci est le titre principal +## Ceci est un sous-titre +Ceci est du texte tout à fait normal. *Cette partie-ci du texte sera en italique*. **Cette partie-là sera en gras**. + +## Ceci est encore un sous-titre +### Ceci est un sous-sous-titre +Voici du texte pour introduire la liste à puce qui va suivre : +* première élément de la liste +* second élément de la liste +* troisième élément de la liste +``` +Quand on écrit du texte sans mettre quoi que ce soit autour ou avant, cela deviendra du texte tout à fait normal. On peut mettre un ou plusieurs dièses au début de la ligne pour en faire un titre. On peut mettre du texte en italique ou en gras avec des astérisques. Un astérisque en début de ligne provoque une liste à puces. Bref, cette syntaxe n'est pas compliquée, et vous pouvez facilement trouver plein de tutoriels en ligne pour la connaître. [Framasoft, par exemple, propose un bon guide](https://docs.framasoft.org/fr/grav/markdown.html). + +Une fois votre fichier écrit, enregistrez-le avec l'extension `.md`, par exemple sous le nom `recette-tartre-au-citron.md`. L'idée est qu'à chaque page de votre site correspond un fichier `.md`, et ceux-ci seront regroupés dans un dossier. Vous trouverez [ici](https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr/src/branch/main/content) les fichiers Markdown écrits pour faire ce guide. + +Cependant, il reste juste une petite chose à faire lorsque vous avez fini votre texte : écrire l'en-tête au dessus du markdown, qui donnera au générateur des informations importantes sur ce contenu. On encadre cet en-têtre avec trois signes plus. Voici un exemple basé sur cette page : +``` ++++ +title = "Avec un générateur" +description = "Créer du contenu avec un générateur" +date = 2022-09-01 ++++ + +# Titre +Texte de la page... +``` +Comme vous l'avez peut-être compris, il s'agit de donner le titre de cette page, sa description, et sa date d'écriture. D'autres informations peuvent être rajoutées, cela dépend du générateur et du thème sélectionnés. + +### Générer les pages +Vous avez donc des fichiers `.md` renfermant vos contenus, et un thème qui vous plaît. Avec un terminal, positionnez-vous dans le dossier racine de votre site projet. Si vous utilisez Zola, celui-ci devrait contenir un fichier `config.toml`, vous pouvez alors faire `zola build`. Cela va générer l'intégralité de votre site dans le dossier `public/`. Vous constaterez donc qu'il sera rempli de fichiers `.html` et `.css`, [vous êtes alors prêt(e) à passer à la publication](../../publier-le-contenu/) ! diff --git a/content/prise_en_main/aws-cli.md b/content/prise_en_main/aws-cli.md new file mode 100644 index 0000000..da17249 --- /dev/null +++ b/content/prise_en_main/aws-cli.md @@ -0,0 +1,57 @@ +--- +title: "aws-cli" +description: "Publier avec aws-cli" +date: 2022-09-01 +weight: 1 +extra: + parent: publier-le-contenu +--- + +Nous allons désormais verser votre site sur Garage, ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». + +### Paramétrer votre accès localement +Pour verser votre site sur Garage, nous allons utiliser l'outil de base pour faire des commandes S3 : [aws-cli](https://github.com/aws/aws-cli) et son binaire, `aws`. À chaque fois, il aura besoin de savoir : +* l'identifiant de votre clé d'accès +* votre clé d'accès secrète +* la région et l'URL de l'infrastructure Garage qui hébergera votre site + +En temps normal, il faudrait préciser ces paramètres à chaque fois (donc toutes les fois que vous voulez mettre quelque chose sur votre site, ou le modifier). Pour éviter ça, on va stocker ces informations dans un fichier ; il suffira de l'invoquer avant de faire ses modifications. Dans votre répertoire personnel, créez un fichier nommé par exemple `.awsrc`. À l'intérieur, mettez le contenu suivant : +``` +export AWS_ACCESS_KEY_ID={votre identifiant de clé d'accès} +export AWS_SECRET_ACCESS_KEY={votre clé d'accès privée} +export AWS_DEFAULT_REGION='garage' + +function aws { command aws --endpoint-url https://garage.deuxfleurs.fr $@ ; } +aws --version +``` +Il vous faut bien entendu insérer vos deux clés aux endroits spécifiés. Une fois ceci fait, dans le futur, avant d'utiliser `aws`, il vous faudra faire `source ~/.awsrc`, et cela mettra en place tous les paramètres pour vous. Vous serez automatiquement authentifié et vous parlerez à la bonne infrastructure Garage. + +### Configurer la page par défaut et celle pour les erreurs +Puisqu'on est sur la configuration S3, profitons-en pour paramétrer une page d'accueil et une page d'erreur. En effet, les URL qu'on utilise pour naviguer sur votre site correspondront à la hiérarchie de fichiers présents sur Garage. Si on visite `https://votre-site.fr/blog/recette-de-gateau.html`, Garage va simplement servir le fichier `blog/recette-de-gateau.html`, en partant de la racine du bucket. Mais que ce passe-t-il si on demande à voir `https://votre-site.fr/blog/` ? Garage ne peut pas retourner un dossier; et de toute façon cela ne fonctionnerait pas, puisqu'un dossier n'a pas données propre à lui-même, il ne fait que contenir des fichiers distincts en son sein. On voit pourtant souvent ce genre d'URL en ligne. En fait, les serveurs web sont configurés pour que si aucun fichier du dossier n'est spécifié, alors on va utiliser celui avec un nom paramétré à l'avance. C'est de ça dont on parle. +De même, lorsque quelqu'un demande une page qui n'existe pas, que peut faire Garage ? Dans la même logique, on va lui donner un nom de fichier à servir par défaut si jamais cela arrive. + +Après avoir fait votre `source ~/.awsrc`, faites : +``` +aws s3 website exemple-un.fr --index-document index.html --error-document erreur.html +``` +si votre `aws` est en version 2.x, ou +``` +aws s3api put-bucket-website --bucket exemple-un.fr --website-configuration ' +{ + "ErrorDocument": { + "Key": "/errors/4xx.html" + }, + "IndexDocument": { + "Suffix": "index.html" + } +} +' +``` +s'il est en version 1.x . Pensez à remplacer `exemple-un.fr` par votre nom de domaine à vous ! + +### Publier +On y est ! Avec un terminal, positionnez-vous dans le répertoire qui reflète ce que vous voulez mettre en ligne. Celui-ci devrait contenir des fichiers en `.html`, `.css`, ou `.js`, mais pas de `.md`. Si vous ne l'avez pas fait, faites `source ~/.awsrc`, et lancez ensuite : +``` +aws s3 sync . s3://exemple-un.fr +``` +si vous avez `aws` en version 2. N'oubliez pas de mettre votre nom de domaine à la place d'`exemple-un.fr`. Vos fichiers devrait être téléversés. Une fois le processus fini, vous devriez pouvoir ouvrir un navigateur internet tel que Firefox par exemple, tapez votre nom de domaine dans la barre URL, et naviguer sur votre site. En cas de pépin, essayez d'actualiser la page en faisant `ctrl`+`shift`+`r` avec votre clavier, ça vous garantira que votre navigateur récupère le vrai contenu en ligne au lieu de piocher dans le cache local sur votre ordinateur. diff --git a/content/prise_en_main/compte.md b/content/prise_en_main/compte.md index a600824..941d0fc 100644 --- a/content/prise_en_main/compte.md +++ b/content/prise_en_main/compte.md @@ -2,6 +2,8 @@ title: "Compte unique" description: "Compte unique pour tous les services" weight: 10 +extra: + parent: null --- Vous bénéficier d'un compte unique pour accéder à (presque) tous les services de Deuxfleurs. diff --git a/content/prise_en_main/creer-du-contenu.md b/content/prise_en_main/creer-du-contenu.md new file mode 100644 index 0000000..67f63d9 --- /dev/null +++ b/content/prise_en_main/creer-du-contenu.md @@ -0,0 +1,13 @@ +--- +title: "Créer du contenu" +description: "Comment écrire ses pages et son contenu" +sort_by: "weight" +weight: 0 +date: 2022-09-01 +extra: + parent: publier-le-contenu +--- + +Votre site est désormais complètement configuré. Avant de publier du contenu, il faut écrire celui-ci ! + +Vous pouvez, au choix, [l'écrire à la main](./a-la-main/), ou vous [faire assister par un générateur](./avec-un-generateur/). diff --git a/content/prise_en_main/cryptpad.md b/content/prise_en_main/cryptpad.md index 36295a6..bde163f 100644 --- a/content/prise_en_main/cryptpad.md +++ b/content/prise_en_main/cryptpad.md @@ -2,6 +2,8 @@ title: "Cryptpad" description: "Cryptpad" weight: 50 +extra: + parent: null --- # Accès à Cryptpad diff --git a/content/prise_en_main/drive_garage.md b/content/prise_en_main/drive_garage.md new file mode 100644 index 0000000..9694894 --- /dev/null +++ b/content/prise_en_main/drive_garage.md @@ -0,0 +1,150 @@ +--- +title: "Sous Linux (avancé)" +description: "Drive Garage avec Rclone (guide avancé)" +weight: 10 +extra: + parent: 'stockage' +--- + +**Public visé:** des utilisateurs sous Linux n'ayant pas peur de la ligne de commande. + +**Objectif:** + +- stocker vos données chez Deuxfleurs et les faire apparaître dans votre navigateur de fichier comme un disque réseau, ce qui vous permet d'y accéder comme à des fichiers normaux. +- optionnellement, ajouter une couche de chiffrement afin que vos fichiers ne soient pas stockés en clair sur les serveurs de Deuxfleurs.i + +**Attention:** ce tutoriel vous permet d'accéder à un dossier partagé depuis plusieurs machines. Cependant, Garage n'est pas capable de gérer l'édition en simultané d'un document depuis plusieurs lieux différents. Avec la méthode présentée ici, **ne modifiez jamais un fichier stocké sur Garage depuis plusieurs ordinateurs en même temps: vous pourriez perdre des données!** + +**En cas de problème avec ce tutoriel:** rappporter votre souci sur le chan Matrix `#tech:deuxfleurs.fr` ou directement par mail à `alex [at] adnab.me`. + +## 1. Obtenir des clefs d'accès Garage + +La première étape consiste à obtenir vos clefs d'accès Garage. Pour l'instant la procédure n'est pas encore automatisée: vous devez demander à un administrateur qu'il vous envoie ces clefs manuellement. Demandez-lui également de créer un "bucket" pour vos fichiers personnels: pour l'instant vous ne pouvez pas encore le faire vous-même. + +Vous devriez obtenir une paire de clefs de la forme suivante: + +- L'identifiant de votre clé d'accès (exemple : `GKae0f36c...`), également connu sous le nom de "Access key" ou "Access key ID" +- Votre clé d'accès secrète (exemple : `ae6df87221edd...`), également connue sous le nom de "Secret key" ou "Secret access key" + +## 2. Configurer `rclone` + +Avant de suive ce guide, assurez-vous que la commande `rclone` est installée sur votre système Linux. + +La première étape consiste à configurer `rclone` pour accéder à vos dossier stockés sur Garage. Cette configuration est suffisante dans un premier temps si vous ne souhaitez pas chiffrer vos fichiers sur le serveur. La section suivante est optionnelle et permettera d'introduire la couche de chiffrement. + +### 2.1. Configurer le backend Garage + +Créez le fichier `~/.config/rclone/rclone.conf` si celui-ci n'existe pas. Ensuite, modifiez ce fichier pour y ajouter la section suivante: + +```ini +[grgdf] +type = s3 +provider = Other +env_auth = false +access_key_id = GKae0f36c... +secret_access_key = ae6df87221edd... +endpoint = https://garage.deuxfleurs.fr +region = garage +``` + +Précisez les bonnes valeurs de `access_key_id` et `secret_access_key` que vous avez obtenu dans la phase 1. + +Ensuite, testez votre configuration en faisant `rclone lsd grgdf:`. Vous devriez avoir une sortie ressemblant à ceci: + +``` +$ rclone lsd grgdf: + -1 2021-11-24 17:10:05 -1 alex.perso +$ +``` + +Ce résultat indique que vous disposez d'un bucket (un dossier de premier niveau) sur le stockage, ici appellé `alex.perso`. Celui-ci a été créé par un administrateur et vous ne pouvez pas en créer d'autre vous-même. Retenez son nom pour l'étape suivante. + +### 2.2. Configurer la couche de chiffrement `rclone` + +Pour cette étape, nous allons utiliser l'assistant de configuration interactif de `rclone`. Si vous ne souhaitez pas utiliser le chiffrement, cette étape est optionnelle, mais elle est en réalité simple à réaliser donc je vous conseille de le faire. + +**Prenez garde à copier vos mots de passez de chiffrement à plusieurs endroits : si vous les perdez, vos données deviendront définitivement illisibles !** + +Pour lancer l'assistant interactif, tapez `rclone config` dans un terminal. Ensuite, entrez les valeurs suivantes: + +- Tapez `n` pour `New remote` +- Dans `name`, entrez le nom `grgdfcrypt` +- Comme type de stockage, choisissez `Encrypt or décrypt a remote` (option `12`) +- Comme remote, entrez `grgdf:` suivi du nom du bucket qui vous a été donné, par exemple: `grgdf:alex.perso`. +- Choisissez l'option `encrypt the file names` (option `1` ou mode `standard`) +- Choisissez l'option `encrypt directory names` (option `1`) +- Pour le premier mot de passe, tapez `g` pour `Generate password`. +- Entrez 128 pour la taille du mot de passe. +- Prenoez note du mot de passe affiché et gardez-le en lieu sûr pour être sûr de pouvoir déchiffrer vos données dans le future. Confirmez en tapant `y` +- On vous demande ensuite si vous voulez utiliser un sel personalisé. Tapez `g` pour en créer un automatiquement. +- Entrez 128 pour la taille du sel. +- Prenez note également du sel, qui fonctionne comme un second mot de passe. Confirmez en tapant `y` +- Tapez `n` à la question `edit advanced config?` +- Vérifiez la configuration proposée, et validez en tapant `y` + +Vous pouvez vérifier que votre configuration a bien réussi en affichant le contenu du fichier `~/.config/rclone/rclone.conf`. Vous devriez y voir une section comme la suivante: + +```ini +[grgdfcrypt] +type = crypt +remote = grgdf:alex.perso +password = <...> +password2 = <...> +``` + +Pour tester que votre dossier chiffré est bien configuré, vous pouvez par exemple: + +- taper `rclone ls grgdfcrypt:` pour lister tous les fichiers présents (cette commande renvoie initalement un résultat vide car il n'y a aucun fichier) +- copier un fichier local vers le dossier chiffré en tapant `rclone copy mon/fichier/local.txt grgdfcrypt:monfichier.txt`, ce fichier devrait ensuite apparaître en tapant `rclone ls grgdfcrypt:` + +## 3. Configurer un service `systemd` utilisateur + +Nous allons maintenant faire en sorte que vos dossiers Garage apparaissent comme des disques réseau montés sur votre système de fichier, ce qui vous permettera d'y accéder depuis votre explorateur de fichier comme s'il s'agissait de dossiers normaux. + +Pour commencer, choissez un endroit où monter votre disque réseau. Dans cet exemple, j'utiliserai `$HOME/mnt/grgdf` pour le dossier non chiffré, et `$HOME/mnt/grgdfcrypt` pour le dossier chiffré. Créez ces deux dossier vides: + +```bash +mkdir -p $HOME/mnt/grgdf +mkdir -p $HOME/mnt/grgdfcrypt +``` + +Créez ensuite le fichier `~/.config/systemd/user/rclone-mount@.service` et copiez-y le contenu suivant: + +```ini +[Unit] +Description=Mount a directory using rclone +After=network.target + +[Service] +ExecStartPre=sh -c "fusermount -u ${HOME}/mnt/%i || exit 0" +ExecStart=/usr/bin/rclone mount --vfs-cache-mode minimal --cache-dir ${HOME}/.cache/rclone/%i %i: ${HOME}/mnt/%i + +RestartSec=10 +Restart=always + +[Install] +WantedBy=default.target +``` + +Vous pouvez ensuite monter ("activer") vos dossiers Garage avec l'une des commandes suivantes: + +- `systemctl --user start rclone-mount@grgdf` pour le dossier non chiffré +- `systemctl --user start rclone-mount@grgdfcrypt` pour le dossier chiffré + +Pour que ceux-ci soient montés automatiquement en permanence, tapez: + +- `systemctl --user enable rclone-mount@grgdf` pour le dossier non chiffré +- `systemctl --user enable rclone-mount@grgdfcrypt` pour le dossier chiffré + +Pour tester le fonctionnement de votre dossier Garage, vous pouvez naviguer dans ce dossier avec votre explorateur de fichier, tenter d'y copier des fichiers, etc. + +## 4. Configurer une seconde machine pour accéder au dossier + +Vous pouvez assez facilement configurer une seconde machine pour accéder au même dossier partagé sur Garage. Pour cela, reprenez le fichier `~/.config/rclone/rclone.conf` de votre premère machine et copiez-le au même endroit sur votre seconde machine. Vous pouvez ensuite réaliser sur votre deuxième machine les étapes mentionnées dans la section 3 pour le service systemd. + +**ATTENTION:** Garage ne supporte pas l'édition simultanée d'un document depuis plusieurs machines. Si vous ouvrez un fichier pour le modifier en même temps sur des machines différentes, **vous prenez le risque de perdre des données**. Pour utiliser votre dossier Garage comme un lieu de travail collaboratif, assurez-vous que des personnes différentes devant modifier un même fichier prendront chacun leur tour bien défini pour le faire. + +## Références + +- +- diff --git a/content/prise_en_main/emails.md b/content/prise_en_main/emails.md index a899498..f28986d 100644 --- a/content/prise_en_main/emails.md +++ b/content/prise_en_main/emails.md @@ -2,6 +2,8 @@ title: "Emails" description: "Emails" weight: 20 +extra: + parent: null --- **ATTENTION**. Le service email est actuellement en phase de test. diff --git "a/content/prise_en_main/initialiser-votre-acc\303\250s.md" "b/content/prise_en_main/initialiser-votre-acc\303\250s.md" new file mode 100644 index 0000000..ca05908 --- /dev/null +++ "b/content/prise_en_main/initialiser-votre-acc\303\250s.md" @@ -0,0 +1,34 @@ +--- +title: "Initialiser votre accès" +description: "Initialiser le stockage objet sur Garage" +date: 2022-09-01 +weight: 0 +extra: + parent: web +--- + +De par l'utilisation de son logiciel Garage, Deuxfleurs conserve et sert les sites web en recourant au stockage objet. Pour chaque site, on a un bucket (seau en français), partageant le même nom que lui. On peut voir un bucket comme un récipient dans lequel on va mettre tout nos fichiers à publier. Pour des raisons de sécurité, l'initialisation de ce dispositif et des identifiants d'accès ne peut être faite que par un administrateur du stockage de Deuxfleurs. Une fois tout ceci mis en place, vous pourrez gérer votre site seul·e. + +# Contacter un·e administrateur·rice +Vous allez donc devoir contacter quelqu'un avec les droits nécessaires pour tout mettre en place. Deux opérations sont nécessaires, faisons d'une pierre deux coups : demandez à la fois les accès et la mise du bucket en global en une fois. + +Une dernière chose avant de se lancer : avez-vous à votre disposition le nom de domaine pour le site ? Il s'agit de l'identifiant du site qu'on tape dans la barre URL d'un navigateur web pour le visiter. Ici on prendra pour exemple `exemple-un.fr`. Si vous n'avez pas réservé le vôtre au moment où vous lisez ces lignes, il vaut mieux vérifier sa disponibilité d'abord, par exemple [ici](https://www.gandi.net/fr/domain). + +### Demander un accès +Nous allons vous fournir un identifiant et un secret que vous utiliserez pour gérer votre site. En effet, sans eux, n'importe qui pourrait le modifier à votre insu. Vous aurez deux choses à conserver : + - L'identifiant de votre clé d'accès. Il ressemble par exemple à `cSGcEQoInTVgkxPIzzF6IyU7C7`. Même s'il ne vaut mieux pas le crier sur tous les toits, il n'y a pas de risque de sécurité si vous le dévoilez à des gens. + - La clé d'accès secrète. Elle ressemble à `rCE6vzSVkll54FNd0Jvx7uoRsNqAXexxX1b3rm2BofquQKln6bdnDLRRli1dZbSS`. Comme son nom l'indique, elle doit absolument rester secrète. Si elle est dévoilée par accident, contactez un·e administrateur·rice immédiatement ! + +### Demander un bucket avec un nom global +Il faut qu'un·e administrateur·rice crée le bucket correspondant correspondant à votre nom de domaine pour vous. Une fois fait, de son point de vue, lorsqu'iel listera une partie d'entre eux, iel verra ceci : +``` +$ sudo docker exec -ti 78e6b7e53241 /garage bucket list|grep -P 'exemple-un.fr|exemple-deux.eu' + 4bdce6:exemple-un.fr 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e + exemple-deux.eu 941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c +``` +Si `exemple-un.fr` n'est pas à gauche dans la même colonne que `exemple-deux.eu`, c'est parce qu'il n'est pas réglé en global. L'administrateur·rice va corriger ça en faisant `garage bucket alias 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e exemple-un.fr`. Résultat : +``` + exemple-un.fr 4bdce6:exemple-un.fr 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e + exemple-deux.eu 941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c +``` +C'est réglé. [Vous pouvez désormais vous occuper du DNS](../mettre-place-dns/). diff --git a/content/prise_en_main/jitsi.md b/content/prise_en_main/jitsi.md index 202ae95..2ca99b6 100644 --- a/content/prise_en_main/jitsi.md +++ b/content/prise_en_main/jitsi.md @@ -2,6 +2,8 @@ title: "Jitsi" description: "Visioconférence avec Jitsi" weight: 40 +extra: + parent: null --- # Accéder à Jitsi diff --git a/content/prise_en_main/matrix.md b/content/prise_en_main/matrix.md index b929414..55cb71b 100644 --- a/content/prise_en_main/matrix.md +++ b/content/prise_en_main/matrix.md @@ -4,6 +4,8 @@ description: "Messagerie Instantanée avec Matrix" date: "2022-03-09T19:13:51.671Z" dateCreated: "2021-11-09T12:13:36.265Z" weight: 30 +extra: + parent: null --- Matrix est un réseau de communication instantanée que vous pouvez utiliser pour rester en contact diff --git a/content/prise_en_main/mettre-place-DNS.md b/content/prise_en_main/mettre-place-DNS.md new file mode 100644 index 0000000..846b86f --- /dev/null +++ b/content/prise_en_main/mettre-place-DNS.md @@ -0,0 +1,38 @@ +--- +title: "Mettre en place le DNS" +description: "Mise en place du nom de domaine" +date: 2022-09-01 +weight: 0 +extra: + parent: web +--- + +# Louer son nom de domaine +Les noms de domaine sont gérés et loués par les _registraires de nom de domaine_. Ce sont eux qui proposent aux clients finaux de réserver des noms. On peut citer [Gandi](https://www.gandi.net/fr), [OVHcloud](https://www.ovhcloud.com/fr/), ou [Scaleway](https://www.scaleway.com/fr/) par exemple. Lorsqu'on veut s'offrir `exemple-un.fr` notamment, c'est chez eux que ça se passe; ensuite, à leur tour, ils vont enregistrer notre demande auprès de l'organisme correspondant à l'extension choisie : l'association française [AFNIC](https://www.afnic.fr/) pour `.fr`, l'association états-unienne [Public Internet Registry ](https://thenew.org/) pour `.org`, l'association européenne (belge en particulier) [EURid](https://eurid.eu/fr/) pour `.eu`... Nous recommandons de privilégier l'une de ces trois extensions parmis la myriade qui existe, car ces entités ont pour historique de ne pas augmenter arbitrairement les prix tout en garantissant la disponibilité de votre nom de domaine. + +Pour référence, la location d'un nom de domaine en `.fr` est d'environ 12 euros par an. Certaines offres vous fournissent «des extras» en plus comme une boîte courriel, sans que ça n'influe grandement sur les prix. En ce qui nous concerne, Gandi est un des registraires que nous recommandons. + +### Configurer un enregistrement DNS pour un site hébergé chez Deuxfleurs : exemple avec Gandi +Une fois votre nom de domaine réservé, il faut maintenant le configurer. La procédure change en fonction de l'entreprise choisie. Nous expliquons ici comment configurer chez Gandi. Supposons que vous avez loué `camille-michu.fr` chez eux. + +D'abord, rendez-vous dans votre espace utilisateur Gandi, puis de là cliquez dans le menu à gauche sur «Nom de domaine» : + +![dns1.png](/img/dns1.png) + +Une fois sur la page «Nom de domaines», votre nom de domaine devrait apparaitre dans la liste, ici «camille-michu.fr». Cliquez dessus : + +![dns2.png](/img/dns2.png) + +Dans le menu du haut, sélectionnez «Enregistrements DNS» : + +![dns3.png](/img/dns3.png) + +Ensuite cliquez sur le bouton «Ajouter un enregistrement» : + +![dns4.png](/img/dns4.png) + +Choisissez alors «ALIAS» comme type, et `garage.deuxfleurs.fr` comme nom d'hôte. + +![dns5.png](/img/dns5.png) + +Maintenant que votre configuration DNS est réglée, vous pouvez [préparer votre contenu](../créer-du-contenu/) ! diff --git a/content/prise_en_main/plume.md b/content/prise_en_main/plume.md index 48d7d26..ce3a78a 100644 --- a/content/prise_en_main/plume.md +++ b/content/prise_en_main/plume.md @@ -2,6 +2,8 @@ title: Plume description: Plume weight: 60 +extra: + parent: null --- # Accéder à Plume diff --git a/content/prise_en_main/publier-le-contenu.md b/content/prise_en_main/publier-le-contenu.md new file mode 100644 index 0000000..2c5e53b --- /dev/null +++ b/content/prise_en_main/publier-le-contenu.md @@ -0,0 +1,32 @@ +--- +title: "Publier le contenu" +description: "Comment mettre en ligne son contenu" +date: 2022-09-01 +weight: 0 +sort_by: "weight" +extra: + parent: web +--- + +Nous allons désormais verser votre site sur Garage, et ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». + +Vous avez le choix entre trois méthodes : +* [Faire ça en ligne de commande avec `aws-cli`](aws-cli/). C'est la méthode la plus habituelle et la plus éprouvée, cependant il faut utiliser le terminal, et être sur linux est grandement conseillé pour celle-ci. +* [Faire ça avec l'utilitaire graphique `rclone`](rclone/). Cette méthode vous paraîtra peut-être moins intimidante grâce à l'interface graphique du logiciel rclone. Celui-ci tourne sur Linux, Windows, et MacOS. +* [Faire ça avec l'utilitaire graphique `winscp`](winscp/). Cette méthode propose elle également une interface graphique, mais ne fonctionne que sur Windows. + +### Bravo ! +Une fois l'un de ces trois guides suivi, vous aurez désormais votre propre site web accessible publiquement en ligne ! +Vous pouvez rajouter dessus le badge attestant fièrement son hébergement sur Garage: + +[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) +[![Badge indiquant qu'un site est hébergé sur Garage en anglais](/img/garage_en.png)](https://garagehq.deuxfleurs.fr/) + +En HTML: +``` +Badge indiquant que ce site est propulsé par le logiciel Garage +``` +En Markdown: +``` +[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) +``` diff --git a/content/prise_en_main/rclone.md b/content/prise_en_main/rclone.md new file mode 100644 index 0000000..881ee36 --- /dev/null +++ b/content/prise_en_main/rclone.md @@ -0,0 +1,104 @@ +--- +title: "Rclone Browser" +description: "Publier avec Rclone Browser" +weight: 2 +date: 2021-11-25T14:31:35.570Z +dateCreated: 2021-11-25T14:02:30.997Z +extra: + parent: publier-le-contenu +--- + + +Rclone browser est un outil simple qui vous permet d'accéder directement à Garage. + +# Installation + +Si vous êtes sous macOS ou Windows, vous pouvez télécharger la dernière version depuis la page [github de rclone-browser](https://github.com/kapitainsky/RcloneBrowser/releases) (descendez un peu pour voir les liens). + +Sous Ubuntu (lubuntu, kubuntu, etc.), Debian et Linux Mint, cherchez et installez "Rclone Browser" dans la logithèque ("App Store") ou lancez directement depuis un terminal : + +```bash +sudo apt-get install -y rclone-browser +``` + +--- + +Le paquet existe aussi pour d'autres distributions : + +```bash +sudo dnf install -y rclone-browser # fedora +sudo yay -S rclone-browser # arch linux +sudo nix-env -iA nixos.rclone-browser # nix os +``` + +# Premier lancement + +Avant de lancer Rclone Browser, ouvrez un éditeur de texte. +Moi j'utilise "Éditeur de texte" sous Gnome aussi connu sous le nom de `gedit`. Sous Windows il s'appelle Bloc-Note Windows (ou `notepad.exe`). + +![gedit.png](/img/rclone_gedit.png) + +Entrez le texte suivant dedans, tout en remplaçant bien les lignes 5 et 6 par vos identifiants communiqués précédemment : + +```toml +[garage] +type = s3 +provider = Other +env_auth = false +access_key_id = +secret_access_key = +region = garage +endpoint = garage.deuxfleurs.fr +bucket_acl = private +force_path_style = true +no_check_bucket = true +``` + +Maintenant enregistrez le à un endroit où vous ne le perdrez pas. Dans mon cas, j'ai choisi de le mettre dans Mon Dossier Personnel > Documents > Configuration et je l'ai appelé `rclone.conf`. + +![rclone-conf.png](/img/rclone_conf.png) + +Maintenant lancez "Rclone Browser" en cherchant l'application dans votre menu d'application + +![capture_d’écran_de_2021-11-25_14-43-03.png](/img/rclone_menu.png) + +L'application devrait se lancer : + +![rclone_init.png](/img/rclone_init.png) + +Cliquez sur "File" (Fichiers) en haut à gauche, puis sur "Preferences...". La fenêtre suivante s'ouvre : + +![rclone-conf2.png](/img/rclone_conf2.png) + +Repérez la deuxième ligne intitulée `rclone.conf location:`. Tout au bout de la ligne, cliquez sur le bouton avec les trois points `[...]`. Vous aurez alors la possibilité d'indiquer à Rclone Browser où se trouve le fichier de configuration créé juste avant (pour ma part, je rappelle, "Dossier personnel > Documents > Configuration > rclone.conf", on voit que le chemin complet vers le fichier apparait maintenant dans le champs texte. + +Appuyez sur OK, et la fenêtre principale devrait maintenant ressembler à ça : + +![rclone-s3.png](/img/rclone_s3.png) + +Cliquez sur "S3 garage" puis cliquez sur "Open". Si vous voyez des dossiers apparaitre, c'est gagné ! + +![rclone-conn.png](/img/rclone_conn.png) + +Vous pouvez maintenant naviguer dans vos dossiers, envoyer des fichiers sur Garage ou en récupérer. Attention, vous ne pouvez pas créer de "nouveaux dossiers" à la racine, mais vous pouvez créer des sous-dossiers dans les dossiers existants pré-alablement créés pour vous. + +# Utiliser comme un drive + +Ce n'est pas forcément très pratique de devoir passer par cette interface pour envoyer ou récupérer des fichiers. Ce qui serait génial, c'est que ces dossiers apparaissent sur votre ordinateur comme des dossiers normaux. + +Pour cela, sélectionnez un dossier racine, moi j'ai choisi `quentin.bibliotheque` puis cliquez sur le bouton "Mount". + +![rclone-mount.png](/img/rclone_mount.png) + +Un sélecteur de fichier s'ouvre alors. Je vais dans "Dossier Personnel > Documents", je créer un nouveau dossier que j'appelle "Distant". Je vais dedans et clique sur "Choisir" (ou Ok). + +Maintenant, quand je vais dans un explorateur de fichier, je vois les fichiers sur Garage comme si ils étaient sur mon ordinateur. + +![nautilus-distant.png](/img/rclone_nautilus.png) + +Je peux aussi accéder à ces documents depuis mon logiciel préféré, comme ici "LibreOffice Calc" : + +![capture_d’écran_de_2021-11-25_15-01-42.png](/img/rclone_calc.png) + + + diff --git a/content/prise_en_main/rclone_mount.md b/content/prise_en_main/rclone_mount.md new file mode 100644 index 0000000..82c14e3 --- /dev/null +++ b/content/prise_en_main/rclone_mount.md @@ -0,0 +1,53 @@ +--- +title: "Sous Windows (avancé)" +description: " Rclone Mount" +weight: 20 +date: "2022-03-28T09:28:19.870Z" +dateCreated: "2022-02-01T16:23:58.635Z" +extra: + parent: 'stockage' +--- + +Nous aurons besoin de télécharger 3 programmes : + - [winfsp](http://www.secfs.net/winfsp/rel/) - téléchargez l'installateur et installez normalement + - [rclone](https://rclone.org/downloads/) - Téléchargez le zip pour Windows + Intel/AMD 64 bit, puis extraire le fichier `rclone` dans `C:\Program Files\rclone\rclone.exe` (il faut créer le dossier rclone dans Program Files). + - [nssm](https://nssm.cc/download) - Téléchargez la version "Featured pre-release", actuellement `nssm 2.24-101-g897c7ad (2017-04-26)`. Extrayez le fichier `nssm.exe` dans `C:\Program Files\rclone\nssm.exe` + +Créez un fichier de configuration `rclone.conf` toujours dans le même dossier (`C:\Program Files\rclone\`) : + +``` +[garage] +type = s3 +provider = Other +env_auth = false +access_key_id = +secret_access_key = +region = garage +endpoint = garage.deuxfleurs.fr +bucket_acl = private +force_path_style = true +no_check_bucket = true +``` +Ouvrez un terminal Windows (Powershell ou cmd.exe) dans le dossier `C:\Program Files\rclone` toujours. (Clic droit sur le bouton démarrer, puis cherchez Terminal ou Powershell admin, puis tapez `cd "C:\Program Files\rclone"`). + +Ajoutez rclone comme service Windows : + +``` +./nssm.exe install rclone +``` + +Dans la fenêtre qui s'ouvre : + 1. Dans `Path` (ou Chemin), cliquez sur les 3 points à droite et choisissez `rclone.exe`, vous devriez avoir `C:\Program Files\rclone\rclone.exe` + 2. Laisser `Startup directory` par défaut + 3. Mettez dans `Arguments` (ou Paramètres) ce qui suit : `--config=rclone.conf mount garage: \\deuxfleurs\garage --vfs-cache-mode full` + 4. Tout en bas, dans `Service Name` (ou nom du service), tapez `garage` + 5. Cliquez sur l'onglet `Log on` (ou Connexion), et cochez "Allow service to interact with desktop" (Autoriser le service à intéragir avec le bureau ou quelque chose du genre). + 6. Cliquez sur `Install service` (ou Installer le service) + + +Maintenant on va démarrer le service. Faites clic droit sur le bouton démarrer de Windows puis cliquez sur "Executer", tapez `services.msc` puis faites entrée. + +Dans la liste, cherchez "garage", faites clic droit dessus, puis "Démarrer". + +Ouvrer votre explorateur de fichier windows (raccourci clavier touche windows + E), normalement un nouveau disque réseau est apparu. Il sera là automatiquement à chaque démarrage. + diff --git "a/content/prise_en_main/statique-comment-\303\247a.md" "b/content/prise_en_main/statique-comment-\303\247a.md" new file mode 100644 index 0000000..b65163d --- /dev/null +++ "b/content/prise_en_main/statique-comment-\303\247a.md" @@ -0,0 +1,16 @@ +--- +title: "Statique ? Comment ça ?" +description: "Clarification sur le contenu statique" +date: 2022-09-01 +weight: 0 +extra: + parent: web +--- + +Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, et le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, selon des données dans la mémoire du serveur, ou selon n'importe quel facteur qui passe par la tête du développeur. + +Avec Javascript, qui date de la même époque, une confusion se pose souvent : beaucoup de contenus statiques passent pour du dynamique aux yeux de l'internaute. Il faut alors rappeler une distinction importante : le code Javascript livré avec un site s'exécute côté client, c'est-à-dire sur l'ordinateur ou le téléphone de l'internaute. À contrario, le CGI ou PHP s'exécute côté serveur, c'est-à-dire sur la machine administrée par le propriétaire du site. Selon ce qu'on veut faire, il faut choisir l'un ou l'autre. + +Quelques exemples pour comprendre cette dichotomie : je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page. + +En conclusion, une page statique peut proposer des interactions et des effets quelconques, et même se comporter comme une application, car l'interactivité est gérée uniquement par votre ordinateur. Dans ce modèle, par contre, le serveur web se contente simplement de vous envoyer les données que vous lui demandez, sans exécuter de logique complexe. diff --git a/content/prise_en_main/stockage.md b/content/prise_en_main/stockage.md new file mode 100644 index 0000000..0ab8129 --- /dev/null +++ b/content/prise_en_main/stockage.md @@ -0,0 +1,10 @@ +--- +title: "Stockage de fichiers" +description: "Stocker ses fichiers chez Deuxfleurs" +sort_by: "weight" +weight: 10 +extra: + parent: null +--- + +Dans cette section, vous trouverez plusieurs tutoriels expliquant comment stocker vos fichiers chez Deuxfleurs sur Garage. Malheureusement, nous n'avons pas encore d'interface facile pour accéder à cette fonctionnalité: **les guides dans cette section sont donc à destination d'un public avancé**. diff --git a/content/prise_en_main/stockage/_index.md b/content/prise_en_main/stockage/_index.md deleted file mode 100644 index 5935bb7..0000000 --- a/content/prise_en_main/stockage/_index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: "Stockage de fichiers" -description: "Stocker ses fichiers chez Deuxfleurs" -sort_by: "weight" ---- - -Dans cette section, vous trouverez plusieurs tutoriels expliquant comment stocker vos fichiers chez Deuxfleurs sur Garage. Malheureusement, nous n'avons pas encore d'interface facile pour accéder à cette fonctionnalité: **les guides dans cette section sont donc à destination d'un public avancé**. diff --git a/content/prise_en_main/stockage/drive_garage.md b/content/prise_en_main/stockage/drive_garage.md deleted file mode 100644 index 6af4919..0000000 --- a/content/prise_en_main/stockage/drive_garage.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: "Sous Linux (avancé)" -description: "Drive Garage avec Rclone (guide avancé)" -weight: 10 ---- - -**Public visé:** des utilisateurs sous Linux n'ayant pas peur de la ligne de commande. - -**Objectif:** - -- stocker vos données chez Deuxfleurs et les faire apparaître dans votre navigateur de fichier comme un disque réseau, ce qui vous permet d'y accéder comme à des fichiers normaux. -- optionnellement, ajouter une couche de chiffrement afin que vos fichiers ne soient pas stockés en clair sur les serveurs de Deuxfleurs.i - -**Attention:** ce tutoriel vous permet d'accéder à un dossier partagé depuis plusieurs machines. Cependant, Garage n'est pas capable de gérer l'édition en simultané d'un document depuis plusieurs lieux différents. Avec la méthode présentée ici, **ne modifiez jamais un fichier stocké sur Garage depuis plusieurs ordinateurs en même temps: vous pourriez perdre des données!** - -**En cas de problème avec ce tutoriel:** rappporter votre souci sur le chan Matrix `#tech:deuxfleurs.fr` ou directement par mail à `alex [at] adnab.me`. - -## 1. Obtenir des clefs d'accès Garage - -La première étape consiste à obtenir vos clefs d'accès Garage. Pour l'instant la procédure n'est pas encore automatisée: vous devez demander à un administrateur qu'il vous envoie ces clefs manuellement. Demandez-lui également de créer un "bucket" pour vos fichiers personnels: pour l'instant vous ne pouvez pas encore le faire vous-même. - -Vous devriez obtenir une paire de clefs de la forme suivante: - -- L'identifiant de votre clé d'accès (exemple : `GKae0f36c...`), également connu sous le nom de "Access key" ou "Access key ID" -- Votre clé d'accès secrète (exemple : `ae6df87221edd...`), également connue sous le nom de "Secret key" ou "Secret access key" - -## 2. Configurer `rclone` - -Avant de suive ce guide, assurez-vous que la commande `rclone` est installée sur votre système Linux. - -La première étape consiste à configurer `rclone` pour accéder à vos dossier stockés sur Garage. Cette configuration est suffisante dans un premier temps si vous ne souhaitez pas chiffrer vos fichiers sur le serveur. La section suivante est optionnelle et permettera d'introduire la couche de chiffrement. - -### 2.1. Configurer le backend Garage - -Créez le fichier `~/.config/rclone/rclone.conf` si celui-ci n'existe pas. Ensuite, modifiez ce fichier pour y ajouter la section suivante: - -```ini -[grgdf] -type = s3 -provider = Other -env_auth = false -access_key_id = GKae0f36c... -secret_access_key = ae6df87221edd... -endpoint = https://garage.deuxfleurs.fr -region = garage -``` - -Précisez les bonnes valeurs de `access_key_id` et `secret_access_key` que vous avez obtenu dans la phase 1. - -Ensuite, testez votre configuration en faisant `rclone lsd grgdf:`. Vous devriez avoir une sortie ressemblant à ceci: - -``` -$ rclone lsd grgdf: - -1 2021-11-24 17:10:05 -1 alex.perso -$ -``` - -Ce résultat indique que vous disposez d'un bucket (un dossier de premier niveau) sur le stockage, ici appellé `alex.perso`. Celui-ci a été créé par un administrateur et vous ne pouvez pas en créer d'autre vous-même. Retenez son nom pour l'étape suivante. - -### 2.2. Configurer la couche de chiffrement `rclone` - -Pour cette étape, nous allons utiliser l'assistant de configuration interactif de `rclone`. Si vous ne souhaitez pas utiliser le chiffrement, cette étape est optionnelle, mais elle est en réalité simple à réaliser donc je vous conseille de le faire. - -**Prenez garde à copier vos mots de passez de chiffrement à plusieurs endroits : si vous les perdez, vos données deviendront définitivement illisibles !** - -Pour lancer l'assistant interactif, tapez `rclone config` dans un terminal. Ensuite, entrez les valeurs suivantes: - -- Tapez `n` pour `New remote` -- Dans `name`, entrez le nom `grgdfcrypt` -- Comme type de stockage, choisissez `Encrypt or décrypt a remote` (option `12`) -- Comme remote, entrez `grgdf:` suivi du nom du bucket qui vous a été donné, par exemple: `grgdf:alex.perso`. -- Choisissez l'option `encrypt the file names` (option `1` ou mode `standard`) -- Choisissez l'option `encrypt directory names` (option `1`) -- Pour le premier mot de passe, tapez `g` pour `Generate password`. -- Entrez 128 pour la taille du mot de passe. -- Prenoez note du mot de passe affiché et gardez-le en lieu sûr pour être sûr de pouvoir déchiffrer vos données dans le future. Confirmez en tapant `y` -- On vous demande ensuite si vous voulez utiliser un sel personalisé. Tapez `g` pour en créer un automatiquement. -- Entrez 128 pour la taille du sel. -- Prenez note également du sel, qui fonctionne comme un second mot de passe. Confirmez en tapant `y` -- Tapez `n` à la question `edit advanced config?` -- Vérifiez la configuration proposée, et validez en tapant `y` - -Vous pouvez vérifier que votre configuration a bien réussi en affichant le contenu du fichier `~/.config/rclone/rclone.conf`. Vous devriez y voir une section comme la suivante: - -```ini -[grgdfcrypt] -type = crypt -remote = grgdf:alex.perso -password = <...> -password2 = <...> -``` - -Pour tester que votre dossier chiffré est bien configuré, vous pouvez par exemple: - -- taper `rclone ls grgdfcrypt:` pour lister tous les fichiers présents (cette commande renvoie initalement un résultat vide car il n'y a aucun fichier) -- copier un fichier local vers le dossier chiffré en tapant `rclone copy mon/fichier/local.txt grgdfcrypt:monfichier.txt`, ce fichier devrait ensuite apparaître en tapant `rclone ls grgdfcrypt:` - -## 3. Configurer un service `systemd` utilisateur - -Nous allons maintenant faire en sorte que vos dossiers Garage apparaissent comme des disques réseau montés sur votre système de fichier, ce qui vous permettera d'y accéder depuis votre explorateur de fichier comme s'il s'agissait de dossiers normaux. - -Pour commencer, choissez un endroit où monter votre disque réseau. Dans cet exemple, j'utiliserai `$HOME/mnt/grgdf` pour le dossier non chiffré, et `$HOME/mnt/grgdfcrypt` pour le dossier chiffré. Créez ces deux dossier vides: - -```bash -mkdir -p $HOME/mnt/grgdf -mkdir -p $HOME/mnt/grgdfcrypt -``` - -Créez ensuite le fichier `~/.config/systemd/user/rclone-mount@.service` et copiez-y le contenu suivant: - -```ini -[Unit] -Description=Mount a directory using rclone -After=network.target - -[Service] -ExecStartPre=sh -c "fusermount -u ${HOME}/mnt/%i || exit 0" -ExecStart=/usr/bin/rclone mount --vfs-cache-mode minimal --cache-dir ${HOME}/.cache/rclone/%i %i: ${HOME}/mnt/%i - -RestartSec=10 -Restart=always - -[Install] -WantedBy=default.target -``` - -Vous pouvez ensuite monter ("activer") vos dossiers Garage avec l'une des commandes suivantes: - -- `systemctl --user start rclone-mount@grgdf` pour le dossier non chiffré -- `systemctl --user start rclone-mount@grgdfcrypt` pour le dossier chiffré - -Pour que ceux-ci soient montés automatiquement en permanence, tapez: - -- `systemctl --user enable rclone-mount@grgdf` pour le dossier non chiffré -- `systemctl --user enable rclone-mount@grgdfcrypt` pour le dossier chiffré - -Pour tester le fonctionnement de votre dossier Garage, vous pouvez naviguer dans ce dossier avec votre explorateur de fichier, tenter d'y copier des fichiers, etc. - -## 4. Configurer une seconde machine pour accéder au dossier - -Vous pouvez assez facilement configurer une seconde machine pour accéder au même dossier partagé sur Garage. Pour cela, reprenez le fichier `~/.config/rclone/rclone.conf` de votre premère machine et copiez-le au même endroit sur votre seconde machine. Vous pouvez ensuite réaliser sur votre deuxième machine les étapes mentionnées dans la section 3 pour le service systemd. - -**ATTENTION:** Garage ne supporte pas l'édition simultanée d'un document depuis plusieurs machines. Si vous ouvrez un fichier pour le modifier en même temps sur des machines différentes, **vous prenez le risque de perdre des données**. Pour utiliser votre dossier Garage comme un lieu de travail collaboratif, assurez-vous que des personnes différentes devant modifier un même fichier prendront chacun leur tour bien défini pour le faire. - -## Références - -- -- diff --git a/content/prise_en_main/stockage/rclone_mount.md b/content/prise_en_main/stockage/rclone_mount.md deleted file mode 100644 index 4363aac..0000000 --- a/content/prise_en_main/stockage/rclone_mount.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: "Sous Windows (avancé)" -description: " Rclone Mount" -weight: 20 -date: "2022-03-28T09:28:19.870Z" -dateCreated: "2022-02-01T16:23:58.635Z" ---- - -Nous aurons besoin de télécharger 3 programmes : - - [winfsp](http://www.secfs.net/winfsp/rel/) - téléchargez l'installateur et installez normalement - - [rclone](https://rclone.org/downloads/) - Téléchargez le zip pour Windows + Intel/AMD 64 bit, puis extraire le fichier `rclone` dans `C:\Program Files\rclone\rclone.exe` (il faut créer le dossier rclone dans Program Files). - - [nssm](https://nssm.cc/download) - Téléchargez la version "Featured pre-release", actuellement `nssm 2.24-101-g897c7ad (2017-04-26)`. Extrayez le fichier `nssm.exe` dans `C:\Program Files\rclone\nssm.exe` - -Créez un fichier de configuration `rclone.conf` toujours dans le même dossier (`C:\Program Files\rclone\`) : - -``` -[garage] -type = s3 -provider = Other -env_auth = false -access_key_id = -secret_access_key = -region = garage -endpoint = garage.deuxfleurs.fr -bucket_acl = private -force_path_style = true -no_check_bucket = true -``` -Ouvrez un terminal Windows (Powershell ou cmd.exe) dans le dossier `C:\Program Files\rclone` toujours. (Clic droit sur le bouton démarrer, puis cherchez Terminal ou Powershell admin, puis tapez `cd "C:\Program Files\rclone"`). - -Ajoutez rclone comme service Windows : - -``` -./nssm.exe install rclone -``` - -Dans la fenêtre qui s'ouvre : - 1. Dans `Path` (ou Chemin), cliquez sur les 3 points à droite et choisissez `rclone.exe`, vous devriez avoir `C:\Program Files\rclone\rclone.exe` - 2. Laisser `Startup directory` par défaut - 3. Mettez dans `Arguments` (ou Paramètres) ce qui suit : `--config=rclone.conf mount garage: \\deuxfleurs\garage --vfs-cache-mode full` - 4. Tout en bas, dans `Service Name` (ou nom du service), tapez `garage` - 5. Cliquez sur l'onglet `Log on` (ou Connexion), et cochez "Allow service to interact with desktop" (Autoriser le service à intéragir avec le bureau ou quelque chose du genre). - 6. Cliquez sur `Install service` (ou Installer le service) - - -Maintenant on va démarrer le service. Faites clic droit sur le bouton démarrer de Windows puis cliquez sur "Executer", tapez `services.msc` puis faites entrée. - -Dans la liste, cherchez "garage", faites clic droit dessus, puis "Démarrer". - -Ouvrer votre explorateur de fichier windows (raccourci clavier touche windows + E), normalement un nouveau disque réseau est apparu. Il sera là automatiquement à chaque démarrage. - diff --git a/content/prise_en_main/web.md b/content/prise_en_main/web.md new file mode 100644 index 0000000..c0b6de5 --- /dev/null +++ b/content/prise_en_main/web.md @@ -0,0 +1,26 @@ +--- +title: "Site web" +description: "Héberger un site web" +sort_by: "weight" +weight: 10 +extra: + parent: null +--- + +Vous en avez marre de faire toute votre communication associative via Facebook ? Vous voulez créer votre propre site pour raconter vos dernières vacances ou publier vos poèmes ? Bref, publier en indépendance ? Deuxfleurs peut vous aider en vous fournissant l'hébergement. Suivez le guide ! + +1. [Statique ? Comment ça ?](./statique-comment-ca/) +2. [Initialiser votre accès](./initialiser-votre-acces/) +3. [Mettre en place le DNS](./mettre-place-dns/) +4. [Créer du contenu](./créer-du-contenu/) +5. [Publier le contenu](./publier-le-contenu/) + +# Ils nous font confiance pour leur site web + + - [anneprudhomoz.fr](https://anneprudhomoz.fr) - *De la terre, du fer, de l'eau, beaucoup de feu, un peu d'huile, encore du béton et du plâtre ! ... sans oublier le crayon à papier et les carnets.* + - [colineaubert.com](https://colineaubert.com) - *D'un côté graphiste, illustratrice et conceptrice d'outils pédagogiques, je mets en images et en mots différents sujets scientifiques et culturels.* + - [estherbouquet.com](https://estherbouquet.com) - *Esther Bouquet questions how narratives—both historical and literary—are being built by creating tangible experiences ranging from the size of the sheet of paper to the volume of a space; somewhere between writing, archiving, drawing, designing, and programming.* + - [quentin.dufour.io](https://quentin.dufour.io) - *Portfolio et blog d'un ingénieur en informatique* + - [erwan.dufour.io](https://erwan.dufour.io) - *Portfolio et blog d'un passionné d'électronique* + - [rfid.deuxfleurs.fr](https://rfid.deuxfleurs.fr) - *Rencontres Francophones de l'Infonuagique Décentralisé* + - [giraud.eu](https://giraud.eu) - *Site d'un ingénieur en informatique* diff --git a/content/prise_en_main/web/_index.md b/content/prise_en_main/web/_index.md deleted file mode 100644 index 1d22426..0000000 --- a/content/prise_en_main/web/_index.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: "Site web" -description: "Héberger un site web" -sort_by: "weight" ---- - -Vous en avez marre de faire toute votre communication associative via Facebook ? Vous voulez créer votre propre site pour raconter vos dernières vacances ou publier vos poèmes ? Bref, publier en indépendance ? Deuxfleurs peut vous aider en vous fournissant l'hébergement. Suivez le guide ! - -1. [Statique ? Comment ça ?](./statique-comment-ca/) -2. [Initialiser votre accès](./initialiser-votre-acces/) -3. [Mettre en place le DNS](./mettre-place-dns/) -4. [Créer du contenu](./créer-du-contenu/) -5. [Publier le contenu](./publier-le-contenu/) - -# Ils nous font confiance pour leur site web - - - [anneprudhomoz.fr](https://anneprudhomoz.fr) - *De la terre, du fer, de l'eau, beaucoup de feu, un peu d'huile, encore du béton et du plâtre ! ... sans oublier le crayon à papier et les carnets.* - - [colineaubert.com](https://colineaubert.com) - *D'un côté graphiste, illustratrice et conceptrice d'outils pédagogiques, je mets en images et en mots différents sujets scientifiques et culturels.* - - [estherbouquet.com](https://estherbouquet.com) - *Esther Bouquet questions how narratives—both historical and literary—are being built by creating tangible experiences ranging from the size of the sheet of paper to the volume of a space; somewhere between writing, archiving, drawing, designing, and programming.* - - [quentin.dufour.io](https://quentin.dufour.io) - *Portfolio et blog d'un ingénieur en informatique* - - [erwan.dufour.io](https://erwan.dufour.io) - *Portfolio et blog d'un passionné d'électronique* - - [rfid.deuxfleurs.fr](https://rfid.deuxfleurs.fr) - *Rencontres Francophones de l'Infonuagique Décentralisé* - - [giraud.eu](https://giraud.eu) - *Site d'un ingénieur en informatique* diff --git "a/content/prise_en_main/web/cr\303\251er-du-contenu/_index.md" "b/content/prise_en_main/web/cr\303\251er-du-contenu/_index.md" deleted file mode 100644 index 7ed4385..0000000 --- "a/content/prise_en_main/web/cr\303\251er-du-contenu/_index.md" +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: "Créer du contenu" -description: "Comment écrire ses pages et son contenu" -sort_by: "weight" -weight: 0 -date: 2022-09-01 ---- - -Votre site est désormais complètement configuré. Avant de publier du contenu, il faut écrire celui-ci ! - -Vous pouvez, au choix, [l'écrire à la main](./a-la-main/), ou vous [faire assister par un générateur](./avec-un-generateur/). diff --git "a/content/prise_en_main/web/cr\303\251er-du-contenu/avec-un-g\303\251n\303\251rateur.md" "b/content/prise_en_main/web/cr\303\251er-du-contenu/avec-un-g\303\251n\303\251rateur.md" deleted file mode 100644 index d969ba7..0000000 --- "a/content/prise_en_main/web/cr\303\251er-du-contenu/avec-un-g\303\251n\303\251rateur.md" +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "Avec un générateur" -description: "Créer du contenu avec un générateur" -sort_by: "weight" -date: 2022-09-01 -weight: 2 ---- - -Si vous souhaitez par exemple écrire un blog, vous allez probablement avoir une page par post. À la longue, on peut sans problème arriver à des dizaines de pages... Si on les écrit à la main, il va falloir copier/coller une bonne partie du code HTML, mais pas tout. Pour éviter ce travail rébarbatif, il existe ce qu'on appelle des générateurs de sites statiques. Ils vous permettent d'écrire dans une syntaxe très simple (Markdown) vos contenus, sans vous soucier du HTML ou du CSS, car ils emballeront eux-mêmes vos écrits dans des modèles prévus à cet effet. [Le guide que vous êtes en train de lire en ce moment même utilise un tel outil !](https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr) - -### Choisir un générateur et un thème -Il existe de nombreux générateurs de sites statiques. On peut citer [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/), [Zola](https://www.getzola.org/), et bien d'autres... En général, ils se ressemblent beaucoup. À titre indicatif, pour ce guide, nous utilisons Zola. Nous baserons nos exemples sur lui. Si votre système d'exploitation est Linux, cherchez dans votre gestionnaire de paquet si vous trouvez l'un d'entre eux. Zola est ainsi facilement installable sur Arch, Ubuntu, et Fedora. - -Une fois un générateur de site statique installé, rendez-vous sur le site officiel de celui-ci pour choisir un thème. Chez Zola, il faut aller [ici](https://www.getzola.org/themes/). Si vous cliquez sur l'un d'entre eux, vous aurez des instructions sur comment l'installer. Il s'agit souvent de télécharger le thème dans le dossier correspondant à votre site, et de modifier le fichier `config.toml`, nécessaire pour Zola, afin de sélectionner le thème. - -### Décrire le contenu -Pour écrire le contenu de vos pages, ou de vos billets de blog par exemple, il vous faudra utiliser la syntaxe Markdown. Rassurez-vous, elle a été pensée pour être très simple et peut-être apprise en quelques minutes. Voici un exemple : -``` -# Ceci est le titre principal -## Ceci est un sous-titre -Ceci est du texte tout à fait normal. *Cette partie-ci du texte sera en italique*. **Cette partie-là sera en gras**. - -## Ceci est encore un sous-titre -### Ceci est un sous-sous-titre -Voici du texte pour introduire la liste à puce qui va suivre : -* première élément de la liste -* second élément de la liste -* troisième élément de la liste -``` -Quand on écrit du texte sans mettre quoi que ce soit autour ou avant, cela deviendra du texte tout à fait normal. On peut mettre un ou plusieurs dièses au début de la ligne pour en faire un titre. On peut mettre du texte en italique ou en gras avec des astérisques. Un astérisque en début de ligne provoque une liste à puces. Bref, cette syntaxe n'est pas compliquée, et vous pouvez facilement trouver plein de tutoriels en ligne pour la connaître. [Framasoft, par exemple, propose un bon guide](https://docs.framasoft.org/fr/grav/markdown.html). - -Une fois votre fichier écrit, enregistrez-le avec l'extension `.md`, par exemple sous le nom `recette-tartre-au-citron.md`. L'idée est qu'à chaque page de votre site correspond un fichier `.md`, et ceux-ci seront regroupés dans un dossier. Vous trouverez [ici](https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr/src/branch/main/content) les fichiers Markdown écrits pour faire ce guide. - -Cependant, il reste juste une petite chose à faire lorsque vous avez fini votre texte : écrire l'en-tête au dessus du markdown, qui donnera au générateur des informations importantes sur ce contenu. On encadre cet en-têtre avec trois signes plus. Voici un exemple basé sur cette page : -``` -+++ -title = "Avec un générateur" -description = "Créer du contenu avec un générateur" -date = 2022-09-01 -+++ - -# Titre -Texte de la page... -``` -Comme vous l'avez peut-être compris, il s'agit de donner le titre de cette page, sa description, et sa date d'écriture. D'autres informations peuvent être rajoutées, cela dépend du générateur et du thème sélectionnés. - -### Générer les pages -Vous avez donc des fichiers `.md` renfermant vos contenus, et un thème qui vous plaît. Avec un terminal, positionnez-vous dans le dossier racine de votre site projet. Si vous utilisez Zola, celui-ci devrait contenir un fichier `config.toml`, vous pouvez alors faire `zola build`. Cela va générer l'intégralité de votre site dans le dossier `public/`. Vous constaterez donc qu'il sera rempli de fichiers `.html` et `.css`, [vous êtes alors prêt(e) à passer à la publication](../../publier-le-contenu/) ! diff --git "a/content/prise_en_main/web/cr\303\251er-du-contenu/\303\240-la-main.md" "b/content/prise_en_main/web/cr\303\251er-du-contenu/\303\240-la-main.md" deleted file mode 100644 index 1b9b641..0000000 --- "a/content/prise_en_main/web/cr\303\251er-du-contenu/\303\240-la-main.md" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: "À la main" -description: "Créer du contenu à la main" -sort_by: "weight" -date: 2022-09-01 -weight: 1 ---- - -Garage, comme tout serveur web, va se contenter ici de servir des fichiers `.html`. Ces fichiers sont tout à fait lisibles et écrivables par un humain. Ainsi, si vous n'avez pas prévu d'avoir un site avec beaucoup de pages, il est souvent intéressant de façonner chacune d'entre elles à la main. - -### Décrire le contenu - -Pour écrire un page web, il faut écrire un fichier `.html` en suivant, justement, la syntaxe et les règles HTML. À titre indicatif, voici un exemple simple : -``` - - - - Mon site - - -

Bonjour; bienvenue sur mon site !

- - -``` -Vous pourrez facilement trouver moult ressources en ligne pour maîtriser le HTML. [La documentation de Mozilla sur le sujet](https://developer.mozilla.org/fr/docs/Web/HTML) est un bon départ. Enfin, il faut savoir que le HTML est un langage pour décrire le contenu de la page seulement, pas l'allure ou l'esthétique ! La conséquence directe est qu'une page reposant uniquement sur HTML sera sobre : texte noir sur fond blanc, avec alignement à gauche. Si cela vous suffit, vous pouvez d'ores et déjà vous arrêter sur ça. - -### Décrire l'apparence -Si vous souhaitez ajouter des couleurs, modifier la disposition, ou l'arrangement par exemple, il faut rajouter, au-dessus du HTML, une description CSS qui contient vos règles esthétiques. Vous pouvez par exemple créer un fichier `style.css` à la racine du dossier représentant votre site. Ensuite, dans vos pages HTML que vous souhaitez styliser, il faut rajouter, dans la section ``, la formule suivante : `` (attention le chemin de `style.css` est relatif, par exemple si vous voulez styliser une page dans un dossier, il faudrait alors marquer `../style.css` à la place). Une fois ceci fait, lorsque quelqu'un va visiter une page HTML, il va automatiquement récupérer le fichier CSS associé, et l'appliquer. Voici encore une fois, à titre indicatif, un contenu exemple pour `style.css` : -``` -body -{ - margin: 0 auto; - max-width: 1000px; - padding: 10px 10px 10px 10px; -} -``` -Encore une fois, plein de ressources sont disponibles en ligne, et Mozilla propose encore une fois [une bonne base](https://developer.mozilla.org/fr/docs/Web/CSS). - -Une fois que vous avez tous vos fichiers `.html` et `.css` réunis, [vous pouvez passer à la publication](../../publier-le-contenu/) ! diff --git "a/content/prise_en_main/web/initialiser-votre-acc\303\250s.md" "b/content/prise_en_main/web/initialiser-votre-acc\303\250s.md" deleted file mode 100644 index 4adca49..0000000 --- "a/content/prise_en_main/web/initialiser-votre-acc\303\250s.md" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: "Initialiser votre accès" -description: "Initialiser le stockage objet sur Garage" -date: 2022-09-01 -weight: 0 ---- - -De par l'utilisation de son logiciel Garage, Deuxfleurs conserve et sert les sites web en recourant au stockage objet. Pour chaque site, on a un bucket (seau en français), partageant le même nom que lui. On peut voir un bucket comme un récipient dans lequel on va mettre tout nos fichiers à publier. Pour des raisons de sécurité, l'initialisation de ce dispositif et des identifiants d'accès ne peut être faite que par un administrateur du stockage de Deuxfleurs. Une fois tout ceci mis en place, vous pourrez gérer votre site seul·e. - -# Contacter un·e administrateur·rice -Vous allez donc devoir contacter quelqu'un avec les droits nécessaires pour tout mettre en place. Deux opérations sont nécessaires, faisons d'une pierre deux coups : demandez à la fois les accès et la mise du bucket en global en une fois. - -Une dernière chose avant de se lancer : avez-vous à votre disposition le nom de domaine pour le site ? Il s'agit de l'identifiant du site qu'on tape dans la barre URL d'un navigateur web pour le visiter. Ici on prendra pour exemple `exemple-un.fr`. Si vous n'avez pas réservé le vôtre au moment où vous lisez ces lignes, il vaut mieux vérifier sa disponibilité d'abord, par exemple [ici](https://www.gandi.net/fr/domain). - -### Demander un accès -Nous allons vous fournir un identifiant et un secret que vous utiliserez pour gérer votre site. En effet, sans eux, n'importe qui pourrait le modifier à votre insu. Vous aurez deux choses à conserver : - - L'identifiant de votre clé d'accès. Il ressemble par exemple à `cSGcEQoInTVgkxPIzzF6IyU7C7`. Même s'il ne vaut mieux pas le crier sur tous les toits, il n'y a pas de risque de sécurité si vous le dévoilez à des gens. - - La clé d'accès secrète. Elle ressemble à `rCE6vzSVkll54FNd0Jvx7uoRsNqAXexxX1b3rm2BofquQKln6bdnDLRRli1dZbSS`. Comme son nom l'indique, elle doit absolument rester secrète. Si elle est dévoilée par accident, contactez un·e administrateur·rice immédiatement ! - -### Demander un bucket avec un nom global -Il faut qu'un·e administrateur·rice crée le bucket correspondant correspondant à votre nom de domaine pour vous. Une fois fait, de son point de vue, lorsqu'iel listera une partie d'entre eux, iel verra ceci : -``` -$ sudo docker exec -ti 78e6b7e53241 /garage bucket list|grep -P 'exemple-un.fr|exemple-deux.eu' - 4bdce6:exemple-un.fr 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e - exemple-deux.eu 941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c -``` -Si `exemple-un.fr` n'est pas à gauche dans la même colonne que `exemple-deux.eu`, c'est parce qu'il n'est pas réglé en global. L'administrateur·rice va corriger ça en faisant `garage bucket alias 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e exemple-un.fr`. Résultat : -``` - exemple-un.fr 4bdce6:exemple-un.fr 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e - exemple-deux.eu 941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c -``` -C'est réglé. [Vous pouvez désormais vous occuper du DNS](../mettre-place-dns/). diff --git a/content/prise_en_main/web/mettre-place-DNS.md b/content/prise_en_main/web/mettre-place-DNS.md deleted file mode 100644 index aa60963..0000000 --- a/content/prise_en_main/web/mettre-place-DNS.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: "Mettre en place le DNS" -description: "Mise en place du nom de domaine" -date: 2022-09-01 -weight: 0 ---- - -# Louer son nom de domaine -Les noms de domaine sont gérés et loués par les _registraires de nom de domaine_. Ce sont eux qui proposent aux clients finaux de réserver des noms. On peut citer [Gandi](https://www.gandi.net/fr), [OVHcloud](https://www.ovhcloud.com/fr/), ou [Scaleway](https://www.scaleway.com/fr/) par exemple. Lorsqu'on veut s'offrir `exemple-un.fr` notamment, c'est chez eux que ça se passe; ensuite, à leur tour, ils vont enregistrer notre demande auprès de l'organisme correspondant à l'extension choisie : l'association française [AFNIC](https://www.afnic.fr/) pour `.fr`, l'association états-unienne [Public Internet Registry ](https://thenew.org/) pour `.org`, l'association européenne (belge en particulier) [EURid](https://eurid.eu/fr/) pour `.eu`... Nous recommandons de privilégier l'une de ces trois extensions parmis la myriade qui existe, car ces entités ont pour historique de ne pas augmenter arbitrairement les prix tout en garantissant la disponibilité de votre nom de domaine. - -Pour référence, la location d'un nom de domaine en `.fr` est d'environ 12 euros par an. Certaines offres vous fournissent «des extras» en plus comme une boîte courriel, sans que ça n'influe grandement sur les prix. En ce qui nous concerne, Gandi est un des registraires que nous recommandons. - -### Configurer un enregistrement DNS pour un site hébergé chez Deuxfleurs : exemple avec Gandi -Une fois votre nom de domaine réservé, il faut maintenant le configurer. La procédure change en fonction de l'entreprise choisie. Nous expliquons ici comment configurer chez Gandi. Supposons que vous avez loué `camille-michu.fr` chez eux. - -D'abord, rendez-vous dans votre espace utilisateur Gandi, puis de là cliquez dans le menu à gauche sur «Nom de domaine» : - -![dns1.png](/img/dns1.png) - -Une fois sur la page «Nom de domaines», votre nom de domaine devrait apparaitre dans la liste, ici «camille-michu.fr». Cliquez dessus : - -![dns2.png](/img/dns2.png) - -Dans le menu du haut, sélectionnez «Enregistrements DNS» : - -![dns3.png](/img/dns3.png) - -Ensuite cliquez sur le bouton «Ajouter un enregistrement» : - -![dns4.png](/img/dns4.png) - -Choisissez alors «ALIAS» comme type, et `garage.deuxfleurs.fr` comme nom d'hôte. - -![dns5.png](/img/dns5.png) - -Maintenant que votre configuration DNS est réglée, vous pouvez [préparer votre contenu](../créer-du-contenu/) ! diff --git a/content/prise_en_main/web/publier-le-contenu/_index.md b/content/prise_en_main/web/publier-le-contenu/_index.md deleted file mode 100644 index 11ad7e2..0000000 --- a/content/prise_en_main/web/publier-le-contenu/_index.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: "Publier le contenu" -description: "Comment mettre en ligne son contenu" -date: 2022-09-01 -weight: 0 -sort_by: "weight" ---- - -Nous allons désormais verser votre site sur Garage, et ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». - -Vous avez le choix entre trois méthodes : -* [Faire ça en ligne de commande avec `aws-cli`](aws-cli/). C'est la méthode la plus habituelle et la plus éprouvée, cependant il faut utiliser le terminal, et être sur linux est grandement conseillé pour celle-ci. -* [Faire ça avec l'utilitaire graphique `rclone`](rclone/). Cette méthode vous paraîtra peut-être moins intimidante grâce à l'interface graphique du logiciel rclone. Celui-ci tourne sur Linux, Windows, et MacOS. -* [Faire ça avec l'utilitaire graphique `winscp`](winscp/). Cette méthode propose elle également une interface graphique, mais ne fonctionne que sur Windows. - -### Bravo ! -Une fois l'un de ces trois guides suivi, vous aurez désormais votre propre site web accessible publiquement en ligne ! -Vous pouvez rajouter dessus le badge attestant fièrement son hébergement sur Garage: - -[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) -[![Badge indiquant qu'un site est hébergé sur Garage en anglais](/img/garage_en.png)](https://garagehq.deuxfleurs.fr/) - -En HTML: -``` -Badge indiquant que ce site est propulsé par le logiciel Garage -``` -En Markdown: -``` -[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) -``` diff --git a/content/prise_en_main/web/publier-le-contenu/aws-cli.md b/content/prise_en_main/web/publier-le-contenu/aws-cli.md deleted file mode 100644 index a7b9184..0000000 --- a/content/prise_en_main/web/publier-le-contenu/aws-cli.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: "aws-cli" -description: "Publier avec aws-cli" -date: 2022-09-01 -weight: 1 ---- - -Nous allons désormais verser votre site sur Garage, ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». - -### Paramétrer votre accès localement -Pour verser votre site sur Garage, nous allons utiliser l'outil de base pour faire des commandes S3 : [aws-cli](https://github.com/aws/aws-cli) et son binaire, `aws`. À chaque fois, il aura besoin de savoir : -* l'identifiant de votre clé d'accès -* votre clé d'accès secrète -* la région et l'URL de l'infrastructure Garage qui hébergera votre site - -En temps normal, il faudrait préciser ces paramètres à chaque fois (donc toutes les fois que vous voulez mettre quelque chose sur votre site, ou le modifier). Pour éviter ça, on va stocker ces informations dans un fichier ; il suffira de l'invoquer avant de faire ses modifications. Dans votre répertoire personnel, créez un fichier nommé par exemple `.awsrc`. À l'intérieur, mettez le contenu suivant : -``` -export AWS_ACCESS_KEY_ID={votre identifiant de clé d'accès} -export AWS_SECRET_ACCESS_KEY={votre clé d'accès privée} -export AWS_DEFAULT_REGION='garage' - -function aws { command aws --endpoint-url https://garage.deuxfleurs.fr $@ ; } -aws --version -``` -Il vous faut bien entendu insérer vos deux clés aux endroits spécifiés. Une fois ceci fait, dans le futur, avant d'utiliser `aws`, il vous faudra faire `source ~/.awsrc`, et cela mettra en place tous les paramètres pour vous. Vous serez automatiquement authentifié et vous parlerez à la bonne infrastructure Garage. - -### Configurer la page par défaut et celle pour les erreurs -Puisqu'on est sur la configuration S3, profitons-en pour paramétrer une page d'accueil et une page d'erreur. En effet, les URL qu'on utilise pour naviguer sur votre site correspondront à la hiérarchie de fichiers présents sur Garage. Si on visite `https://votre-site.fr/blog/recette-de-gateau.html`, Garage va simplement servir le fichier `blog/recette-de-gateau.html`, en partant de la racine du bucket. Mais que ce passe-t-il si on demande à voir `https://votre-site.fr/blog/` ? Garage ne peut pas retourner un dossier; et de toute façon cela ne fonctionnerait pas, puisqu'un dossier n'a pas données propre à lui-même, il ne fait que contenir des fichiers distincts en son sein. On voit pourtant souvent ce genre d'URL en ligne. En fait, les serveurs web sont configurés pour que si aucun fichier du dossier n'est spécifié, alors on va utiliser celui avec un nom paramétré à l'avance. C'est de ça dont on parle. -De même, lorsque quelqu'un demande une page qui n'existe pas, que peut faire Garage ? Dans la même logique, on va lui donner un nom de fichier à servir par défaut si jamais cela arrive. - -Après avoir fait votre `source ~/.awsrc`, faites : -``` -aws s3 website exemple-un.fr --index-document index.html --error-document erreur.html -``` -si votre `aws` est en version 2.x, ou -``` -aws s3api put-bucket-website --bucket exemple-un.fr --website-configuration ' -{ - "ErrorDocument": { - "Key": "/errors/4xx.html" - }, - "IndexDocument": { - "Suffix": "index.html" - } -} -' -``` -s'il est en version 1.x . Pensez à remplacer `exemple-un.fr` par votre nom de domaine à vous ! - -### Publier -On y est ! Avec un terminal, positionnez-vous dans le répertoire qui reflète ce que vous voulez mettre en ligne. Celui-ci devrait contenir des fichiers en `.html`, `.css`, ou `.js`, mais pas de `.md`. Si vous ne l'avez pas fait, faites `source ~/.awsrc`, et lancez ensuite : -``` -aws s3 sync . s3://exemple-un.fr -``` -si vous avez `aws` en version 2. N'oubliez pas de mettre votre nom de domaine à la place d'`exemple-un.fr`. Vos fichiers devrait être téléversés. Une fois le processus fini, vous devriez pouvoir ouvrir un navigateur internet tel que Firefox par exemple, tapez votre nom de domaine dans la barre URL, et naviguer sur votre site. En cas de pépin, essayez d'actualiser la page en faisant `ctrl`+`shift`+`r` avec votre clavier, ça vous garantira que votre navigateur récupère le vrai contenu en ligne au lieu de piocher dans le cache local sur votre ordinateur. diff --git a/content/prise_en_main/web/publier-le-contenu/rclone.md b/content/prise_en_main/web/publier-le-contenu/rclone.md deleted file mode 100644 index 22fb0bf..0000000 --- a/content/prise_en_main/web/publier-le-contenu/rclone.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: "Rclone Browser" -description: "Publier avec Rclone Browser" -weight: 2 -date: 2021-11-25T14:31:35.570Z -dateCreated: 2021-11-25T14:02:30.997Z ---- - - -Rclone browser est un outil simple qui vous permet d'accéder directement à Garage. - -# Installation - -Si vous êtes sous macOS ou Windows, vous pouvez télécharger la dernière version depuis la page [github de rclone-browser](https://github.com/kapitainsky/RcloneBrowser/releases) (descendez un peu pour voir les liens). - -Sous Ubuntu (lubuntu, kubuntu, etc.), Debian et Linux Mint, cherchez et installez "Rclone Browser" dans la logithèque ("App Store") ou lancez directement depuis un terminal : - -```bash -sudo apt-get install -y rclone-browser -``` - ---- - -Le paquet existe aussi pour d'autres distributions : - -```bash -sudo dnf install -y rclone-browser # fedora -sudo yay -S rclone-browser # arch linux -sudo nix-env -iA nixos.rclone-browser # nix os -``` - -# Premier lancement - -Avant de lancer Rclone Browser, ouvrez un éditeur de texte. -Moi j'utilise "Éditeur de texte" sous Gnome aussi connu sous le nom de `gedit`. Sous Windows il s'appelle Bloc-Note Windows (ou `notepad.exe`). - -![gedit.png](/img/rclone_gedit.png) - -Entrez le texte suivant dedans, tout en remplaçant bien les lignes 5 et 6 par vos identifiants communiqués précédemment : - -```toml -[garage] -type = s3 -provider = Other -env_auth = false -access_key_id = -secret_access_key = -region = garage -endpoint = garage.deuxfleurs.fr -bucket_acl = private -force_path_style = true -no_check_bucket = true -``` - -Maintenant enregistrez le à un endroit où vous ne le perdrez pas. Dans mon cas, j'ai choisi de le mettre dans Mon Dossier Personnel > Documents > Configuration et je l'ai appelé `rclone.conf`. - -![rclone-conf.png](/img/rclone_conf.png) - -Maintenant lancez "Rclone Browser" en cherchant l'application dans votre menu d'application - -![capture_d’écran_de_2021-11-25_14-43-03.png](/img/rclone_menu.png) - -L'application devrait se lancer : - -![rclone_init.png](/img/rclone_init.png) - -Cliquez sur "File" (Fichiers) en haut à gauche, puis sur "Preferences...". La fenêtre suivante s'ouvre : - -![rclone-conf2.png](/img/rclone_conf2.png) - -Repérez la deuxième ligne intitulée `rclone.conf location:`. Tout au bout de la ligne, cliquez sur le bouton avec les trois points `[...]`. Vous aurez alors la possibilité d'indiquer à Rclone Browser où se trouve le fichier de configuration créé juste avant (pour ma part, je rappelle, "Dossier personnel > Documents > Configuration > rclone.conf", on voit que le chemin complet vers le fichier apparait maintenant dans le champs texte. - -Appuyez sur OK, et la fenêtre principale devrait maintenant ressembler à ça : - -![rclone-s3.png](/img/rclone_s3.png) - -Cliquez sur "S3 garage" puis cliquez sur "Open". Si vous voyez des dossiers apparaitre, c'est gagné ! - -![rclone-conn.png](/img/rclone_conn.png) - -Vous pouvez maintenant naviguer dans vos dossiers, envoyer des fichiers sur Garage ou en récupérer. Attention, vous ne pouvez pas créer de "nouveaux dossiers" à la racine, mais vous pouvez créer des sous-dossiers dans les dossiers existants pré-alablement créés pour vous. - -# Utiliser comme un drive - -Ce n'est pas forcément très pratique de devoir passer par cette interface pour envoyer ou récupérer des fichiers. Ce qui serait génial, c'est que ces dossiers apparaissent sur votre ordinateur comme des dossiers normaux. - -Pour cela, sélectionnez un dossier racine, moi j'ai choisi `quentin.bibliotheque` puis cliquez sur le bouton "Mount". - -![rclone-mount.png](/img/rclone_mount.png) - -Un sélecteur de fichier s'ouvre alors. Je vais dans "Dossier Personnel > Documents", je créer un nouveau dossier que j'appelle "Distant". Je vais dedans et clique sur "Choisir" (ou Ok). - -Maintenant, quand je vais dans un explorateur de fichier, je vois les fichiers sur Garage comme si ils étaient sur mon ordinateur. - -![nautilus-distant.png](/img/rclone_nautilus.png) - -Je peux aussi accéder à ces documents depuis mon logiciel préféré, comme ici "LibreOffice Calc" : - -![capture_d’écran_de_2021-11-25_15-01-42.png](/img/rclone_calc.png) - - - diff --git a/content/prise_en_main/web/publier-le-contenu/winscp.md b/content/prise_en_main/web/publier-le-contenu/winscp.md deleted file mode 100644 index 6eed43d..0000000 --- a/content/prise_en_main/web/publier-le-contenu/winscp.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: "WinSCP" -description: "Publier avec WinSCP" -weight: 3 ---- - - -# Installation - -Commencez par télécharger l'outil [WinSCP](https://winscp.net/eng/download.php). - -![winscp_dl.png](/img/winscp_dl.png) - -Installez le logiciel. - -# Configuration - -Lancez le. La fenêtre de connexion suivante devrait apparaitre : - -![](/img/winscp_login.png) - -Vous devez : - 1. Vérifier que c'est bien "Nouveau site" qui est sélectionné - 2. Dans *protocole de fichier*, vous devez choisir *Amazon S3* - 3. Dans *nom d'hôte*, vous devez mettre `garage.deuxfleurs.fr` - 4. Dans *numéro de port*, vous devez mettre (ou plutôt laisser) `443` - 5. Dans *id de clé d'accès*, vous devez mettre l'identifiant de votre clé d'accès, exemple : `GK...` - 6. Dans *clé d'accès secrète*, vous devez mettre votre clé d'accès secrète. - 7. Maintenant, cliquez sur le bouton *Avancé*. (Cliquez bien sur le mot "Avancé" et non sur la flèche à droite). Une fenêtre s'ouvre : - -![](/img/winscp_avance.png) - - 1. Dans le menu de gauche, cliquez sur *S3* - 2. Dans la partie de droite, pour *Région par défaut*, inscrivez au clavier *garage* - 3. Toujours à droite, dans *Style URL*, choisissez *Chemin* - 4. Cliquez sur OK - -Vous voilà de retour sur la fenêtre de connexion : - -![](/img/winscp_sauvegarder.png) - - 1. Cliquez sur *Sauver* (cliquez bien sur le texte et non sur la flèche noire à droite) - -La fenêtre suivante apparait : - -![](/img/winscp_session.png) - - 1. Dans *Enregistrer la sessions sous :*, donnez un nom qui identifie bien votre site web, c'est ce qui vous permettra de l'identifier dans la liste de connexion. - 2. Pour la case *Enregistrer le mot de passe*, nous vous conseillons de la cocher sauf si vous êtes sur un ordinateur public (bibliothèque, cybercafé, etc.) ou au travail. - 3. Pour la case *Créer un raccourci sur le bureau*, nous vous conseillons de la cocher, vous pourrez alors mettre votre site en ligne en un seul clic (ou presque) depuis votre bureau. - 4. Cliquez sur OK - -Vous pouvez maintenant cliquer sur "Connexion". - -# Envoyer votre site web - -À gauche, naviguez jusqu'au dossier de votre site web. -Faites en un glisser déposer à droite à l'intérieur du dossier qui contient le nom de votre site web. - -![commander.png](/img/winscp_commander.png) diff --git "a/content/prise_en_main/web/statique-comment-\303\247a.md" "b/content/prise_en_main/web/statique-comment-\303\247a.md" deleted file mode 100644 index b1cee2b..0000000 --- "a/content/prise_en_main/web/statique-comment-\303\247a.md" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: "Statique ? Comment ça ?" -description: "Clarification sur le contenu statique" -date: 2022-09-01 -weight: 0 ---- - -Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, et le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, selon des données dans la mémoire du serveur, ou selon n'importe quel facteur qui passe par la tête du développeur. - -Avec Javascript, qui date de la même époque, une confusion se pose souvent : beaucoup de contenus statiques passent pour du dynamique aux yeux de l'internaute. Il faut alors rappeler une distinction importante : le code Javascript livré avec un site s'exécute côté client, c'est-à-dire sur l'ordinateur ou le téléphone de l'internaute. À contrario, le CGI ou PHP s'exécute côté serveur, c'est-à-dire sur la machine administrée par le propriétaire du site. Selon ce qu'on veut faire, il faut choisir l'un ou l'autre. - -Quelques exemples pour comprendre cette dichotomie : je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page. - -En conclusion, une page statique peut proposer des interactions et des effets quelconques, et même se comporter comme une application, car l'interactivité est gérée uniquement par votre ordinateur. Dans ce modèle, par contre, le serveur web se contente simplement de vous envoyer les données que vous lui demandez, sans exécuter de logique complexe. diff --git a/content/prise_en_main/winscp.md b/content/prise_en_main/winscp.md new file mode 100644 index 0000000..9457869 --- /dev/null +++ b/content/prise_en_main/winscp.md @@ -0,0 +1,62 @@ +--- +title: "WinSCP" +description: "Publier avec WinSCP" +weight: 3 +extra: + parent: publier-le-contenu +--- + + +# Installation + +Commencez par télécharger l'outil [WinSCP](https://winscp.net/eng/download.php). + +![winscp_dl.png](/img/winscp_dl.png) + +Installez le logiciel. + +# Configuration + +Lancez le. La fenêtre de connexion suivante devrait apparaitre : + +![](/img/winscp_login.png) + +Vous devez : + 1. Vérifier que c'est bien "Nouveau site" qui est sélectionné + 2. Dans *protocole de fichier*, vous devez choisir *Amazon S3* + 3. Dans *nom d'hôte*, vous devez mettre `garage.deuxfleurs.fr` + 4. Dans *numéro de port*, vous devez mettre (ou plutôt laisser) `443` + 5. Dans *id de clé d'accès*, vous devez mettre l'identifiant de votre clé d'accès, exemple : `GK...` + 6. Dans *clé d'accès secrète*, vous devez mettre votre clé d'accès secrète. + 7. Maintenant, cliquez sur le bouton *Avancé*. (Cliquez bien sur le mot "Avancé" et non sur la flèche à droite). Une fenêtre s'ouvre : + +![](/img/winscp_avance.png) + + 1. Dans le menu de gauche, cliquez sur *S3* + 2. Dans la partie de droite, pour *Région par défaut*, inscrivez au clavier *garage* + 3. Toujours à droite, dans *Style URL*, choisissez *Chemin* + 4. Cliquez sur OK + +Vous voilà de retour sur la fenêtre de connexion : + +![](/img/winscp_sauvegarder.png) + + 1. Cliquez sur *Sauver* (cliquez bien sur le texte et non sur la flèche noire à droite) + +La fenêtre suivante apparait : + +![](/img/winscp_session.png) + + 1. Dans *Enregistrer la sessions sous :*, donnez un nom qui identifie bien votre site web, c'est ce qui vous permettra de l'identifier dans la liste de connexion. + 2. Pour la case *Enregistrer le mot de passe*, nous vous conseillons de la cocher sauf si vous êtes sur un ordinateur public (bibliothèque, cybercafé, etc.) ou au travail. + 3. Pour la case *Créer un raccourci sur le bureau*, nous vous conseillons de la cocher, vous pourrez alors mettre votre site en ligne en un seul clic (ou presque) depuis votre bureau. + 4. Cliquez sur OK + +Vous pouvez maintenant cliquer sur "Connexion". + +# Envoyer votre site web + +À gauche, naviguez jusqu'au dossier de votre site web. +Faites en un glisser déposer à droite à l'intérieur du dossier qui contient le nom de votre site web. + +![commander.png](/img/winscp_commander.png) diff --git "a/content/prise_en_main/\303\240-la-main.md" "b/content/prise_en_main/\303\240-la-main.md" new file mode 100644 index 0000000..06d32a8 --- /dev/null +++ "b/content/prise_en_main/\303\240-la-main.md" @@ -0,0 +1,41 @@ +--- +title: "À la main" +description: "Créer du contenu à la main" +sort_by: "weight" +date: 2022-09-01 +weight: 1 +extra: + parent: créer-du-contenu +--- + +Garage, comme tout serveur web, va se contenter ici de servir des fichiers `.html`. Ces fichiers sont tout à fait lisibles et écrivables par un humain. Ainsi, si vous n'avez pas prévu d'avoir un site avec beaucoup de pages, il est souvent intéressant de façonner chacune d'entre elles à la main. + +### Décrire le contenu + +Pour écrire un page web, il faut écrire un fichier `.html` en suivant, justement, la syntaxe et les règles HTML. À titre indicatif, voici un exemple simple : +``` + + + + Mon site + + +

Bonjour; bienvenue sur mon site !

+ + +``` +Vous pourrez facilement trouver moult ressources en ligne pour maîtriser le HTML. [La documentation de Mozilla sur le sujet](https://developer.mozilla.org/fr/docs/Web/HTML) est un bon départ. Enfin, il faut savoir que le HTML est un langage pour décrire le contenu de la page seulement, pas l'allure ou l'esthétique ! La conséquence directe est qu'une page reposant uniquement sur HTML sera sobre : texte noir sur fond blanc, avec alignement à gauche. Si cela vous suffit, vous pouvez d'ores et déjà vous arrêter sur ça. + +### Décrire l'apparence +Si vous souhaitez ajouter des couleurs, modifier la disposition, ou l'arrangement par exemple, il faut rajouter, au-dessus du HTML, une description CSS qui contient vos règles esthétiques. Vous pouvez par exemple créer un fichier `style.css` à la racine du dossier représentant votre site. Ensuite, dans vos pages HTML que vous souhaitez styliser, il faut rajouter, dans la section ``, la formule suivante : `` (attention le chemin de `style.css` est relatif, par exemple si vous voulez styliser une page dans un dossier, il faudrait alors marquer `../style.css` à la place). Une fois ceci fait, lorsque quelqu'un va visiter une page HTML, il va automatiquement récupérer le fichier CSS associé, et l'appliquer. Voici encore une fois, à titre indicatif, un contenu exemple pour `style.css` : +``` +body +{ + margin: 0 auto; + max-width: 1000px; + padding: 10px 10px 10px 10px; +} +``` +Encore une fois, plein de ressources sont disponibles en ligne, et Mozilla propose encore une fois [une bonne base](https://developer.mozilla.org/fr/docs/Web/CSS). + +Une fois que vous avez tous vos fichiers `.html` et `.css` réunis, [vous pouvez passer à la publication](../../publier-le-contenu/) ! -- cgit v1.2.3