Les sites Web statiques sont faciles à créer et extrêmement rapides à utiliser. Si vous apprenez à utiliser Hugo, vous pouvez générer des sites Web statiques basés sur des thèmes sous Linux. Créer des sites Web est à nouveau amusant!
Un site statique est un site qui ne crée ni ne modifie de pages Web à la volée. Il n'y a pas de base de données d'arrière-plan, de traitement du commerce électronique ou PHP. Toutes les pages Web sont entièrement pré-construites et peuvent être servies aux visiteurs très rapidement.
Mais cela ne veut pas dire qu’un site statique doit être ennuyeux. Ils peuvent utiliser tout ce que fournit HTML, plus feuilles de style en cascade (CSS), et JavaScript. Ils peuvent également facilement faire glisser des éléments tels que des carrousels d'images et des pages Web sur des images d'arrière-plan.
Le générateur de site Hugo fonctionne avec un modèle et tout contenu que vous avez créé pour générer un site Web terminé. Vous pouvez ensuite le placer sur une plateforme d'hébergement et avoir immédiatement un site Web en direct.
Hugo utilise réduction pour les pages et les entrées de blog que vous créez. Markdown est à peu près le langage de balisage le plus simple qui soit, ce qui simplifie la maintenance de votre site.
Les fichiers de configuration d'Hugo sont dans Langage évident et minimal de Tom (TOML) et YAML Ain’'t Markup Language (YAML), qui sont tout aussi faciles. Un autre avantage est qu'Hugo est incroyablement rapide – certains sites se chargent en moins d'une seconde. Il propose de nombreux modèles parmi lesquels vous pouvez choisir, et d’autres sont ajoutés en permanence, ce qui facilite la mise en route. Choisissez simplement un modèle et ajoutez du contenu qui en fait le vôtre.
Hugo agit également comme un petit serveur Web directement sur votre ordinateur. Vous pouvez voir une version en direct de votre site Web pendant que vous le concevez et le créez, et chaque fois que vous ajoutez un nouveau message. Il se met également à jour automatiquement chaque fois que vous «enregistrez» dans l'éditeur, afin que vous puissiez voir immédiatement l'effet de vos modifications dans votre navigateur.
Quand il s'agit d'héberger votre site Web statique, vous avez l'embarras du choix. La plupart des entreprises offrir un hébergement gratuit pour un usage personnel ou open source. Bien sûr, vous pouvez également choisir une société d'hébergement Web régulière, comme l'une des suivantes:
EN RELATION: Comment héberger un site Web statique gratuitement sur la plate-forme d'hébergement Firebase de Google
Avec Hugo, vous devez avoir installé Git. Git était déjà installé sur Fedora 32 et Manjaro 20.0.1. Sur Ubuntu 20.04 (Focal Fossa), il a été ajouté automatiquement en tant que dépendant d'Hugo.
Pour installer Hugo sur Ubuntu, utilisez cette commande:
sudo apt-get installer hugo
Sur Fedora, vous devez taper:
sudo dnf installer hugo
La commande pour Manjaro est:
sudo pacman -Syu hugo
Lorsque nous demandons à Hugo de créer un nouveau site, cela nous crée un ensemble de répertoires. Ceux-ci contiendront les différents éléments de notre site Web. Cependant, ce n'est pas le site Web final qui sera téléchargé sur votre plate-forme d'hébergement. Ces répertoires contiendront le thème, les fichiers de configuration, le contenu et les images qu'Hugo utilisera comme entrée lorsque nous lui demanderons de créer le site Web actuel.
C’est comme la différence entre le code source et un programme compilé. Le code source est ce que le compilateur utilise pour générer le produit final. De même, Hugo prend le contenu de ces répertoires et génère un site Web fonctionnel.
La commande que nous allons exécuter créera un répertoire portant le même nom que le site que vous souhaitez créer. Ce répertoire sera créé dans le répertoire dans lequel vous exécutez la commande.
Alors, déplacez-vous vers le répertoire dans lequel vous souhaitez que votre site Web soit créé. Nous utilisons notre répertoire personnel, nous tapons donc ce qui suit:
hugo nouveau site geek-demo
Cela crée un répertoire «geek-demo». Nous tapons ce qui suit pour basculer dans ce répertoire et exécuter ls:
cd geek-demo /
ls
Nous voyons le fichier de configuration «config.toml» et les répertoires qui ont été créés. Cependant, ils sont pratiquement vides, car il ne s'agit que de l'échafaudage du site Web.
Nous devons ajouter un thème pour qu'Hugo sache à quoi nous voulons que le site fini ressemble. Pour ce faire, nous devons initialiser Git. Dans le dossier racine de votre site (celui qui contient le fichier «config.toml»), exécutez cette commande:
git init
Il y a des centaines de thèmes vous pouvez choisir, et chacun a une page Web qui le décrit. Vous pouvez exécuter une démo d'un thème et découvrir la commande pour le télécharger. Nous utiliserons celui appelé Meghna.
Pour intégrer ce thème dans notre site Web, nous devons basculer vers notre dossier «Thèmes» et exécuter le clone git commander:
thèmes cd
git clone https://github.com/themefisher/meghna-hugo.git
Git affiche certains messages au fur et à mesure de sa progression. Quand c'est fini, nous utilisons ls pour voir le répertoire contenant le thème:
ls
Les thèmes Hugo incluent un site Web d'exemple de travail. Vous devez copier ce site par défaut dans les répertoires de votre site Web.
Tout d'abord, revenez au répertoire racine de votre site Web. Nous utilisons le -r (récursif) cp option pour inclure les sous-répertoires, et le -F (force) pour écraser tous les fichiers existants:
cd ..
thèmes cp / meghna-hugo / exampleSite / * -rf
Nous avons suffisamment fait pour lancer un nouveau site Web localement. Il contiendra toujours le texte et les images de l'espace réservé, mais ce ne sont que des modifications cosmétiques. Vérifions d'abord que les éléments techniques fonctionnent.
Nous disons à Hugo d'exécuter son serveur Web et d'utiliser le -RÉ (brouillon) pour vous assurer que tous les fichiers susceptibles d'être marqués avec "brouillon" sont inclus dans le site Web:
serveur hugo -D
L'image ci-dessous montre la sortie de notre hugo commander.
On nous dit qu'Hugo a construit le site en 142 millisecondes (nous avons dit que c'était rapide, non?). Il nous dit également d'appuyer sur Ctrl + C pour arrêter le serveur, mais laissez-le fonctionner pour le moment.
Ouvrez votre navigateur et dirigez-vous vers hôte local: 1313 pour voir votre site Web.
Pendant qu'il fonctionne comme ça, Hugo sert les pages Web de mémoire. Il n’a pas créé le site Web sur le disque dur, mais plutôt une copie de travail dans la RAM. Cependant, il surveille les fichiers et les images sur le disque dur. Si l'un d'entre eux est modifié, cela actualise le site dans votre navigateur. Vous n'avez même pas besoin d'appuyer sur Ctrl + F5.
Ouvrez une autre fenêtre de terminal et accédez au répertoire racine de votre site Web. Ouvrez le fichier «config.toml» dans un éditeur. Remplacez le "baseURL" par le domaine sur lequel votre site Web sera hébergé et remplacez le "titre" par le nom de votre site Web. Enregistrez vos modifications, mais laissez l'éditeur ouvert.
Hugo détecte que des modifications ont été apportées au fichier «config.toml», il les lit donc, reconstruit le site et actualise le navigateur.
Vous devriez maintenant voir le nom que vous avez choisi pour votre site dans l'onglet du navigateur. L'obtention d'un retour visuel immédiat sur les modifications enregistrées accélère considérablement le processus de personnalisation d'un site Web.
Tous les thèmes sont différents, mais nous avons trouvé ceux que nous avions l'habitude d'être assez simples à suivre. Les différentes sections du site Web ont des noms évidents, tout comme les paramètres de chaque section, de sorte que ce que vous modifiez est toujours évident.
Et, encore une fois, dès que vous enregistrez une modification, vous voyez ce que vous avez modifié dans votre navigateur. Si vous ne l'aimez pas, inversez simplement la modification et réenregistrez.
Les différents fichiers de configuration qui contrôlent le site Web sont chacun dédiés à un seul travail et étiquetés de manière significative. Les localiser n’est pas difficile, car il n’y a pas trop d’endroits où ils peuvent se trouver dans l’annuaire. En règle générale, ils se trouvent dans le dossier "Données".
Étant donné que nous utilisons un modèle bilingue, nos fichiers de configuration en anglais se trouvent dans le sous-répertoire «En».
Si vous ouvrez le fichier Data> En> banner.yml dans un éditeur, vous verrez l'ensemble des paramètres qui régissent la zone de bannière du site Web.
Lorsque vous modifiez les paramètres «Titre» et «Contenu», vous modifiez le texte de la page de garde.
Nous avons également modifié le paramètre "Libellé". Le texte du bouton indique "En savoir plus". Pour votre site, vous souhaiterez probablement également modifier l'image.
Dès que vous enregistrez vos modifications, vous les verrez dans votre navigateur.
Vous pouvez modifier tous les autres éléments de la même manière. Recherchez simplement le fichier de configuration approprié et modifiez les paramètres et le texte en fonction de vos besoins.
Vous souhaiterez également modifier les images. L'image par défaut sera référencée dans le fichier de configuration. Vous pouvez facilement trouver et jeter un œil à l'image originale pour voir quelles sont ses dimensions.
Les images sont placées dans le répertoire «Static> Images» avec des sous-répertoires pour les différentes sections du site. Placez les favicons et logos directement dans le répertoire «Static> Images».
Jusqu'à présent, nous avons cherché à changer ce qui existe déjà. Mais comment ajouter un nouveau billet de blog? Hugo utilise un concept appelé «Archétypes» pour créer du nouveau contenu. Si nous ne créons pas d'archétype pour nos entrées de blog, un fichier par défaut sera créé pour nous chaque fois que nous demandons à Hugo de créer une nouvelle entrée de blog.
C'est bien, mais avec un archétype, nous pouvons nous épargner des efforts et nous assurer que le plus grand nombre possible de documents préliminaires est entré pour nous à l'avance.
Dans ce thème, les entrées de blog se trouvent dans Contenu> Anglais> Blog. Si nous ouvrons une entrée de blog existante dans un éditeur – comme «simple-blog-post-1.md» – nous pouvons voir le début.
Nous devons copier cette section, éditer les entrées actuelles afin qu'elles puissent être utilisées comme modèle d'archétype, puis l'enregistrer dans le dossier «Archetypes». Si nous l'appelons "blog.md", il sera automatiquement utilisé comme modèle pour les nouvelles entrées de blog.
Dans gedit, nous pouvons le faire comme suit:
gedit content / anglais / blog / simple-blog-post-1.md
Mettez en surbrillance la section supérieure, y compris les deux lignes en pointillés, puis appuyez sur Ctrl + C pour la copier. Appuyez sur Ctrl + N pour démarrer un nouveau fichier, puis sur Ctrl + V pour coller ce que vous avez copié.
Maintenant, apportez les modifications suivantes et assurez-vous de laisser un espace après les deux points (:) dans chaque ligne:
"{{replace .Name" - "" "| title}}" (incluez les guillemets). Un titre pour chaque nouveau billet de blog sera inséré automatiquement. Il est formé à partir du nom de fichier que vous transmettez au hugo nouveau commande, comme nous le verrons.{{ .Date }}. La date et l'heure de création du blog seront automatiquement saisies.""), vous pouvez taper une description pour chaque nouveau blog sans avoir à modifier l'ancien texte.Enregistrez ce nouveau fichier sous «archétypes / blog.md», puis fermez gedit. Hugo utilisera désormais ce nouvel archétype chaque fois que vous voudrez créer une nouvelle entrée de blog.
Notez que notre fichier doit avoir une extension ".md" car nous utiliserons Markdown pour écrire notre entrée de blog:
hugo nouveau blog / first-new-blog-post-on-this-site.md
Maintenant, nous voulons ouvrir notre nouvelle entrée de blog dans un éditeur:
gedit content / anglais / blog / first-new-blog-post-on-this-site.md
Notre nouvel article de blog s'ouvre dans gedit.
Tous les éléments suivants de l’introduction ont été ajoutés pour nous:
Rédigez le blog en utilisant le démarquage et utilisez le balisage standard pour les titres, le gras, l'italique, les images, les liens, etc. Chaque fois que vous enregistrez votre fichier, Hugo reconstruit le site Web et le met à jour dans votre navigateur.
L'image ci-dessous montre comment notre nouvelle entrée de blog apparaît sur la page d'accueil.
L'image ci-dessous montre à quoi ressemble la nouvelle entrée de blog sur sa propre page.
Une fois que vous avez fini de rédiger votre article de blog, enregistrez les modifications, puis fermez l'éditeur. Vous pouvez également fermer votre navigateur car nous allons arrêter le serveur Hugo.
Dans la fenêtre du terminal dans laquelle s'exécute le serveur Hugo, appuyez sur Ctrl + C.
Dans le répertoire racine de votre site Web, exécutez la commande suivante pour créer votre site Web:
hugo
Hugo construit le site Web et répertorie le nombre de pages et d'autres composants qu'il a créés. Il a fallu 134 millisecondes pour créer le nôtre.
Hugo crée un nouveau répertoire appelé «Public» dans le répertoire racine de votre site Web. Dans le répertoire "Public", vous trouverez tous les fichiers dont vous avez besoin pour transférer vers votre plateforme d'hébergement.
Notez que vous devez télécharger les fichiers et répertoires dans le répertoire «Public» sur votre plate-forme d'hébergement, pas le répertoire «Public» lui-même.
Chaque thème nécessitera un peu d’exploration pour déterminer comment vous pouvez le faire ressembler à vous, mais c’est la partie amusante! Étant donné la capacité d'Hugo à rendre les modifications immédiatement dans une fenêtre de navigateur, rien ne prend trop de temps.
Vous constaterez probablement que l’écriture de votre texte et la recherche et le découpage des images sont les parties du processus qui prennent le plus de temps.
Le Hugo le site de documentation est également utile, mais vaste. Espérons que cette procédure de base suffira à vous aider à démarrer.
Si vous utilisez Git et Github, GitLab, ou BitBucket, des intégrations sont également disponibles pour ces plates-formes. Ils surveillent votre référentiel Hugo distant et reconstruisent votre site en direct chaque fois que vous y apportez des modifications.
