Comment créer un site Web en utilisant Hugo sur Debian 11
Hugo est un framework de site Web gratuit et open-source écrit en développé en Go. Hugo fournit un générateur de sites statiques fiable et moderne qui te permet de créer facilement un site Web simple et rapide. Il est livré avec des modèles préétablis et d’autres fonctions, notamment le référencement, les commentaires et l’analyse, ainsi que d’autres fonctions. Les sites Hugo peuvent fonctionner sans aucun temps d’exécution coûteux comme PHP, Python, Ruby et n’ont pas besoin de base de données.
Dans ce billet, nous allons te montrer comment installer et utiliser le générateur de sites Hugo sur Debian 11.
Conditions préalables
- Un serveur fonctionnant sous Debian 11.
- Un mot de passe root est configuré sur le serveur.
Installer Hugo sur Debian 11
Par défaut, le paquet Hugo est inclus dans le référentiel par défaut de Debian 11. Tu peux l’installer à l’aide de la commande suivante :
apt-get install hugo -y
Une fois que Hugo est installé, tu peux vérifier la version d’Hugo à l’aide de la commande ci-dessous :
hugo version
Tu devrais obtenir la sortie suivante :
Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2021-07-18T09:31:51Z (debian 0.80.0-6+b5)
Créer un site Web avec Hugo
Dans cette section, nous allons créer un nouveau site Web nommé hugo.example.com.
Exécute la commande suivante pour créer un site Web :
hugo new site hugo.example.com
Une fois le site Web créé, tu devrais obtenir le résultat suivant :
Congratulations! Your new Hugo site is created in /root/hugo.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 répertorier tous les fichiers créés par Hugo à l’aide de la commande suivante :
ls -l hugo.example.com
Tu obtiendras le résultat suivant :
drwxr-xr-x 2 root root 4096 Nov 13 09:27 archetypes -rw-r--r-- 1 root root 82 Nov 13 09:27 config.toml drwxr-xr-x 2 root root 4096 Nov 13 09:27 content drwxr-xr-x 2 root root 4096 Nov 13 09:27 data drwxr-xr-x 2 root root 4096 Nov 13 09:27 layouts drwxr-xr-x 2 root root 4096 Nov 13 09:27 static drwxr-xr-x 2 root root 4096 Nov 13 09:27 themes
Créer une page À propos et un message type
Tout d’abord, change le répertoire de ton site Web à l’aide de la commande suivante :
cd hugo.example.com
Ensuite, crée une page à propos à l’aide de la commande suivante :
hugo new about.md
Tu obtiendras le résultat suivant :
/root/hugo.example.com/content/about.md created
Ensuite, modifie la page about.md à l’aide de la commande suivante :
nano content/about.md
Modifie le fichier comme indiqué ci-dessous :
--- title: "About Us" date: 2021-11-13T09:28:18Z draft: false --- This is About Us page for this website.
Ensuite, crée un message type à l’aide de la commande suivante :
hugo new post/page.md
Tu obtiendras le résultat suivant :
/root/hugo.example.com/content/post/page.md created
Ensuite, modifie la page de l’article type avec la commande suivante :
nano content/post/page.md
Change le fichier comme indiqué ci-dessous :
--- title: "Page" date: 2021-11-13T09:29:29Z draft: true --- # Hugo Page This is my first hugo website page!
Enregistre et ferme le fichier lorsque tu as terminé.
Installe les thèmes sur ton site Web
Ensuite, tu devras télécharger et installer un thème pour accéder à ton site Web Hugo.
Tout d’abord, change le répertoire en themes avec la commande suivante :
cd themes
Ensuite, télécharge le thème Hugo avec la commande suivante :
wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip
Ensuite, décompresse le thème téléchargé avec la commande suivante: :
unzip master.zip
Ensuite, renomme le thème extrait avec la commande suivante: :
mv hugo-strata-theme-master hugo-strata-theme
Ensuite, copie le contenu du config.toml dans le config de ton site.
cat hugo-strata-theme/exampleSite/config.toml > ../config.toml
Ensuite, modifie le fichier config.toml avec la commande suivante :
nano ../config.toml
Ajoute / Modifie les lignes suivantes :
baseurl = "/" [[menu.main]] name = "About" url = "about" weight = 5
Enregistre et ferme le fichier puis crée un fichier index.html pour ton site :
cd ../
nano layouts/index.html
Ajoute 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 }}
Sauvegarde et ferme le fichier.
Construis et lance ton site Web
Maintenant, tu dois construire ton site Web pour l’utiliser. Tu peux le construire en exécutant la commande suivante :
hugo
Tu obtiendras le résultat suivant :
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 8
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0
Total in 48 ms
Ensuite, démarre le serveur Hugo et lie-le avec l’IP de ton serveur à l’aide de la commande suivante :
hugo server --bind=0.0.0.0 --baseUrl=http://104.245.34.233 -D -F
Tu obtiendras le résultat suivant :
{{ 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 42 ms
Watching for changes in /root/hugo.example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/hugo.example.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://104.245.34.233:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop
À ce stade, le serveur Hugo est démarré et écoute sur le port 1313.
Accède au site Web d’Hugo
Maintenant, ouvre ton navigateur Web et accède à ton site Web en utilisant l’URL http://your-server-ip:1313. Tu devrais voir la page par défaut d’Hugo :
Clique sur À propos dans le volet de gauche. Tu devrais voir ta page À propos sur l’écran suivant :
Conclusion
Félicitations ! Tu as réussi à installer Hugo et à créer un site Web sur Debian 11. Tu peux maintenant créer facilement un site Web sécurisé et rapide en utilisant Hugo.