1. Qu'est-ce qu'Hugo ?
1.1 Introduction
Hugo est un générateur de sites Web statiques écrit en langage Go. Il peut aider les utilisateurs à créer rapidement des sites Web statiques hautes performances, notamment des blogs, des documents et des sites Web personnels. Comparé à d'autres générateurs de sites Web statiques, Hugo se caractérise par une vitesse rapide, une facilité d'utilisation et une forte évolutivité. Hugo utilise des langages de balisage simples tels que Markdown et HTML pour créer du contenu, et utilise le moteur de modèles du langage Go pour personnaliser les thèmes et les mises en page. Les avantages de Hugo incluent également sa nature multiplateforme, sa faible consommation de ressources et sa facilité de maintenance.
Hugo est l’un des générateurs de sites Web statiques les plus populaires en raison de sa vitesse de compilation et de génération rapide.
Site officiel de HugoSite
Internet chinois de Hugo
Capture d'écran du site Web chinois
1.2. Comparaison des cadres
| cadre | dynamique statique | hébergement | sécurité | Vitesse d'accès | Édition en ligne | Réduction |
|---|---|---|---|---|---|---|
| Hugo | statique | Simple | très sûr | très vite | Ne peut pas | soutien |
| hexo | statique | Simple | très sûr | rapide | Ne peut pas | soutien |
| WordPress | dynamique | complexe | Nécessite des mises à jour fréquentes | rapide | Peut | Prise en charge des plug-ins |
Langages de programmation, installation et utilisation
| cadre | langage de programmation | support référencement | brancher | thème | Vitesse de génération des pages | Installation et utilisation |
|---|---|---|---|---|---|---|
| Hugo | Aller | amical | pas de support | beaucoup | très vite | Simple |
| hexo | NoeudJS | amical | beaucoup de | Beaucoup | rapide | un peu plus compliqué |
| WordPress | PHP | hostile | soutien | Beaucoup | pas de support | complexe |
2. Installez Hugo
2.1. Environnement MAC
Pour installer Hugo, vous devez d'abord installer Homebrew. Homebrew est un gestionnaire de packages sur MacOS et peut être utilisé pour installer d'autres logiciels.
- Étape 1 : L'installation de Homebrew peut être complétée en exécutant la commande suivante dans le terminal :
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Cette commande téléchargera automatiquement Homebrew et l'installera sur le système. Pendant le processus d'installation, vous pouvez être invité à saisir le mot de passe de l'administrateur et vous devez saisir le mot de passe de l'utilisateur actuel du système. Une fois l'installation terminée, vous pouvez vérifier si l'installation a réussi en entrant la commande Brew -v dans le terminal. Si l'installation réussit, les informations sur la version actuelle de Homebrew seront affichées.
- Étape 2 : Installez Hugo. Exécutez la commande suivante dans le terminal pour terminer :
# 查看 Homebrew 的版本
brew --version
# 安装 Hugo
brew install hugo
# 查看 Hugo 的版本
hugo version
3. Le premier projet
3.1. Créer un espace de travail
Créez d'abord un nouveau dossier, par exemple : csdn_hugo pour stocker le projet Hugo pendant notre processus d'apprentissage, et accédez à ce dossier via le terminal. L'exemple est le suivant :
# 切换到工作空间
cd /Users/woniu/Documents/csdn_hugo
3.2. Créer un projet Hugo
# 创建一个新的 Hugo 项目，项目名称：hugo_hello_world
hugo new site hugo_hello_world
3.3. Outils de développement
- Étape 1 : Nous utilisons l'éditeur VS Code comme outil de développement d'Hugo.
- Étape 2 : Sélectionnez le dossier du projet hugo_hello_world que nous venons de créer via la commande terminal, comme indiqué ci-dessous :
3.4. Aperçu local
# 启动本地项目
hugo server
# 浏览器输入 http://localhost:1313 访问地址
Parce que nous sommes un nouveau projet, nous serons informés qu'il n'y a pas de page, comme le montre la figure ci-dessous :
4. Installez le thème
4.1. Thème officiel de Hugo
4.2. Télécharger le thème
Nous choisissons le thème que nous aimons sur le site Web officiel du thème et cliquons sur la page de détails pour le télécharger. Voici un exemple aléatoire à télécharger, comme indiqué ci-dessous :
En cliquant sur le bouton de téléchargement, vous accéderez au site Web GitHub. Continuons à cliquer pour télécharger.
4.3. Installer le thème
Copiez le dossier de thèmes téléchargé hugo-theme-stack-master dans le dossier de thèmes du projet hugo_hello_world que nous avons créé. L'exemple de répertoire est le suivant :
# 例如我的项目工作空间路径如下
cd /Users/woniu/Documents/csdn_hugo
# 项目名称如下
hugo_hello_world
# 最终将下载主题复制的完整路径如下
cd /Users/woniu/Documents/csdn_hugo/hugo_hello_world/themes
Structure du projet VS Code, comme indiqué ci-dessous
4.4. Configurer le thème
Nous ouvrons config.toml dans l'éditeur VS Code. Le contenu du fichier est le suivant :
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
Configurez le thème que nous avons téléchargé. Le code final complet est le suivant :
# 网站的基本地址
baseURL = 'http://example.org/'
# 指定站点的默认语言
languageCode = 'en-us'
# 网站的标题
title = 'CSDN 蜗牛 Hugo 教程网站'
# 网站所使用的主题
theme = "hugo-theme-stack-master"
4.5. Aperçu local
# 启动本地项目
hugo server
# 浏览器输入 http://localhost:1313 访问地址
L’effet ne semble pas idéal, comme le montre la figure ci-dessous :
5、WebStack-Hugo
5.1.Introduction
Un thème de navigation URL réactif et statique basé sur Hugo
5.1.1 Adresse open source
5.1.2 Adresse de démonstration
Navigation sur le site Web de bioinformatique
5.1.3 Caractéristiques
Il s'agit de la version Hugo du thème WebStack. Vous pouvez utiliser Github Pages ou Coding pour héberger et déployer directement sans serveur.
Parlons des caractéristiques en général :
- La méthode de déploiement Hugo préférée de tous les temps est adoptée, ce qui est pratique et efficace.
- Les principales informations de configuration sont intégrées dans config.toml et diverses configurations personnalisées peuvent être réalisées en un seul clic.
- Toutes les informations de navigation sont intégrées dans le fichier data/webstack.yml pour faciliter les ajouts, suppressions et modifications ultérieurs.
5.2 Installation locale
5.2.1. Créer un projet
# 创建一个新的 Hugo 项目，项目名称：MyWebStack
hugo new site MyWebStack
Et ouvrez ce projet via l'éditeur VS Code
5.2.2. Télécharger le thème
Visitez l'adresse open source GitHub avec votre navigateur et cliquez pour télécharger.
5.2.3. Installer le thème
Copiez le fichier de thème téléchargé dans le fichier de thèmes du projet MyWebStack et renommez-le : WebStack-Hugo. La structure du projet est la suivante :
5.2.4. Configurer le thème
Après avoir copié le contenu de MyWebStack/themes/WebStack-Hugo/exampleSite/config.toml, remplacez tout le contenu de MyWebStack/config.toml. Pour des opérations spécifiques, veuillez vous référer à la figure ci-dessous :
5.2.5. Copier les données
Copiez tous les fichiers du dossier /themes/WebStack-Hugo/exampleSite/data dans le dossier MyWebStack/data, comme indiqué dans la figure suivante :
5.2.6. Aperçu local
# 启动本地项目
hugo server
# 浏览器输入 http://localhost:1313 访问地址
5.2.7. Captures d'écran du projet
- Légende 1
- Légende 2
- Légende 3
Ce tutoriel se termine ici, les amis peuvent commencer avec plaisir leur parcours de programmation.