Rendre la création de sites Web amusant à nouveau avec Hugo

Les sites statiques sont populaires pour plusieurs raisons. Éviter les solutions excessives et garder un projet simple sans bases de données, trop de dépendances ou des configurations spécifiques côté serveur (pas de PHP, pas de MySQL / MSSQL, .NET, Python, Ruby, etc.), il est très simple de déployer et d'être robuste contre de nombreuses vulnérabilités possibles. En fin de compte, ces pages deviennent des pages HTML de base servies à l'utilisateur.

Dans ce guide, je vais vous montrer comment configurer votre environnement de développement avec Hugo et créer votre premier site web Hugo statique..

Une toute nouvelle approche des sites Web statiques

L'acronyme de design légendaire KISS - Keep It Simple, Stupid - peut être appliqué à Hugo et comment il aborde l'espace de générateur de site Web statique.

Construit en Go, Hugo compile rapidement vos pages statiques (il faut des fractions de millisecondes pour compiler un petit site - et peut faire des milliers de pages en quelques secondes).

Hugo fournit également des outils essentiels au flux de travail statique du site Web (y compris des outils de déploiement et de migration), permettant aux développeurs et aux concepteurs de se concentrer sur des aspects amusants, tels que l'exercice de leur créativité et la mise en œuvre de cette créativité dans la construction du site Web..

Pourquoi des sites statiques??

Lorsque nous construisons des sites Web basés sur le contenu, nous pouvons assumer certaines généralités sur tous les sites et Hugo fournit un cadre pour cela. Plus précisément, nous pouvons prendre des types de contenu tels que des articles, des catégories, des critiques ou des produits et organiser les données. Ensuite, nous pouvons donner à chacun un look spécifique via des modèles et des feuilles de style.

À l'avenir, nous pourrons alors vraiment le conduire n'importe où dans l'espace Web statique HTML / CSS / JS. Quand on y pense de manière pragmatique, c'est un grand espace qui laisse beaucoup de place à la créativité..

jQuery fonctionnera correctement et rien ne vous empêchera d'utiliser des services tiers sur votre page statique, si vous en avez besoin. Alors, ne vous limitez pas en pensant que vous ne pouvez pas intégrer d’autres bibliothèques ou applications dans vos sites statiques. Ce n'est vraiment pas le cas - vous pouvez utiliser l'une des bibliothèques JavaScript disponibles.

Donc, pour quelques pages d'un site Web de type brochure d'entreprise, avec un lien vers une page Google Forms pour une page Contactez-nous. Et si vous avez besoin d'afficher d'autres types de données, vous pouvez utiliser JavaScript pour cet aspect de votre site..

Comment cela peut-il fonctionner pour mon entreprise et mes clients?

Prenons, par exemple, un petit magasin ou un pigiste proposant quelques produits ou services ne nécessitant pas une solution de commerce électronique complète. Au lieu de cela, ils exigent uniquement des informations sur le produit et un lien "contact" sur la page. Hugo peut le faire d'ici la fin de la matinée. L'hébergement n'est même pas un gros problème - c'est une réflexion après coup, vraiment, parce que nous ne servons que des pages HTML de base.

Hugo fonctionne également bien pour la documentation de projet sur les projets GNU. Par exemple, pensez aux start-ups ou aux PME qui ont besoin d’une simple présence.

Quelles sont les limites des sites statiques?

Ce que Hugo ne peut pas faire, c'est dynamique contenu, par exemple, formulaires gérés par base de données, systèmes de recherche ou utilisateurs. Si c'est ce que vous cherchez, alors Hugo est certainement ne pas ce que tu veux. Mais pour les autres fois, quand vous dites que vous ne pouvez pas simplement afficher une page de base pour cela? Les générateurs de sites Web statiques sont une option solide. De plus, sachez que Hugo n'est pas le seul générateur de site statique. Il y en a beaucoup et ça fait longtemps, en voici une liste.

Hugo pourrait être une excellente solution pour créer rapidement des blogs de contenu en direct, tels que des sites d'actualités, afin de créer rapidement une page pour que cette couverture soit liée à votre site principal. très rapidement. Mais pour faire un site de nouvelles entier avec la recherche et de nombreux auteurs, il ne serait vraiment pas approprié d'utiliser Hugo.

Hugo manque également d'utiliser des outils plus avancés pour son portefeuille d'actifs tels que ES6 et Sass. Si vous souhaitez utiliser cette technologie, vous devez inclure Gulp ou Grunt pour que le travail soit effectué. sinon, CSS et JavaScript à la vanille fonctionnent mieux.

Votre environnement de développement à la maison

