Hugo est un générateur de site Web statique open source conçu pour les petits projets et les sites informatifs. Il est écrit en langage Go, ce qui le rend très sécurisé et extrêmement rapide. Hugo offre une excellente expérience d'écriture et est optimisé pour la visualisation de sites Web. Vous n'avez pas besoin d'installer de dépendances telles que PHP, Python ou des bases de données pour exécuter les sites Hugo.
Dans ce tutoriel, nous allons vous montrer comment installer et utiliser le générateur de site Hugo sur Ubuntu 20.04.
Prérequis
- Un nouveau VPS Ubuntu 20.04 sur la plate-forme cloud Atlantic.Net
- Un mot de passe root configuré sur votre serveur
Étape 1 - Créer un serveur cloud Atlantic.Net
Tout d'abord, connectez-vous à votre serveur Atlantic.Net Cloud. Créez un nouveau serveur en choisissant Ubuntu 20.04 comme système d'exploitation avec au moins 1 Go de RAM. Connectez-vous à votre serveur cloud via SSH et connectez-vous à l'aide des informations d'identification mises en évidence en haut de la page.
Une fois que vous êtes connecté à votre serveur Ubuntu 20.04, exécutez la commande suivante pour mettre à jour votre système de base avec les derniers packages disponibles.
apt-get update -y
Étape 2 - Installer Hugo
wget https://github.com/gohugoio/hugo/releases/download/v0.79.0/hugo_0.79.0_Linux-64bit.deb
Une fois le package téléchargé, vous pouvez l'installer avec la commande suivante :
dpkg -i hugo_0.79.0_Linux-64bit.deb
Si vous voyez des erreurs de dépendance, vous pouvez les résoudre avec la commande suivante :
apt-get install -f
Après avoir installé Hugo, vérifiez la version installée d'Hugo avec la commande suivante :
hugo version
Vous devriez obtenir le résultat suivant :
Hugo Static Site Generator v0.79.0-1415EFDC linux/amd64 BuildDate: 2020-11-27T09:09:02Z
Étape 3 – Créer un site Web avec Hugo
Tout d'abord, créez un nouveau site Web nommé web1.doamin.com à l'aide de la commande hugo, comme indiqué ci-dessous :
hugo new site web1.domain.com
Vous devriez obtenir le résultat suivant :
Congratulations! Your new Hugo site is created in /root/web1.domain.com. Just a few more steps and you're ready to go: 1.Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
Vous pouvez voir la liste de tous les fichiers et répertoires générés par Hugo avec la commande suivante :
ls web1.domain.com
Sortie :
archetypes config.toml content data layouts static themes
Étape 4 - Créez votre première page
Maintenant, changez le répertoire de votre site Web et créez une nouvelle page nommée main.md avec la commande suivante :
cd web1.domain.com hugo new main.md
Vous devriez obtenir le résultat suivant :
/root/web1.domain.com/content/main.md created
Ensuite, modifiez la page main.md et ajoutez du contenu :
nano content/main.md
Ajoutez les lignes suivantes à la fin du fichier :
# Test Page This is my first test page.
Enregistrez et fermez le fichier lorsque vous avez terminé.
Étape 5 - Télécharger et installer un thème
Tout d'abord, changez le répertoire en thèmes et téléchargez le thème Hugo avec la commande suivante :
cd web1.domain.com/themes wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip
Une fois téléchargé, décompressez le fichier téléchargé avec la commande suivante :
unzip master.zip
Ensuite, renommez le répertoire extrait avec la commande suivante :
mv hugo-strata-theme-master hugo-strata-theme
Ensuite, copiez l'exemple de contenu du fichier config.toml situé dans le répertoire des thèmes vers le fichier config.toml par défaut :
cat hugo-strata-theme/exampleSite/config.toml > ../config.toml
Ensuite, éditez le fichier config.toml avec la commande suivante :
nano ../config.toml
Modifiez l'URL de base et définissez le nom de votre page comme indiqué ci-dessous :
baseurl = "/" [[menu.main]] name = "main" url = "main" weight = 5
Enregistrez et fermez le fichier, puis créez un fichier de présentation de page de destination avec la commande suivante :
nano /root/web1.domain.com/layouts/index.html
Ajoutez les lignes suivantes :
{{ define "main" }}
{{ if not .Site.Params.about.hide }}
{{ partial "about" . }}
{{ end }}
{{ if not .Site.Params.portfolio.hide }}
{{ partial "portfolio" . }}
{{ end }}
{{ if not .Site.Params.recentposts.hide }}
{{ partial "recent-posts" . }}
{{ end }}
{{ if not .Site.Params.contact.hide }}
{{ partial "contact" . }}
{{ end }}
{{ end }} Enregistrez et fermez le fichier.
Étape 6 :Créez votre site Web
Maintenant, modifiez le répertoire de votre site Web et créez votre site Web Hugo à l'aide de la commande suivante :
cd /root/web1.domain.com hugo
Vous devriez obtenir le résultat suivant :
Start building sites …
WARN 2020/12/06 09:21:44 Page.Hugo is deprecated and will be removed in a future release.
Use the global hugo function.
WARN 2020/12/06 09:21:44 Page.RSSLink is deprecated and will be removed in a future release.
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0 Ensuite, démarrez le serveur Hugo en spécifiant l'adresse IP de votre serveur comme indiqué ci-dessous :
hugo server --bind=0.0.0.0 --baseUrl=http://your-server-ip -D -F
Vous devriez obtenir le résultat suivant :
Start building sites …
WARN 2020/12/06 09:22:02 Page.Hugo is deprecated and will be removed in a future release.
Use the global hugo function.
WARN 2020/12/06 09:22:02 Page.RSSLink is deprecated and will be removed in a future release.
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 11
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 3
Sitemaps | 1
Cleaned | 0
Built in 35 ms
Watching for changes in /root/web1.domain.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/web1.domain.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://69.87.216.179:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop Étape 7 – Accéder à l'interface utilisateur Web Hugo
Maintenant, ouvrez votre navigateur Web et tapez l'URL http://your-server-ip:1313 . Vous devriez voir le tableau de bord Hugo dans l'écran suivant :
Cliquez sur principal dans le volet de gauche. Vous devriez voir votre page dans l'écran suivant :
Conclusion
Dans le guide ci-dessus, vous avez appris à installer Hugo et à générer un site Web statique sur Ubuntu 20.04. Vous devriez maintenant avoir suffisamment de connaissances pour créer facilement votre propre site Web statique avec Hugo; essayez-le aujourd'hui sur l'hébergement VPS d'Atlantic.Net !