Un générateur de site statique rapide et flexible écrit en Go
A Fast and Flexible Static Site Generator built with love by bep, spf13 and friends in Go.
Website | Forum | Documentation | Installation Guide | Contribution Guide | Twitter
Hugo est un générateur de site Web HTML et CSS statique écrit en Go . Il est optimisé pour la vitesse, la facilité d'utilisation et la configurabilité. Hugo prend un répertoire avec du contenu et des modèles et les rend dans un site Web HTML complet.
Hugo s'appuie sur des fichiers Markdown avec une interface pour les métadonnées, et vous pouvez exécuter Hugo à partir de n'importe quel répertoire. Cela fonctionne bien pour les hôtes partagés et autres systèmes sur lesquels vous n'avez pas de compte privilégié.
Hugo rend un site Web typique de taille moyenne en une fraction de seconde. Une bonne règle de base est que chaque élément de contenu est rendu en environ 1 milliseconde.
Hugo est conçu pour fonctionner correctement pour tout type de site Web, y compris les blogs, les tumbles et les documents.
Architectures prises en charge
Actuellement, nous fournissons des binaires Hugo pré-construits pour Windows, Linux, FreeBSD, NetBSD, DragonFly BSD, Open BSD, macOS (Darwin) et Android pour les architectures x64, i386 et ARM.
Hugo peut également être compilé à partir des sources partout où la chaîne d'outils du compilateur Go peut s'exécuter, par exemple pour d'autres systèmes d'exploitation, y compris Plan 9 et Solaris.
Une documentation complète est disponible sur Hugo Documentation .
Si vous souhaitez utiliser Hugo comme générateur de site, installez simplement les binaires Hugo. Les binaires Hugo n'ont pas de dépendances externes.
Pour contribuer au code source ou à la documentation de Hugo, vous devez créer un fork du projet Hugo GitHub et le cloner sur votre machine locale.
Enfin, vous pouvez installer le code source de Hugo avec go, créer les binaires vous-même et exécuter Hugo de cette façon. Construire les binaires est une tâche facile pour un gogetter expérimenté .
Utilisez les instructions d'installation de la documentation Hugo
Pour un guide complet sur la contribution à Hugo, consultez le Guide de contribution .
Nous acceptons les contributions à Hugo de tout type, y compris la documentation, les thèmes, l'organisation, les didacticiels, les articles de blog, les rapports de bogues, les problèmes, les demandes de fonctionnalités, les implémentations de fonctionnalités, les demandes d'extraction, les réponses aux questions sur le forum, l'aide à la gestion des problèmes, etc.
La communauté Hugo et les mainteneurs sont très actifs et serviables, et le projet profite grandement de cette activité.
Nous avons un forum de discussion actif où les utilisateurs et les développeurs peuvent poser des questions. Veuillez ne pas utiliser l'outil de suivi des problèmes GitHub pour poser des questions.
Si vous pensez avoir trouvé un défaut dans Hugo ou dans sa documentation, utilisez le suivi des problèmes GitHub pour signaler le problème aux responsables de Hugo. Si vous n'êtes pas sûr qu'il s'agisse d'un bogue ou non, commencez par demander dans le forum de discussion . Lorsque vous signalez le problème, veuillez fournir la version d'Hugo utilisée ( hugo version).
Le projet Hugo accueille tous les contributeurs et contributions quel que soit leur niveau de compétence ou d'expérience. Si vous souhaitez contribuer au projet, nous vous aiderons avec votre contribution. Hugo est un projet très actif avec de nombreuses contributions quotidiennes.
Nous voulons créer le meilleur produit possible pour nos utilisateurs et la meilleure expérience de contribution pour nos développeurs, nous avons un ensemble de directives qui garantissent que toutes les contributions sont acceptables. Les lignes directrices ne sont pas conçues comme un filtre ou un obstacle à la participation. Si vous n'êtes pas familier avec le processus de contribution, l'équipe Hugo vous aidera et vous apprendra comment apporter votre contribution conformément aux directives.
Pour un guide complet sur la contribution du code à Hugo, consultez le Guide de contribution .
Thème que vous pouvez utiliser : https://github.com/halogenica/beautifulhugo
10 MARS 2018 • HUGO • 9 MIN • FRANK TAILLANDIER Source : https://jamstatic.fr/2018/03/10/mettre-en-place-son-premier-site-sous-hugo/#mettre-%C3%A0-jour-un-article
Pour créer un nouveau projet avec Hugo, Forestry propose un kit de démarrage en libre téléchargement. Que vous ayez déjà utilisé le générateur de site statique Hugo ou pas, ce kit est intéressant, car il propose une configuration complète et un workflow de développement moderne basé sur les outils de l’écosystème de npm. Chris Macrae nous montre comment s’en servir pour créer votre premier site en moins de 30 minutes.
Hugo, le générateur de site statique écrit en Go, a pris la communauté de vitesse. Il présente tous les avantages d’un générateur de site statique — 100% flexible, sécurisé et rapide — mais il vole également la vedette quand on compare ses performances avec celles de Jekyll. Le site de Forestry.io est d’ailleurs développé avec Hugo.
Nous allons voir comment configurer Hugo sur votre ordinateur, comment installer et personnaliser un thème, en ajoutant nos propres fichiers CSS et JavaScript.
Quelle différence avec le guide de démarrage rapide de la documentation d’Hugo ? Nous allons utiliser notre kit de démarrage régulièrement mis à jour qui ajoute un workflow de développement moderne à Hugo.
Sommaire
Pou commencer, clonez ou téléchargez notre kit de démarrage pour Hugo, et décompressez l’archive quelque part sur votre ordinateur. Vous avez aussi besoin de Node.js et d’NPM, il vous suffit de suivre les indications sur la page de téléchargement de Node si vous ne les avez pas déjà installés.
Vous bénéficiez ainsi automatiquement d’une structure de départ pour Hugo. Dans notre kit, elle est stockée dans le dossier hugo. À l’intérieur se trouvent divers dossiers qui abritent le contenu de votre site, les gabarits de page et les fichiers CSS, JS, images, etc. L’arborescence de la structure de base ressemble à ceci — j’ai laissé quelques fichiers et dossiers de côté de façon à ce que ce soit plus clair :
Pour démarrer le projet, ouvrez une fenêtre de terminal et positionnez-vous dans le dossier qui contient la structure de départ (hugo-boilerplate par défaut) :
cd chemin/vers/hugo-boilerplate/
Installez ensuite toutes les dépendances du projet en lançant :
npm install
Pour lancer le serveur de développement et ouvrir le site dans votre navigateur, lancez simplement :
npm start
Nous allons commencer par ajouter de nouveaux contenus au site. Pour ce faire, nous allons devoir mettre à jour le contenu présent dans le dossier hugo/content.
Commencer par mettre à jour l’exemple d’article fourni dans notre structure de départ. Ouvrez le fichier hugo/content/posts/example.md dans votre éditeur de texte. Il est composé d’un en-tête front matter avec un champ titre et d’un texte d’exemple au format markdown.
e>
Cet article n’a pas de date ! Essayez d’en définir une en ajoutant l’entrée suivante dans l’en-tête Front Matter de l’article:
date: "YYYY-MM-DDTHH:MM:SS-00:00"
Remplacez YYYY-MM-DDTHH:MM:SS-00:00 avec une date valide, comme… 2018-01-01T12:42:00-00:00. Si votre date se situe dans le futur, Hugo ne générera pas cet article en production.
Sauvegardez vos changements puis affichez l’article mis à jour dans votre navigateur à l’adresse http://localhost:3000/. La date affichée devant le titre de l’article devrait avoir été mise à jour.
Maintenant essayons de créer un nouvel article. Nous utiliserons pour cela la commande fournie avec Hugo pour générer un nouvel article. Dans notre projet, Hugo est déclaré comme une dépendance NPM, nous pouvons donc l’utiliser avec la commande :
npm run hugo -- --
Créez votre premier article en lançant :
npm run hugo -- new posts/mon-premier-article.md
Cela va créer un nouvel article au format markdown dans hugo/content/posts/mon-premier-article.md. Ouvrez ce fichier dans votre éditeur de texte favori.
Ce fichier comporte un en-tête Front Matter (des métadonnées structurées relatives à la page) dont on peut tirer parti dans les gabarits de page. Sous le front matter, nous pouvons ajouter du contenu au format markdown :
Ajoutez par exemple le contenu suivant dans le fichier et sauvegardez vos changements :
Vous pouvez voir l’article mis à jour dans votre navigateur à l’adresse http://localhost:3000/posts/mon-premier-article/.
Le thème Casper de @vjeantet
Nous allons utiliser le thème Casper de @vjeantet. Pour ce faire nous allons ajouter le thème dans le dossier hugo/themes, plus exactement dans le dossier hugo/themes/hugo-theme-casper/.
Clonez ou téléchargez le thème et décompressez l’archive dans hugo/themes/hugo-theme-casper/.
Ensuite, mettez à jour la configuration du site aves les options de configuration spécifiques au thème.
Ouvrez le fichier hugo/config.toml dans votre éditeur de texte favori et remplacer son contenu par celui-ci :
Reportez-vous à la documentation du thème pour prendre connaissance de toutes les options de configuration disponibles.
Pour finir, supprimez les exemples de gabarits de page fournis avec notre modèle de départ. Pour cela lancez la commande :
Regardez maintenant dans votre navigateur et vérifiez que votre site a bien été mis à jour !
Maintenant que nous avons mis en place un site fonctionnel avec un thème, vous avez probablement envie de le personnaliser.
Nous allons commencer par éditer les paramètres du site dans le fichier hugo/config.toml. Mettez à jour les valeurs suivantes comme bon vous semble :
title = "Hugo Boilerplate"
description = "Bien démarrer avec Hugo
metadescription = "Utilisé dans la balise meta 'description' pour l’accueil et les pages d’index, faute de quoi c'est l’entrée 'description' du front matter de la page qui sera utilisé"
author = "VOTRE_NOM"
Le thème Casper avec du contenu et les styles par défaut
Ajout d’une image de fond
Retournons maintenant voir notre site dans le navigateur. C’est déjà mieux, mais il y a encore du travail.
Maintenant que vous avez adapté le site pour le personnaliser en peu, nous allons nous attarder sur l’aspect le plus puissant d’Hugo et de ce kit de démarrage: un templating simple et puissant.
Nous venons d’ajouter le thème Casper au site, ce qui permet à Hugo d’utiliser tous les gabarits HTML présents dans le dossier hugo/themes/hugo-theme-casper/layouts/ lors de la génération du site.
Nous allons maintenant étendre le thème grâce à l’héritage de gabarits d’Hugo.
Tous les fichiers de gabarits présents dans le dossier hugo/layouts/ surchargeront n’importe quel gabarit du même nom présent dans le répertoire des gabarits du thème, nous permettant ainsi de personnaliser notre site sans toucher au thème d’origine.
À côté d’Hugo, ce kit de démarrage fourni un serveur de développement qui va post-traiter automatiquement les fichiers CSS et JS pour le navigateur. Tous les fichiers CSS, JS, images présents dans le dossier src/ seront traités automatiquement et déplacés dans le dossier hugo/static/.
Ajoutons-les à notre thème de manière à pouvoir le personnaliser comme nous voulons. Nous allons copier des fichiers de gabarits du thème et ajouter les fichiers CSS et JS personnalisés de notre kit dans ces gabarits.
Premièrement, nous allons copier le fichier partiel header.html du thème dans le dossier hugo/layouts/partials/ :
Ouvrez le fichier hugo/layouts/partials/header.html dans votre éditeur de texte et repérez les lignes suivantes :
Ajoutez en dessous la ligne suivante :
Ensuite, recopions le fichier partiel footer.html dans le dossier hugo/layouts/partials/ de manière à pouvoir ajouter notre fichier JS personnalisé :
Ouvrez maintenant le fichier hugo/layouts/partials/footer.html et repérez les lignes suivantes :
Ajoutez juste en dessous:
Maintenant tout notre code CSS et JS personnalisé sera utilisé sur le site.
Faisons un essai en augmentant la hauteur de l’en-tête principal. Ouvrez le fichier src/css/styles.css et ajoutez le code suivant à la fin du fichier :
Le résultat final
Admirez le résultat final dans votre navigateur !
Vous êtes maintenant prêt·e à commencer à créer un site statique avec Hugo !
Vous pouvez continuer à utiliser le thème Casper ou repartir du début en utilisant les modèles du répertoire hugo/layouts/.
Les fichiers des modèles de gabarits de page se trouvent dans le dépôt de notre kit de démarrage si vous souhaitez repartir de zéro.
Pour en apprendre un peu plus sur Hugo, reportez-vous aux sections suivantes de la documentation officielle :
Nous verrons dans un prochain article comment configurer le versionnement avec Git pour faciliter l’intégration continue et le déploiement chez différents hébergeurs avec Forestry, un CMS pour les sites statiques générés avec Hugo ou Jekyll.
Pour le moment votre nouveau site n’est pas très beau. Remédions à cela en ajoutant un thème issu de la galerie de thèmes de Hugo, développé par un des meilleurs contributeurs de la communauté.
Bien, ajoutons maintenant une image de fond pour la bannière d’en-tête. Dans le fichier hugo/config.toml, vous trouverez une section [params]. Modifiez le paramètre cover pour qu’il ait la valeur /img/darius-soodmand-116253.jpg, sauvegardez vos changements.
To verify your new install:
The above will create a new Hugo site in a folder named quickstart.
See themes.gohugo.io for a list of themes to consider. This quickstart uses the beautiful Ananke theme.
First, download the theme from GitHub and add it to your site’s themes directory:
Note for non-git users:
If you do not have git installed, you can download the archive of the latest version of this theme from: https://github.com/budparr/gohugo-theme-ananke/archive/master.zip
Extract that .zip file to get a “gohugo-theme-ananke-master” directory.
Rename that directory to “ananke”, and move it into the “themes/” directory.
Then, add the theme to the site configuration:
You can manually create content files (for example as content//.) and provide metadata in them, however you can use the new command to do a few things for you (like add title and date):
Edit the newly created content file if you want, it will start with something like this:
Now, start the Hugo server with drafts enabled:
Navigate to your new site at http://localhost:1313/.
Feel free to edit or add new content and simply refresh in browser to see changes quickly (You might need to force refresh in webbrowser, something like Ctrl-R usually works).
Your new site already looks great, but you will want to tweak it a little before you release it to the public.
Open up config.toml in a text editor:
Replace the title above with something more personal. Also, if you already have a domain ready, set the baseURL. Note that this value is not needed when running the local development server.
For theme specific configuration options, see the theme site.
For further theme customization, see Customize a Theme.
It is simple. Just call:
Output will be in ./public/ directory by default (-d/--destination flag to change it, or set publishdir in the config file).
(commandes et test par @Léolios)
Thème dispo : https://themes.gohugo.io/theme
