Comment installer Hugo Site Generator sur Ubuntu 18.04 LTS

Hugo est un framework gratuit et open-source écrit en langage Go qui peut être utilisé pour créer des sites Web en toute simplicité. C’est un générateur de sites statiques simple, rapide et sécurisé, tu n’as pas besoin de base de données pour l’exécuter. Hugo prend en charge un nombre illimité de types de contenu, de taxonomies, de menus, de contenus dynamiques pilotés par API, et bien plus encore, le tout sans plugins. Hugo est livré avec un riche ensemble de fonctionnalités, notamment une gestion de contenu robuste, des modèles intégrés, des shortcodes, des sorties personnalisées, le multilinguisme et bien d’autres encore.

Dans ce tutoriel, nous allons apprendre à installer Hugo sur le serveur Ubuntu 18.04 LTS.

Exigences

  • Un serveur fonctionnant sous Ubuntu 18.04.
  • Une adresse IP statique 136.243.240.39 est configurée sur ton serveur.
  • Un mot de passe root est configuré sur ton serveur.

Pour commencer

Avant de commencer, tu dois mettre à jour ton système avec la dernière version. Tu peux le faire en exécutant la commande suivante :

apt-get update -y
apt-get upgrade -y

Une fois que ton serveur est mis à jour, redémarre ton serveur pour appliquer les modifications.

Installe Hugo

Par défaut, la dernière version de Hugo n’est pas disponible dans le dépôt par défaut d’Ubuntu 18.04. Tu devras donc la télécharger depuis le dépôt Git. Tu peux le télécharger avec la commande suivante :

wget https://github.com/gohugoio/hugo/releases/download/v0.58.2/hugo_0.58.2_Linux-64bit.deb

Une fois le téléchargement terminé, installe Hugo avec la commande suivante :

dpkg -i hugo_0.58.2_Linux-64bit.deb

Si tu obtiens une erreur de dépendance, exécute la commande suivante pour résoudre la dépendance :

apt-get install -f

Ensuite, tu peux vérifier la version d’Hugo avec la commande suivante :

hugo version

Tu devrais obtenir le résultat suivant :

Hugo Static Site Generator v0.58.2-253E5FDC linux/amd64 BuildDate: 2019-09-13T08:05:59Z

Tu peux aussi voir une liste d’options disponibles avec Hugo en exécutant la commande suivante :

hugo --help

Tu devrais obtenir le résultat suivant :

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir    remove files from destination not found in static directories
      --config string          config file (default is path/config.yaml|json|toml)
      --configDir string       config dir (default "config")
  -c, --contentDir string      filesystem path to content directory
      --debug                  debug output
  -d, --destination string     filesystem path to write files to
      --disableKinds strings   disable different kind of pages (home, RSS etc.)
      --enableGitInfo          add Git revision, date and author info to the pages
  -e, --environment string     build environment
      --forceSyncStatic        copy all files when static is changed.
      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
      --i18n-warnings          print missing translations
      --ignoreCache            ignores the cache directory
      --ignoreVendor           ignores any _vendor directory
  -l, --layoutDir string       filesystem path to layout directory
      --log                    enable Logging
      --logFile string         log File path (if set, logging enabled automatically)
      --minify                 minify any supported output format (HTML, XML etc.)
      --noChmod                don't sync permission mode of files
      --noTimes                don't sync modification time of files
      --path-warnings          print warnings on duplicate target paths etc.
      --quiet                  build in quiet mode
      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
      --templateMetrics        display metrics about template executions
      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings          themes to use (located in /themes/THEMENAME/)
      --themesDir string       filesystem path to themes directory
      --trace file             write trace to file (not useful in general)
  -v, --verbose                verbose output
      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

Une fois que tu as terminé, tu peux passer à l’étape suivante.

Créer un site Web avec Hugo

Hugo est maintenant installé, il est temps de créer un site Web et du contenu avec Hugo.

Tu peux créer un nouveau site Web nommé test.exemple.com en exécutant la commande suivante :

hugo new site test.example.com

Une fois que le site Web a été créé avec succès, tu devrais obtenir la sortie suivante :

Congratulations! Your new Hugo site is created in /root/test.example.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 " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Tu peux aussi répertorier tous les fichiers créés sous ton site Web avec la commande suivante :

ls test.example.com/

Tu devrais voir le résultat suivant :

archetypes  config.toml  content  data  layouts  static  themes

Crée une page À propos et un billet de blog

Maintenant, change le répertoire de ton site Web et crée une page about.md avec la commande suivante :

cd test.example.com
hugo new about.md