Hugo est écrit en Go et supporte de nombreuses plateformes. Pour voir toutes les versions, cliquez ici.

Pour les utilisateurs de macOS avec HomeBrew, l’installation peut être effectuée comme suit:

mise à jour et installation du brassage hugo

Plus d'informations sur l'installation pour Mac OSX et Windows

Une fois Hugo installé, nous pouvons tester l’installation en exécutant hugo aide dans l'invite de commande ou hugo version

Faire votre premier site statique avec Hugo

Maintenant que Hugo est installé, nous pouvons commencer à créer le site Web. Exécutez la commande suivante en remplaçant "your-sitename-here" par votre nom de projet:

$ hugo nouveau site votre-site-ici

Cela créera un échafaudage pour votre site que vous pourrez visualiser dans votre viseur.

ou dans votre terminal via le arbre commander

Hugo a créé 5 sous-répertoires et 1 fichier, qu'il utilise pour créer le site Web final, voici ce qu'ils signifient tous:

archétypes: Ici, nous définissons ce que notre contenu est, nous pouvons définir ici les balises ou les catégories par défaut et définir des types tels que post, tutoriel ou produit
config.toml: la configuration principale est ici, nous pouvons définir tous les titres de sites Web, la langue, les URL, etc. ici
contenu: les pages de contenu du site sont stockées ici, les sous-répertoires sont utilisés pour les sections afin d’aider à organiser le contenu, créer un contenu / produits pour le contenu de vos produits par exemple
Les données: Les données de site telles que les configurations de localisation vont ici
mises en page: dispositions pour la bibliothèque Go html / template utilisée par Hugo, allez ici
statique: Tous les fichiers statiques ici seront compilés dans le site Web final, la liberté totale est autorisée afin que vous puissiez servir n'importe quel fichier css, js ou image par exemple..
thèmes: Créez de nouveaux thèmes ou clonez des thèmes à partir de github dans ce répertoire pour les utiliser avec votre site..

"Bonjour le monde" dans Hugo

Nous devons ajouter un article pour voir le site que nous venons de créer. Pour ce faire, utilisez la commande suivante:

$ hugo new post / first-post.md

Maintenant, éditez le fichier dans content / post / first-post.md, il contiendra quelque chose de similaire au suivant par défaut:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" titre = "premier message" +++

Matière avant

Le contenu à l'intérieur +++ est la configuration TOML pour le post. Cette configuration s'appelle matière première. Il vous permet de définir la post-configuration avec son contenu. Par défaut, chaque publication aura les propriétés de configuration indiquées ci-dessus.

Ajoutez du texte après le +++ainsi:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "premier message" +++ Bonjour tout le monde!

Serving Data et Live Reload

Pour que nous puissions voir la fonctionnalité de rechargement en direct intégrée à Hugo, apportons quelques modifications au site et voyons ce qui se passe..

Commencez par démarrer le serveur en exécutant

serveur $ hugo

Maintenant, si vous apportez des modifications à votre fichier, vous verrez Hugo recharger instantanément.

Votre site Web sera disponible à l'adresse http: // localhost: 1313 mais attendez - vous ne verrez toujours qu'un page blanche vierge à ce stade, car nous n'avons pas défini de thème!

Ajouter un thème

Hugo a une bibliothèque de thèmes très robuste et polyvalente car il utilise Go html / template bibliothèque. Les thèmes sont faciles à utiliser, l’installation se fait simplement en clonant le référentiel d’un thème dans le des thèmes répertoire pour votre site Hugo.

Hugo ne vient pas avec un thème par défaut, donc vous doit mettre un.

Il y a une multitude de thèmes open source parmi lesquels choisir.

Ajoutons des tonnes de thèmes à notre site pour pouvoir jouer avec tous et voir ce que nous aimons. Faites-le en lançant ce qui suit dans notre répertoire Hugo:

$ git clone --recursive https://github.com/spf13/hugoThemes.git themes Clonage en «thèmes»… à distance: Comptage d'objets: 880, terminé. remote: Compression d'objets: 100% (5/5), c'est fait. à distance: Total 880 (delta 1), réutilisé 0 (delta 0), paquet réutilisé 875 Réception d'objets: 100% (880/880), 669,20 Ko | 288.00 KiB / s, c'est fait. Résolution des deltas: 100% (506/506), terminé. Vérification de la connectivité… terminée.

Vous verrez maintenant tout un tas de thèmes clonés sur votre site. Il y en a beaucoup, vous aurez donc le temps de faire une pause pendant que ça clone…

Utiliser un thème

Pour utiliser un thème, il suffit de commencer Hugo avec le -t ou --thème paramètre comme si

