aboutsummaryrefslogtreecommitdiff
path: root/content/prise_en_main/web
diff options
context:
space:
mode:
authorQuentin Dufour <quentin@deuxfleurs.fr>2022-05-11 17:53:45 +0200
committerQuentin Dufour <quentin@deuxfleurs.fr>2022-05-11 17:53:45 +0200
commit7f558517f40833d7d80ddcfb4c356ce8dce18463 (patch)
tree39635be08337bb9038d5a0f6efdb9b525e4cc3a2 /content/prise_en_main/web
parente9e2af423557b50c416b68559bab7786bee35ff2 (diff)
downloadguide.deuxfleurs.fr-7f558517f40833d7d80ddcfb4c356ce8dce18463.tar.gz
guide.deuxfleurs.fr-7f558517f40833d7d80ddcfb4c356ce8dce18463.zip
Premier ajout de contenu
Diffstat (limited to 'content/prise_en_main/web')
-rw-r--r--content/prise_en_main/web/_index.md49
-rw-r--r--content/prise_en_main/web/dns.md53
-rw-r--r--content/prise_en_main/web/rclone.md103
-rw-r--r--content/prise_en_main/web/winscp.md54
4 files changed, 259 insertions, 0 deletions
diff --git a/content/prise_en_main/web/_index.md b/content/prise_en_main/web/_index.md
new file mode 100644
index 0000000..bef8063
--- /dev/null
+++ b/content/prise_en_main/web/_index.md
@@ -0,0 +1,49 @@
+---
+title: Site web
+description: Héberger un site web
+---
+
+
+Vous en avez marre de faire toute votre communication associative via Facebook ? Vous voulez créer votre propre site pour raconter votre dernier road-trip ou publier vos poèmes ? Vous ne savez pas vous y prendre ?
+Deuxfleurs est là pour vous, on vous fournit une plateforme d'hébergement et on se fera un plaisir de vous accompagner !
+
+
+
+# Demander un accès
+
+Contactez un·e opérateur·ice en lui indiquant le nom que vous souhaitez pour votre site web.
+Nous vous fournirons ensuite les identifiants suivants que vous utiliserez pour la mise en ligne de votre site web :
+ - L'identifiant de votre clé d'accès (exemple : `GKae0f36c...`)
+ - Votre clé d'accès secrète (exemple : `ae6df87221edd...`)
+
+
+# Sites statiques
+
+Nous fournissons un système d'hébergement de site statique, c'est à dire de HTML, CSS et Javascript.
+Il n'est pas possible d'utiliser du PHP ou Wordpress car ces derniers utilisent trop de ressources et ne sont pas compatibles avec nos choix techniques.
+
+Si vous ne savez pas quels outils utiliser pour la création de votre site statique, nous vous proposons la sélection suivante :
+ - [Publii](https://getpublii.com/) - si vous êtes seul·e à gérer votre site web
+ - NetlifyCMS (à venir) - pour publier à plusieurs
+ - [Hugo](https://gohugo.io/) (avancé) - Avec un générateur de site statique
+ - [VSCodium](https://vscodium.com/) (avancé) - [Apprenez à créer votre site web avec HTML5 et CSS3](https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3) sur OpenClassrooms
+
+# Mise en ligne
+
+Si vous avez déjà votre site web statique, voici notre suggestion d'outils pour le mettre en ligne :
+
+ - [WinSCP](/premiers_pas/web/winscp) (Windows seulement, niveau facile)
+ - [Rclone Browser](/premiers_pas/web/rclone) (Linux, macOS et Windows, niveau moyen)
+ - (à venir) notre propre outils
+ - (à venir, avancé) drone + git
+ - (à venir, avancé) awscli
+
+# 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é*
+
diff --git a/content/prise_en_main/web/dns.md b/content/prise_en_main/web/dns.md
new file mode 100644
index 0000000..0e7d827
--- /dev/null
+++ b/content/prise_en_main/web/dns.md
@@ -0,0 +1,53 @@
+---
+title: DNS
+description:
+published: true
+date: 2021-11-29T08:56:54.837Z
+tags:
+editor: markdown
+dateCreated: 2021-11-29T08:46:18.021Z
+---
+
+# Nom de domaine (DNS)
+
+*À venir*
+
+## Tutoriel avec Gandi
+
+*À venir*
+
+### Louer son nom de domaine
+
+Nous recommandons également de choisir un nom de domaine en `.fr` (géré par l'association française AFNIC), `.org` (géré par l'association américaine Public Internet Regitry) ou `.eu` (géré par l'association EURid). 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. Parfois, les bureaux d'enregistrement vous fournissent "des extras" en plus comme une boite email, mais par rapport à la concurrence, ces "extras" n'influent (généralement) pas sur les prix.
+
+Gandi est un bureau d'enregistrement de nom de domaine que nous recommandons. [Voir la fiche Wikipeda](https://fr.wikipedia.org/wiki/Gandi_(entreprise)).
+
+### Le configurer pour Deuxfleurs
+
+Une fois loué, il faut maintenant le configurer.
+
+#### Pour un site web
+
+Supposons que vous avez loué camille-michu.fr chez Gandi et que vous vouliez que votre site web soit accessible à l'URL suivante : https://camille-michu.fr
+
+D'abord, rendez-vous dans votre espace utilisateur Gandi, puis de là cliquez dans le menu à gauche sur "Nom de domaine" :
+
+![dns1.png](/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](/dns2.png)
+
+Dans le menu du haut, sélectionnez "Enregistrements DNS" :
+
+![dns3.png](/dns3.png)
+
+Ensuite cliquez sur le bouton "Ajouter un enregistrement" :
+
+![dns4.png](/dns4.png)
+
+Choisissez alors "ALIAS" comme type, et `nomad1.cluster.deuxfleurs.fr` comme nom d'hôte.
+
+![dns5.png](/dns5.png) \ No newline at end of file
diff --git a/content/prise_en_main/web/rclone.md b/content/prise_en_main/web/rclone.md
new file mode 100644
index 0000000..b0e77d2
--- /dev/null
+++ b/content/prise_en_main/web/rclone.md
@@ -0,0 +1,103 @@
+---
+title: Rclone Browser
+description: Rclone Browser
+published: true
+date: 2021-11-25T14:31:35.570Z
+tags:
+editor: markdown
+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](/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 = <REMPLACEZ PAR VOTRE IDENTIFIANT DE CLE D'ACCESS>
+secret_access_key = <REMPLACEZ PAR VOTRE CLE D'ACCES SECRETE>
+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](/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](/capture_d’écran_de_2021-11-25_14-43-03.png)
+
+L'application devrait se lancer :
+
+![rclone_init.png](/rclone_init.png)
+
+Cliquez sur "File" (Fichiers) en haut à gauche, puis sur "Preferences...". La fenêtre suivante s'ouvre :
+
+![rclone-conf2.png](/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](/rclone-s3.png)
+
+Cliquez sur "S3 garage" puis cliquez sur "Open". Si vous voyez des dossiers apparaitre, c'est gagné !
+
+![rclone-conn.png](/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](/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](/nautilus-distant.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](/capture_d’écran_de_2021-11-25_15-01-42.png)
+
+
+
diff --git a/content/prise_en_main/web/winscp.md b/content/prise_en_main/web/winscp.md
new file mode 100644
index 0000000..b8eaf87
--- /dev/null
+++ b/content/prise_en_main/web/winscp.md
@@ -0,0 +1,54 @@
+---
+title: WinSCP
+description: WinSCP
+---
+
+
+# Installation
+
+Commencez par télécharger l'outil [WinSCP](https://winscp.net/eng/download.php).
+
+![capture_d’écran_de_2021-11-22_09-31-21.png](/capture_d’écran_de_2021-11-22_09-31-21.png)
+
+Installez le logiciel.
+
+# Configuration
+
+Lancez le. La fenêtre de connexion suivante devrait apparaitre :
+
+![frlogin.png](/frlogin.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 :
+
+![fravance.png](/fravance.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 :
+
+![frsauve.png](/frsauve.png)
+
+ 1. Cliquez sur *Sauver* (cliquez bien sur le texte et non sur la flèche noire à droite)
+
+La fenêtre suivante apparait :
+
+![frsauve.png](/frsauver.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".
+
+![commander.png](/commander.png)