Premiers pas avec Hugo: comment créer un site Web simple

Hugo est un générateur de site statique qui vous permet de créer un site Web avec peu ou pas d'expérience en codage. Vous pouvez utiliser des thèmes prédéfinis comme base pour la conception de votre site Web. Cela vous permet de vous concentrer davantage sur le remplissage du site avec votre contenu.

Parce que Hugo est principalement utilisé pour les sites Web statiques, il est parfait pour créer des blogs, des portefeuilles ou des sites de documentation.

Vous pouvez facilement configurer et créer un site Web Hugo à l'aide d'un thème Hugo prédéfini. En quelques étapes courtes, vous pouvez ensuite ajouter du contenu et des pages à votre site Web à l'aide de Markdown.

Comment installer Hugo

Vous devez installer le générateur de site statique Hugo pour créer, exécuter et tester un site Web Hugo. Selon le Documentation Hugo, vous pouvez l'installer de plusieurs façons. Vous trouverez ci-dessous certaines des options.

Mac

Vous pouvez installer Hugo en utilisant Homebrew.

1. Ouvrez votre terminal macOS.
instagram viewer
2. Installez le gestionnaire de paquets Homebrew.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Installez Hugo.

   brasser installer Hugo

les fenêtres

Vous aurez besoin d'un gestionnaire de packages équivalent pour Windows. Par exemple, vous pouvez utiliser le Gestionnaire de paquets Scoop.

1. Ouvrez Windows PowerShell, qui devrait déjà faire partie de votre système d'exploitation Windows.
2. Si vous installez Scoop pour la première fois, vous devrez peut-être définir votre politique d'exécution.

   Régler-ExecutionPolicy RemoteSigned -portée Utilisateur actuel

