diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..d888b94 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,12 @@ +--- +title: "{{ replace .TranslationBaseName "-" " " | title }}" +date: {{ .Date }} +lastmod: {{ .Date }} +publishdate: {{ .Date }} +description: "" +weight: 10 +categories: [] +tags: [] +--- + +Lorem Ipsum. 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/recettes/crepes-pur-sarrasin.md b/content/recettes/crepes-pur-sarrasin.md index 6ed50c2..a01a2e3 100644 --- a/content/recettes/crepes-pur-sarrasin.md +++ b/content/recettes/crepes-pur-sarrasin.md @@ -1,5 +1,5 @@ --- -title: "Crêpes salées pures sarrasin" +title: "Crêpes salées pur sarrasin" date: 2025-03-21T22:41:15+01:00 lastmod: 2025-03-21T22:41:15+01:00 publishdate: 2025-03-21T22:41:15+01:00 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" diff --git a/css-dist/theme.min.css b/css-dist/theme.min.css deleted file mode 100644 index aeef00d..0000000 --- a/css-dist/theme.min.css +++ /dev/null @@ -1,2 +0,0 @@ -@charset "UTF-8"; -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0}a{color:inherit;cursor:pointer}button,input,select,textarea{font:inherit}button{background-color:transparent;border-width:0;color:inherit;cursor:pointer;padding:0}input::-moz-focus-inner{border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}cite{font-style:normal}fieldset{border-width:0;margin:0;padding:0}*{box-sizing:border-box}:root{font-feature-settings:"pwid";color:#000;font-family:var(--custom-font-family-base,-apple-system,BlinkMacSystemFont,"游ゴシック体",YuGothic,"メイリオ",Meiryo,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:18px;line-height:1.6666666667}body{background-color:#fafafa;margin:0}h1,h2,h3,h4,h5,h6{font-family:var(--custom-font-family-headings,-apple-system,BlinkMacSystemFont,"游ゴシック体",YuGothic,"メイリオ",Meiryo,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-weight:700;line-height:1.6666666667}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{font-size:75%;font-weight:400}h1{font-size:240%;line-height:1.3125}h2{font-size:200%;line-height:1.375}h3{font-size:160%;line-height:1.46875}h4{font-size:125%;line-height:1.6}h5{font-size:100%;line-height:1.75}h6{font-size:80%;line-height:1.9375}a{color:var(--custom-link-text-color,#2e7eb3);text-decoration:none}a:active,a:focus,a:hover{color:var(--custom-link-text-hover-color,#38a0e4);text-decoration:underline}hr{background-color:#ccc;border:0;height:2px}p{font-size:18px}img{display:inline-block;line-height:0}img,video{height:auto;max-width:100%}table{border:1px solid #f0f0f0;border-collapse:collapse;width:100%}td,th{border-right:1px solid #f0f0f0;border-top:1px solid #f0f0f0;padding:.6rem}tr:nth-child(2n) td,tr:nth-child(2n) th{background:#f8f8f8}th{background:#eee;font-weight:700;text-align:left}ul{list-style-type:disc}ul.inline,ul.no-style{list-style:none;padding-left:0}ul.inline li{display:inline;padding-right:2rem}dt{font-weight:700}dd{margin-left:2rem}blockquote{background-color:#f4f4f4;border-left:4px solid #f0f0f0;border-radius:.2rem;color:#999;padding:1.6666666667rem}code,kbd,pre{font-family:Menlo,Monaco,Courier New,monospace}code,kbd{border-radius:.2rem;padding:.2rem}code{background-color:#f4f4f4}kbd{background-color:#333;color:#fff}pre{background-color:#f4f4f4;border-radius:.2rem;overflow:auto;padding:1.6666666667rem;white-space:pre-wrap}pre code{background-color:unset;padding:0}pre.wrap{word-wrap:break-word;white-space:pre;white-space:pre-wrap;word-break:break-all}pre.scrollable{max-height:240px;overflow-y:scroll}figcaption{color:#333;font-size:18px;line-height:1.6666666667}:root{--const-stack:1.6666666667rem;--stack-top:1.6666666667rem;--stack-bottom:0;--first-stack-top:0;--first-stack-bottom:0;--last-stack-top:0;--last-stack-bottom:0}.first-stack,main *{margin-bottom:var(--first-stack-bottom,unset);margin-top:var(--first-stack-top,unset)}.ais-Hits-item,.button,.code,.edit-meta,.edit-page,.gist,.highlight,.pagination,.panel,.powered,.stack,.table_of_contents,.twitter-tweet,main *+blockquote,main *+dl,main *+figure,main *+h1,main *+h2,main *+h3,main *+h4,main *+h5,main *+h6,main *+hr,main *+ol,main *+p,main *+pre,main *+table,main *+ul{margin-bottom:var(--stack-bottom,unset);margin-top:var(--stack-top,unset)}.last-stack{margin-bottom:var(--last-stack-bottom,unset);margin-top:var(--last-stack-top,unset)}.stack-multi--by2{margin-bottom:calc(var(--first-stack-bottom, unset)*2);margin-top:calc(var(--first-stack-top, unset)*2)}.stack-multi--by4{margin-bottom:calc(var(--first-stack-bottom, unset)*4);margin-top:calc(var(--first-stack-top, unset)*4)}.stack-divi--by2{margin-bottom:calc(var(--first-stack-bottom, unset)/2);margin-top:calc(var(--first-stack-top, unset)/2)}.code .code-content .highlight,.none-stack,.pagination>*,figure>figcaption{margin-top:0}.ais-Hits-item p,.unset-stack,main li>ol,main li>ul{margin-top:unset}body,html{height:100%}.container{flex-flow:column nowrap;height:100%;margin:auto;width:100%}.container,.content-container{box-sizing:border-box;display:flex}.content-container{flex:1 0 auto;justify-content:center}main{flex:0 0 75%;max-width:75%}main,main:only-child{box-sizing:border-box}main:only-child{flex:0 0 100%;max-width:100%}.sidebar{box-sizing:border-box;flex:0 0 25%;order:-1;overflow-x:hidden;overflow-y:scroll}@media screen and (max-width:480px){.content-container{box-sizing:border-box;display:flex;flex-flow:column nowrap}main{min-width:100%}.sidebar,main{box-sizing:border-box;flex:0 0 auto}.sidebar{order:1}}.pagination{box-sizing:border-box;display:flex;flex-wrap:nowrap;font-weight:700;justify-content:space-between}.nav-next{margin-left:auto}@media screen and (max-width:480px){.pagination{align-items:center;box-sizing:border-box;display:flex;flex-flow:column nowrap}.nav-next{margin-left:0}}.panel{--panel-font-color:#000;--panel-background-color:unset;--panel-border-color:transparent;background:var(--panel-background-color,unset);border:1px solid;border-color:var(--panel-border-color,transparent);color:var(--panel-font-color,#000);padding:1.6666666667rem}.panel a{font-weight:700;text-decoration:underline}.panel-primary{--panel-border-color:#f0f0f0}.panel-notice{--panel-font-color:#fff;--panel-background-color:#b0b0b0;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-recipe{--panel-font-color:#000;--panel-background-color:#b0b0b0;--custom-link-text-color:#2e7eb3;--custom-link-text-hover-color:#2e7eb3}.panel-success{--panel-font-color:#fff;--panel-background-color:#609f43;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-caution{--panel-font-color:#fff;--panel-background-color:#de776d;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-warning{--panel-font-color:#fff;--panel-background-color:#e67e22;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-danger{--panel-font-color:#fff;--panel-background-color:#ce3426;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.button{--button-font-color:#000;--button-font-hover-color:#000;--button-background-color:#fafafa;--button-background-hover-color:#f7f7f7;--button-border-color:#f0f0f0;background:var(--button-background-color,unset);border:2px solid;border-color:var(--button-border-color,transparent);border-radius:.8rem;color:var(--button-font-color,#000);display:inline-block;font-size:120%;font-weight:700;padding:.5rem 1.2rem;text-decoration:none}.button:hover{background:var(--button-background-hover-color,unset);color:var(--button-font-hover-color,#000);text-decoration:none}.button-notice{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#4ba0e1;--button-background-hover-color:#3b89c5;--button-border-color:transparent}.button-success{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#369b08;--button-background-hover-color:#256905;--button-border-color:transparent}.button-caution{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#f56558;--button-background-hover-color:#d45145;--button-border-color:transparent}.button-warning{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#f5811b;--button-background-hover-color:#db7012;--button-border-color:transparent}.button-danger{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#ce3426;--button-background-hover-color:#a0281d;--button-border-color:transparent}.notification{background:#eee;padding:.2rem 1.6666666667rem;text-align:center}.backtothetop{display:none;font-size:200%}.fa-layers .fa-circle{color:#fff}figure>figcaption h4{font-size:80%;font-weight:400}.table_of_contents{border:4px solid #f0f0f0;font-size:90%;padding:1.6666666667rem}.table_of_contents ul{list-style:none;padding-left:0}.table_of_contents li{border-top:1px solid #f0f0f0}.table_of_contents>nav>ul>li:first-child{border-top:unset}.table_of_contents ul>li li a{margin-left:2rem}.table_of_contents ul ul>li li a{margin-left:4rem}.table_of_contents ul ul ul>li li a{margin-left:6rem}.table_of_contents ul ul ul ul>li li a{margin-left:8rem}.table_of_contents ul ul ul ul ul>li li a{margin-left:10rem}.headerlink>.svg-inline--fa{margin-left:.4rem;width:.8rem}.ais-SearchBox .ais-SearchBox-input{width:70%}.ais-SearchBox button{margin-left:.2rem;padding:.4rem}.ais-Stats{color:#70757a;font-size:80%}.ais-Hits-item h3{font-size:140%;font-weight:400}.ais-Hits-item p{color:#3c4043}.ais-Hits-item .lastmod{color:#70757a;font-size:90%}.ais-Pagination{margin-top:1em}.ais-Pagination-list{box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding-left:0}.ais-Pagination-item{padding:.6rem}.code{box-sizing:border-box;display:flex;flex-wrap:wrap}.code .filename{box-sizing:border-box;color:#666;flex:0 0 75%;font-size:80%;max-width:75%}.code .copy-btn{border:1px solid #ccc;border-radius:.3rem;cursor:pointer;font-size:80%;line-height:1;margin-bottom:.2rem;margin-left:auto;outline:none;padding:.2rem .6rem;position:relative}.code .code-content{box-sizing:border-box;flex:0 0 100%;max-width:100%}.tooltipped:after{animation:fade-tooltip .5s 1s 1 forwards;background:#555;border-radius:.4rem;color:#fff;content:"Copied!";display:inline-block;font-size:.75rem;left:50%;padding:4px 10px 6px;position:absolute;top:-1.8rem;transform:translate(-50%)}@keyframes fade-tooltip{to{opacity:0}}header{background:var(--custom-background-color,#000);color:var(--custom-font-color,#fff);padding:.5rem 1.6666666667rem}header h1{display:inline-block;font-size:140%}header .version{font-size:80%;margin-left:.4rem}header .github{color:currentColor;font-size:180%;margin-left:.4rem}.global-menu{background:var(--custom-background-color,#000);color:var(--custom-font-color,#fff);padding:.2rem 1.6666666667rem}.global-menu ul{list-style:none;margin:0;padding:0}.global-menu li{display:inline-block;margin-right:1.8rem;position:relative}.global-menu ul.sub-menu{display:none;left:0;margin:0;position:absolute;top:1.8rem;z-index:99999}.global-menu ul.sub-menu li{background:var(--custom-background-color,#000);font-size:80%;padding:.2rem 1.6666666667rem;width:140px}.global-menu ul.sub-menu li a{color:var(--custom-font-color,#fff)}.global-menu .fa-angle-right{font-size:80%;margin-left:.4rem}.global-menu li.parent:hover>ul.sub-menu{box-sizing:border-box;display:flex;flex-flow:column nowrap}@media screen and (max-width:480px){.global-menu li{border-bottom:1px solid;display:block;margin-right:0}.global-menu li:last-child{border-bottom:none}.global-menu .fa-angle-right{display:none}.global-menu ul.sub-menu{display:block;position:static}.global-menu ul.sub-menu li{background:transparent;padding:0 .4rem;width:auto}.global-menu ul.sub-menu li+li{padding-top:.2rem}.global-menu ul.sub-menu li a{color:currentColor}}.global-menu a{color:currentColor;display:block;text-decoration:none}.global-menu a:hover{text-decoration:underline}main{padding:3rem}@media screen and (max-width:480px){main{padding:1rem}}.sidebar{background:#f9f9f9;border-right:1px solid #eee;font-size:90%;line-height:1.8}.sidebar ul{list-style:none;margin:0;padding:0}.sidebar a{border-bottom:1px solid #eee;border-left:4px solid #f9f9f9;color:#404040;display:block;padding:.2rem 1rem;position:relative;text-decoration:none}.sidebar a:hover{background:#eee;border-left:4px solid #ccc;color:#404040}.sidebar nav>ul>li li a{padding-left:2rem}.sidebar nav>ul ul>li li a{padding-left:3rem}.sidebar nav>ul ul ul>li li a{padding-left:4rem}.sidebar nav>ul ul ul ul>li li a{padding-left:5rem}.sidebar nav>ul ul ul ul ul>li li a{padding-left:6rem}@media screen and (max-width:480px){.sidebar nav>ul>li:first-child a{border-top:1px solid #eee}}.sidebar .active>a{background:#eee;border-left:4px solid #ccc}.sidebar .slide-menu .has-sub-menu:not(.parent) ul{display:none}.sidebar .slide-menu .has-sub-menu>a span.mark{background:#f2f2f2;border-left:1px solid #e7e7e7;color:#979797;display:inline-block;height:32px;line-height:2;position:absolute;right:0;text-align:center;top:0;width:32px}.sidebar-footer{padding:1.6666666667rem}.edit-meta{font-size:80%;text-align:right}.edit-page{font-weight:700}.powered{color:#999;font-size:80%;text-align:right} \ No newline at end of file