diff --git a/archetypes/tech.md b/archetypes/tech.md new file mode 100644 index 0000000..5cfdcb9 --- /dev/null +++ b/archetypes/tech.md @@ -0,0 +1,12 @@ +--- +title: "{{ replace .TranslationBaseName "-" " " | title }}" +date: {{ .Date }} +lastmod: {{ .Date }} +publishdate: {{ .Date }} +description: "" +weight: 10 +categories: ["tech"] +tags: [] +--- + +Lorem Ipsum. diff --git a/content/tech/_index.md b/content/tech/_index.md new file mode 100644 index 0000000..5466a67 --- /dev/null +++ b/content/tech/_index.md @@ -0,0 +1,13 @@ +--- +title: "Tech" +date: 2025-03-22T18:35:25+01:00 +lastmod: 2025-03-22T18:35:25+01:00 +publishdate: 2025-03-22T18:35:25+01:00 +description: "Technique, informatique, internet, etc" +weight: 10 +categories: [] +tags: [] +--- + +Section consacrée à mes trouvailles et donc qui me servira de mémo, mais qui va aussi +présenter les différentes configurations de mes appareils, sites, etc. diff --git a/content/tech/creation-site.md b/content/tech/creation-site.md new file mode 100644 index 0000000..27af616 --- /dev/null +++ b/content/tech/creation-site.md @@ -0,0 +1,112 @@ +--- +title: "Creation du présent site" +date: 2025-03-22T18:40:11+01:00 +lastmod: 2025-03-22T18:40:11+01:00 +publishdate: 2025-03-22T18:40:11+01:00 +description: "Tout ce que j'ai découvert et qui mérite d'être consigné" +weight: 10 +categories: ["tech", "site"] +tags: [] +--- + +Je débute en technos front, je n'avais jamais fait de site auparavant. + +Je note donc ici tout ce qui m'a été utile de savoir pour faire ce site. + +Pour faire ce site je n'ai pas voulu utiliser de CMS type WordPress, je n'y comprends rien, le [WYSIWYG][wysiwyg], c'est pas pour moi. +Du coup j'ai voulu faire mon barbu et je me suis tourné vers [Hugo][hugo]. + +## Hugo + +Hugo est un générateur de site statique, c'est-à-dire qu'il produit des fichiers HTML et CSS, auxquels on peut éventuellement ajouter du JS. +Les CMS types WordPress sont dynamiques, les informations sont stockées dans une base de données et sont servies au client via une construction de la page au moment de la requête. + +Bref je veux un truc plus léger et plus simple (?) à mettre en place, qui me laisse une grande liberté (parce que je peux être tatillon). + +Le contenu est écrit avec mon éditeur de texte préféré sur mon ordinateur, je n'ai pas besoin d'être connécté à internet et d'aller sur l'interface d'administration de mno site. +Une fois le contenu écrit, il faut bien là une connection internet pour pouvoir envoyer les modifications. + +Hugo permet de ne se concentrer que sur le contenu, on écrit les text au format [Markdown][markdown] et Hugo permet de convertir tout ça en HTML, une fois la rédaction terminée. + +Tout la partie visualisation est gérée par un thème, que l'on peut changer très facilement. +Il en existe des centaines disponibles sur internet. +Le site de Hugo [en recense quelques-uns][themes-hugo]. + +### Petits mémos qui m'ont été utiles pendant la mise en place + +#### Modification du thème + +Dans l'architecture d'un site fait avec Hugo, les thèmes se trouvent dans le répertoire `themes`. +Aucun des différents thèmes que j'ai utilisé ne me convenait à 100% et j'ai donc voulu les modifier. +Pour modifier un thème, il n'est pas possible de faire une modification du thème directement étant donné qu'il est issu d'un dépôt git d'une autre personne. +La solution proposée par Hugo se trouve au cœur même de son architecture. +Il existe des dossiers `archetypes`, `images`, `layouts` et `static` qui permettent de surcharger les mêmes dossiers issus du thème. + +#### CSS et SCSS + +Le thème que j'utilise a un CSS qui a été compilé avec SCSS. +SCSS permet de simplifier l'écriture du CSS, mais demande à être compilé en CSS avant de pouvoir être utilisé. + +Pour utiliser SCSS, il faut installer le package npm `sass` via la commande : + +```shell +npm install -g sass +``` + +Pour compiler un fichier SCSS en CSS, il faut lancer la commande + +```shell +sass src/scss/theme.scss static/css/theme.css +``` + +#### Minifier le CSS + +Le CSS produit à un impact sur les performances du site et celles-ci peuvent-être améliorées en "minifiant" le CSS produit. +Une lib appelée `css-minify` peut-être utilisée à cette fin, il suffit de l'installer avec npm : + +```shell +npm install css-minify -g +``` + +Eton peut l'utiliser avec : + +```shell +css-minify -f static/css/theme.css -o static/css/ +``` + +qui créera un fichier theme.min.css dans le dossier `static/css/`. +Fichier qui pourra être utilisé dans le HTML ! + +## Infrastructure + +J'ai serveur qui regroupe beaucoup de services, dont la partie émergée est ce blog. +Ce serveur est un VPS de chez [OVH][ovh]. + +Sur ce serveur, j'ai installé [Yunohost][yunohost] qui me permet d'installer très facilement des centaines applications dessus. +Et donc ça permet notamment de mettre en place un site web, le présent site web. + +### Déploiement du site + +Pour compiler les fichiers markdown en HTML il suffit lancer la commande + +```shell +hugo +``` + +Cette commande crée un dossier `public/` qui contient tous les fichiers HTML. +Pour publier ces fichiers sur le site, j'utilise [Rclone][rclone]. +Rclone me permet de transférer via SFTP ces fichiers sur le serveur avec la commande + +```shell +rclone sync public/ accueil:www/ +``` + +Et voilà ! + +[wysiwyg]: https://fr.wikipedia.org/wiki/What_you_see_is_what_you_get "Wikipédia - WYSIWYG" +[hugo]: https://gohugo.io/ "Hugo" +[themes-hugo]: https://themes.gohugo.io/ "Thèmes pour Hugo" +[markdown]: https://daringfireball.net/projects/markdown/ "Site officiel de Markdown" +[ovh]: https://www.ovh.com/ "Site officiel d'OVH" +[yunohost]: https://yunohost.org/ "Site officiel de Yunohost" +[rclone]: https://rclone.org/ "Site officiel de Rclone"