$ hugo -t ThemeName

Ou vous pouvez ajouter à votre config.toml :

thème: "Nom du thème"

le ThemeName doit correspondre au nom du répertoire à l'intérieur / thèmes.

Lorsque vous avez choisi un nom de thème dans le répertoire, démarrez votre serveur avec hugo server --theme = Nom du thème et jetez un oeil sur http: // localhost: 1313

Voici quelques exemples de certains des thèmes que nous avons clonés et que j'ai utilisés mendier, croustillant etcactus regardez autour de vous, il y a tellement de choix!

Donc, vous avez maintenant généré un site Web avec un bonjour post du monde, que pouvons-nous faire d'autre?

Construire un blog

Faire un blog de base est très facile à faire avec Hugo. Tout d’abord, vous devrez définir un archétype pour la publication par défaut. Créez donc un nouveau fichier dans archetypes / default.md et ajoutez ce qui suit comme matière avant:

+++ tags = ["soudage", "travail du métal"] categories = ["posts"] +++

Ici, nous définissons des balises par défaut. Pour un blog sur le soudage, nous pouvons être sûrs de vouloir ces balises sur tous nos posts, et nous créons une catégorie appelée posts juste pour que nous ayons un défaut lorsque nous créons un post..

Maintenant, ajoutez votre premier message via le terminal comme suit:

$ hugo new post / tig-welding-a-bike-frame.md

Cela créera une publication avec l'archétype que vous avez défini auparavant, vous pouvez maintenant l'ouvrir dans un éditeur de texte et commencer à écrire au format Markdown.!

Ajoutons quelques articles supplémentaires:

$ hugo new post / soudage-a-roll-cage.md

Encore une fois, pour ajouter du contenu, il suffit d’ouvrir le fichier créé par Hugo et d’ajouter du contenu à la fin du fichier après l’avant-propos.

Construire une galerie de photos

Pour construire une galerie de photos avec Hugo, nous allons utiliser l'excellent outil hugo-galerie disponible sur GitHub.

Son utilisation est comme telle:

hugo-galerie [BaseUrl]</code></p><p>le <code>hugo-galerie</code> L'outil créera un nouveau répertoire de messages contenant un fichier de démarques pour chaque image du répertoire source, permettant ainsi la présentation d'un diaporama. Il lira tous les fichiers de la <code>Chemin source</code> répertoire et enregistrez-les dans le répertoire statique du site Hugo. <br></p><p>Il créera un nouveau répertoire à l'intérieur du répertoire de contenu en fonction de la <code>Titre</code> fourni par exemple <code>contenu / soudure</code></p><p>Par exemple: </p><pre>$ hugo-gallery statique / images / soudage-photos soudure "Photos de mes compétences en soudage insensé"</pre><p>Visite <code>localhost: 1313 / soudure</code> voir le contenu.</p><h2>Déploiement</h2><p>Hugo dispose de plusieurs outils de déploiement, tels que hugomac, qui est une application de barre de menu OSX permettant à l'utilisateur de publier facilement sur un hébergement EC2. Aucune ligne de commande nécessaire.</p><p>Hugodeploy fournit également une configuration SFTP à déployer, ou vous pouvez simplement utiliser les déploiements automatisés livrés avec Hugo..</p><h2>Conclusion</h2><p>Les générateurs de sites statiques existent depuis un certain temps, et Hugo s’appuie vraiment sur les outils permettant de rapidement et facilement supprimer des sites, voire de migrer un site existant de WordPress vers Hugo. Hugo dispose de nombreux outils, y compris des éditeurs frontaux, consultez-les.</p><p>À l'avenir, il sera agréable de voir plus de modules pour Hugo offrant une assistance pour des éléments tels qu'un formulaire de contact et une assistance pour la galerie, ou des publications connexes, par exemple.. </p><p>La feuille de route Hugo contient de nombreuses idées intéressantes telles que le redimensionnement d'image dynamique, la prise en charge de l'importation de rsync et d'images auprès de fournisseurs d'hébergement et l'hébergement plus facile avec l'intégration AWS EC2 et GitHub..</p><p>Si vous n’utilisez pas encore Hugo, revenez sur le projet à mesure qu’il se développe.!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/crafts/make-cute-origami-bunny-decorations-for-easter.html">Faire de jolies décorations de lapin en origami pour Pâques</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/make-cute-origami-bunny-decorations-for-easter_41.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/crafts/make-copper-and-pearl-earrings-for-valentines-day.html">Boucles d'oreilles en cuivre et perles pour la Saint-Valentin</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/make-copper-and-pearl-earrings-for-valentines-day_13.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Chercher..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>