180 lines
7.1 KiB
HTML
180 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
|
|
<title>Créez vos sites web statiques sans prise de tête avec Hugo :: Romain de Laage — Le blog d'un étudiant en informatique</title>
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Créez vos sites web statiques sans prise de tête avec Hugo Un site web statique est un site web dont le contenu ne change pas en fonction de la personne qui navigue dessus. Vous pouvez bien sûr éditer le site directement en HTML et en CSS mais cela peut vite devenir un enfer si vous devez modifier le style du site, il faut alors modifier toutes les pages déjà créées." />
|
|
<meta name="keywords" content="web, markdown" />
|
|
<meta name="robots" content="noodp" />
|
|
<link rel="canonical" href="https://rdelaage.ovh/blog/posts/hugo/" />
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://rdelaage.ovh/blog/assets/style.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://rdelaage.ovh/blog/img/apple-touch-icon-144-precomposed.png">
|
|
|
|
<link rel="shortcut icon" href="https://rdelaage.ovh/blog/img/favicon/orange.png">
|
|
|
|
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
|
|
<meta name="twitter:creator" content="Romain de Laage" />
|
|
|
|
|
|
<meta property="og:locale" content="fr" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:title" content="Créez vos sites web statiques sans prise de tête avec Hugo :: Romain de Laage">
|
|
<meta property="og:description" content="Hugo est un générateur de site statique personnalisable à partir de fichiers écrits en markdown" />
|
|
<meta property="og:url" content="https://rdelaage.ovh/blog/posts/hugo/" />
|
|
<meta property="og:site_name" content="Créez vos sites web statiques sans prise de tête avec Hugo" />
|
|
|
|
|
|
<meta property="og:image" content="https://rdelaage.ovh/blog/img/favicon/orange.png">
|
|
|
|
|
|
<meta property="og:image:width" content="2048">
|
|
<meta property="og:image:height" content="1024">
|
|
|
|
|
|
<meta property="article:published_time" content="2020-07-20 00:00:00 +0000 UTC" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body class="">
|
|
|
|
|
|
<div class="container full headings--one-size">
|
|
|
|
<header class="header">
|
|
<div class="header__inner">
|
|
<div class="header__logo">
|
|
<a href="https://rdelaage.ovh/blog">
|
|
<div class="logo">
|
|
rdelaage
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
<div class="menu-trigger">menu</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
<div class="content">
|
|
|
|
<div class="post">
|
|
<h1 class="post-title">
|
|
<a href="https://rdelaage.ovh/blog/posts/hugo/">Créez vos sites web statiques sans prise de tête avec Hugo</a></h1>
|
|
<div class="post-meta">
|
|
|
|
<span class="post-date">
|
|
2020-07-20
|
|
</span>
|
|
|
|
|
|
<span class="post-author">::
|
|
Romain de Laage
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
<span class="post-tags">
|
|
|
|
#<a href="https://rdelaage.ovh/blog/tags/web/">web</a>
|
|
|
|
#<a href="https://rdelaage.ovh/blog/tags/markdown/">markdown</a>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="post-content"><div>
|
|
<h1 id="créez-vos-sites-web-statiques-sans-prise-de-tête-avec-hugo">Créez vos sites web statiques sans prise de tête avec Hugo<a href="#créez-vos-sites-web-statiques-sans-prise-de-tête-avec-hugo" class="hanchor" ariaLabel="Anchor">⌗</a> </h1>
|
|
<p>Un site web statique est un site web dont le contenu ne change pas en fonction de la personne qui navigue dessus. Vous pouvez bien sûr éditer le site directement en HTML et en CSS mais cela peut vite devenir un enfer si vous devez modifier le style du site, il faut alors modifier toutes les pages déjà créées.</p>
|
|
<p>Un générateur comme <a href="https://gohugo.io/">Hugo</a> ou comme <a href="https://jekyllrb.com/">Jekyll</a> permet d’écrire le contenu du site dans un langage simple comme markdown (et uniquement le contenu) et de générer automatiquement les pages finales et leur style à l’aide de templates. Il est ainsi super simple de modifier le style des pages car on ne modifie que les templates et on relance la génération des pages. Par ailleurs ces génrateurs permettent de créer automatiquement le flux RSS.</p>
|
|
<p>J’ai choisi de vous présenter Hugo car c’est celui que j’ai choisi pour mes besoins, il est écrit en go donc est compilé et plus rapide logiquement, il est multiplateforme donc fonctionne peut importe le poste sur lequel je travaille, libre bien évidemment et propose une large bilbiothèque de thème. En effet certains thèmes conviennent pour des blog (comme le thème <a href="https://themes.gohugo.io/hugo-theme-terminal/">Terminal</a> que j’utilise ici), d’autres pour de la documentation, des CV ou encore des portfolio. J’ai donc l’intention de l’utiliser également pour ma documentation par exemple.</p>
|
|
<p>L’avantage d’un générateur comme celui là au lieu d’un interpréteur markdown écrit en NodeJS ou en PHP par exemple, c’est qu’il n’est exécuté qu’une fois au moment de la mise à jour et il suffit ensuite de servir les pages générées sur un serveur Apache, Nginx ou Caddy, ainsi l’administration se trouve fortement simplifiée, les ressources de la machines et l’électricité sons économisés et le service de la page au client est plus rapide.</p>
|
|
<p>Afin de mettre en place il suffit de télécharger l’exécutable sur la page GitHub su projet puis de le mettre dans le $PATH de votre machine. Puis vous vous rendez à l’endroit ou vous souhaitez placer le dossier de votre projet et lancez <code>hugo new site <nom du site></code>. Un dossier avec le nécessaire est créé puis dans ce dossier vous lancez <code>hugo new posts/<nom du poste>.md</code> pour créer un post. Vous pouvez l’éditer et vous terminez par un simple <code>hugo</code> pour générer le site. Le produit final se trouve dans le dossier public.</p>
|
|
<p>Une page de documentation viendra bientôt pour montrer comment je fais sur ma propre infrastructure, en attendant vous pouvez regarder la <a href="https://gohugo.io/documentation/">documentation officielle</a> pour avoir plus de précisions.</p>
|
|
|
|
</div></div>
|
|
|
|
|
|
|
|
<div class="pagination">
|
|
<div class="pagination__title">
|
|
<span class="pagination__title-h">Lire d'autres articles</span>
|
|
<hr />
|
|
</div>
|
|
<div class="pagination__buttons">
|
|
|
|
|
|
<span class="button next">
|
|
<a href="https://rdelaage.ovh/blog/posts/premier-article/">
|
|
<span class="button__text">Premier article</span>
|
|
<span class="button__icon">→</span>
|
|
</a>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<footer class="footer">
|
|
<div class="footer__inner">
|
|
|
|
<div class="copyright copyright--user">
|
|
<span>CC-BY-SA</span>
|
|
|
|
<span>:: Theme made by <a href="https://twitter.com/panr">panr</a></span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://rdelaage.ovh/blog/assets/main.js"></script>
|
|
<script src="https://rdelaage.ovh/blog/assets/prism.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|