3. Installer Scoop :

   ex (Nouveau-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Installez Hugo :

   scoop installer Hugo

Comment créer un projet Hugo

Pour créer un nouveau projet Hugo, vous devrez utiliser le nouveau site hugo commande.

1. Ouvrez votre terminal ou invite de commande. Accédez au dossier dans lequel vous souhaitez créer votre projet.
2. Exécutez le nouveau site hugo commande:

   Hugo Nouveau site Nouveau-hugo-site web

3. Accédez à l'emplacement de votre projet Hugo dans votre explorateur de fichiers.
4. Ouvrez le dossier du projet. Vous verrez que votre nouveau site Web Hugo possède la structure de fichiers et de dossiers requise pour que votre site Web fonctionne.

Comment ajouter un thème

Pour le moment, votre projet ne contient que les principaux dossiers de base du projet Hugo. L'exécution de votre site Web localement à ce stade n'afficherait qu'un écran vide. Étant donné que vous n'avez pas encore configuré de conception HTML, CSS ou d'interface utilisateur pour votre site Web, vous devrez les ajouter.

Hugo fournit déjà une bibliothèque de Thèmes Hugo créé par les développeurs.

1. Sélectionnez un thème que vous aimez. Chaque thème peut avoir des instructions de configuration légèrement différentes, affichées sur leur page d'aperçu respective. Ce didacticiel utilisera Thème du conte par exemple.
2. Accédez au dossier racine de votre projet dans un terminal ou une ligne de commande.

   CD Nouveau-hugo-site web

3. Exécutez la commande pour ajouter le thème Tale. Vous pouvez ajouter le thème en tant que sous-module, ce qui créera un nouveau dossier appelé conte à l'intérieur de thème dossier.

   git init
   sous-module git ajouter https ://github.com/EmielH/tale-hugo.git themes/tale

   Vous pouvez également cloner le référentiel de contes GitHub dans le dossier des thèmes de votre projet.

   git cloner https://github.com/EmielH/tale-hugo.git themes/tale

4. Accédez à votre dossier de projet. Clique sur le thèmes dossier pour l'ouvrir. Quelle que soit la commande que vous avez utilisée, il y aura un nouveau conte dossier qui stocke le thème nouvellement téléchargé.
5. Dans le config.toml fichier, ajoutez le thème du conte dans le cadre de la configuration. Cela indiquera à Hugo d'utiliser les styles HTML, CSS et autres inclus dans le thème Tale.

   thème = "conte"

Comment ajouter des pages à votre site Web

Vous pouvez rédiger votre contenu dans n'importe quel format accepté par Hugo. Hugo convertira alors automatiquement vos fichiers en fichiers HTML lorsqu'il les servira à l'utilisateur. Cela accélère à la fois la construction et le déploiement. Cet exemple utilisera Markdown, un langage simple en texte brut, comme format de votre contenu.

Vous pouvez écrire Markdown principalement en anglais simple avec quelques symboles supplémentaires pour spécifier n'importe quel formatage. Cela inclut l'ajout de symboles pour représenter les titres, les mots en gras ou toute autre mise en forme de base dont vous pourriez avoir besoin.

Pour ajouter une nouvelle sous-page ou publier sur votre site Web, vous devrez ajouter un nouveau fichier Markdown dans le teneur dossier. Chaque publication ou page aura son propre fichier Markdown qui lui est associé.

1. Ouvrez le teneur dossier dans votre projet Hugo. Créez un nouveau fichier Markdown appelé myFirstPost.md.
2. Ouvrez le fichier dans n'importe quel éditeur de texte tel que Notepad++ ou Visual Studio Code.
3. En haut du fichier, ajoutez des métadonnées. Cela contiendra des informations importantes sur le poste. Le thème que vous utilisez formatera ces informations d'une certaine manière sur la page.

   
   auteur: "votre nom"
   Titre: "Mon premier message"
   Date: "2022-05-17"
   

4. Après avoir ajouté les métadonnées, vous pouvez commencer à ajouter votre contenu à l'aide de Markdown.

   Cette est mon tout premier post sur mon site Hugo !
   Le thème Hugo utilisé pourcette le site s'appelle Tale.
   Ce est très simple à installer et configurer.
   # sous-titre
   Cette est un certain contenu.
   # Un autre sous-titre
   Cette est plus de contenu.

5. N'hésitez pas à ajouter plus de fichiers de démarquage pour ajouter plus de pages à votre site Web.

Comment exécuter et tester votre site Web Hugo localement

Pour gérer votre site Web, utilisez le hugo servir commande.

1. Ouvrez un terminal ou une ligne de commande.
2. Accédez au dossier racine de votre projet Hugo.
3. Exécutez le hugo servir commande:

   hugo servir

4. Attendez que le site Web termine le processus de démarrage. Une fois cette opération terminée, le terminal imprimera un message indiquant à partir de quelle adresse locale vous pouvez accéder au site Web. Habituellement, c'est http://localhost: 1313/.
5. Ouvrez un navigateur Web et entrez http://localhost: 1313/, ou selon l'adresse que le terminal vous a donnée. Vous verrez la page principale de votre site Hugo.
6. Sur la page, vous trouverez une liste de messages pour chaque fichier de démarquage que vous avez. Dans ce cas, il y a deux fichiers Markdown remplis de contenu. Cela inclut la page myFirstPost.md que vous avez créée précédemment. Il comprend également un nouveau message appelé bananaCakeRecipe.md.
7. Cliquez sur le lien du titre sur l'un des aperçus. Cela vous amènera à la page complète de ce message particulier.

Hébergement de votre site Hugo

La mise en place d'un site Web statique est simple et rapide avec Hugo. Vous pouvez utiliser et configurer des thèmes prédéfinis et exécuter votre site Web Hugo localement à des fins de test. Vous pouvez également ajouter des pages de contenu à votre site Web à l'aide de Markdown.

Une fois que vous avez créé votre site Web Hugo, vous pouvez commencer à en savoir plus sur la façon de l'héberger. Vous avez le choix entre de nombreuses options d'hébergement de sites Web gratuites, telles que Dropbox, Google Drive ou OneDrive.

Comment obtenir un hébergement de site Web gratuit avec Dropbox, Google Drive ou OneDrive

Lire la suite