Tu devrais voir le résultat suivant :

/root/test.example.com/content/about.md created

Ensuite, ouvre un fichier about.md et ajoute du contenu :

nano content/about.md

Apporte les modifications suivantes :

---
title: "About"
date: 2019-09-10T06:57:08Z
draft: false
---

I am hitesh jethva working as a technical writer.

Enregistre et ferme le fichier lorsque tu as terminé. Ensuite, crée ton premier message avec la commande suivante :

hugo new post/first.md

Tu devrais voir la sortie suivante :

/root/test.example.com/content/post/first.md created

Ensuite, ouvre le fichier first.md et ajoute du contenu :

nano content/post/first.md

Apporte les modifications suivantes :

---
title: "First"
date: 2019-09-10T06:58:51Z
draft: false
---

## This is my first blog post

Hi How are you!

Configure ton premier thème

Ta page d’accueil et ton article de blog sont maintenant créés, il est temps de configurer ton premier thème.

Tout d’abord, change le répertoire en themes et télécharge le thème hugo-strata-theme avec la commande suivante :

cd themes
wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Une fois téléchargé, extrais le thème téléchargé avec la commande suivante :

unzip master.zip

Ensuite, renomme le thème extrait comme indiqué ci-dessous :

mv hugo-strata-theme-master hugo-strata-theme

Ensuite, tu devras copier le contenu du fichier config.toml d’exemple de themes/hugo-strata-theme dans le fichier config.toml de ton site situé à /root/test.example.com/config.toml.

Tu peux le faire avec la commande suivante :

cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

Ensuite, mets à jour la variable baseurl et inclus également ta nouvelle page d’accueil dans la navigation de ce thème dans le fichier config.toml, comme indiqué ci-dessous :

nano ../config.toml

Mets à jour l’URL de base comme indiqué ci-dessous :

baseurl = "/"

Ajoute aussi les lignes suivantes pour inclure ta nouvelle page d’accueil :

 [[menu.main]]
  name = "About"
  url  = "about"
  weight = 5

Enregistre et ferme le fichier lorsque tu as terminé.

Ensuite, tu devras également mettre à jour la mise en page de ta page d’accueil avec la mise en page modèle du thème située à themes/hugo-strata-theme/layouts/index.html vers test.example.com/layouts/index.html:

nano /root/test.example.com/layouts/index.html

Ajoute le contenu suivant :

{{ 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 }}

Enregistre et ferme le fichier lorsque tu as terminé.

Une fois que tu as terminé, tu peux passer à l’étape suivante.

Construis ton site Web

Ton thème est maintenant configuré pour ton site Web. Il est temps de construire ton site Web. Pour ce faire, change le répertoire pour ton site Web et construis le site avec la commande suivante :

cd /root/test.example.com
hugo

Tu devrais voir la sortie suivante :

                   | EN  
+------------------+----+
  Pages            | 17  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  5  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 18 ms

Maintenant, démarre ton serveur Hugo et lie-le avec l’adresse IP de ton serveur en exécutant la commande suivante :

hugo server --bind=0.0.0.0 --baseUrl=http://136.243.240.39 -D -F

Une fois que le serveur a démarré avec succès, tu devrais voir la sortie suivante :

                   | EN  
+------------------+----+
  Pages            | 17  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  5  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 28 ms
Watching for changes in /root/test.example.com/{content,data,layouts,static,themes}
Watching for config changes in /root/test.example.com/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://136.243.240.39:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Une fois que tu as terminé, tu peux accéder à l’interface web d’Hugo.

Accéder au serveur Hugo

Ton serveur Hugo est maintenant démarré et écoute sur le port 1313. Ensuite, ouvre ton navigateur Web et tape l’URL http://136.243.240.39:1313. Tu seras redirigé vers le tableau de bord de ton serveur Hugo, comme indiqué ci-dessous :

Site Web généré avec Hugo

Maintenant, clique sur À propos dans le volet de gauche. Tu devrais voir ta page À propos dans l’image suivante :

À propos de la page

Maintenant, clique sur le bouton Blog dans le volet de gauche. Tu devrais voir ton article de blog dans l’image suivante :

Première page

Conclusion

Dans le tutoriel ci-dessus, nous avons appris à installer le serveur Hugo sur le serveur Ubuntu 18.04. Nous avons également appris à créer un site avec une page d’accueil et un thème avec Hugo. Pour plus d’informations sur Hugo, tu peux consulter la documentation officielle d’Hugo à l’adresse Hugo Doc. N’hésite pas à me demander si tu as des questions.

Vous aimerez aussi...