Comment créer un blog avec Hugo

• introduction
• Conditions préalables
• Étape 1: installez le programme Hugo
• Étape 2: Créez votre site
• Étape 3: installer des thèmes à partir du référentiel Hugo
• Étape 4: apporter des modifications de configuration de base
• Étape 5: Composez votre contenu
• Étape 6: Ajustez votre contenu avec le serveur Hugo
• Étape 7: publier votre site

introduction

Hugo est un générateur de site statique avec une vitesse de rendu ultra-rapide et une excellente facilité d'utilisation. Grâce à toutes ses fonctionnalités orientées contenu, vous pouvez toujours vous concentrer sur la création de contenu plutôt que sur la création de l'environnement:

• Avec Hugo, vous pouvez créer un site statique en cours d'exécution n'importe où en quelques minutes sans vous soucier de dépendances ou de bases de données fastidieuses.
• Vous pouvez composer votre contenu dans Markdown, le style d'écriture le plus pratique, et voir instantanément les modifications que vous avez apportées sur le Web.
• En outre, vous pouvez tirer le meilleur parti du référentiel de thèmes riches et de la communauté en pleine croissance d'Hugo.

Dans ce didacticiel, je vais vous montrer comment installer et utiliser Hugo pour créer un site de blog statique sur une instance de serveur Vultr LEMP basée sur CentOS.

Conditions préalables

Connectez-vous à votre instance en tant qu'utilisateur non root avec des autorisations sudo. Découvrez comment créer un tel utilisateur dans cet article .

Étape 1: installez le programme Hugo

Hugo peut être installé sur presque toutes les plateformes grand public. Pour CentOS, il vous suffit de télécharger le dernier fichier programme dans une .tar.gzarchive et de le décompresser à un emplacement pratique. Au moment de la rédaction de ce rapport, la dernière version est 0,15.

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

Testez votre installation avec la commande suivante:

 hugo version

Étape 2: Créez votre site

Avec Hugo, vous pouvez créer votre site à partir de n'importe quel dossier de votre serveur. Ici, j'ai construit un site dans le répertoire mysite/sous mon répertoire personnel.

cd ~
hugo new site ~/mysite

Exécutez les commandes suivantes pour voir l'architecture du site:

cd mysite
ls -lF

Comme vous le voyez, l'architecture actuelle du site ressemble à:

archétypes /

config.toml

contenu/

Les données/

mises en page /

statique/

Avec deux autres répertoires à créer, themes/et public/l'ensemble de l'architecture d'un site Hugo est compact mais complet.

Pour commencer, sachez que votre contenu doit être stocké dans le répertoire content/.

Étape 3: installer des thèmes à partir du référentiel Hugo

Pour installer tous les thèmes du référentiel Hugo, exécutez les commandes suivantes. Ceux-ci créeront un répertoire nommé themes/dans le répertoire de votre site et téléchargeront tous les thèmes à partir du dépôt de thèmes Hugo.

cd ~/mysite/
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

Si vous souhaitez simplement installer un seul thème, visitez le référentiel de thèmes Hugo pour déterminer votre thème préféré. Copiez son URL et collez-la dans la git clonecommande ci-dessous.

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

Étape 4: apporter des modifications de configuration de base

Le fichier nommé config.tomldans le répertoire de votre site contient la configuration globale de votre site Hugo. Modifiez le fichier avec un éditeur de texte pour apporter des modifications de configuration de base comme indiqué ci-dessous. N'oubliez pas de remplacer les valeurs en fonction de vos conditions spécifiques.

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

Étape 5: Composez votre contenu

Dans votre répertoire de site, entrez la commande suivante pour créer une page de contenu dans le répertoire ~/mysite/content/post/.

cd ~/mysite/
hugo new post/about.md

Ouvrez le fichier dans un éditeur de texte, le format du fichier doit ressembler au suivant.

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"

+++

Entre les deux lignes de +++mensonges se trouvent les méta-informations sur votre page de contenu. Ici, vous pouvez supprimer la ligne draft = trueet modifier la ligne de titre comme vous le souhaitez.

Sous la deuxième +++ligne, ajoutez le contenu que vous souhaitez afficher sur la page Web. N'oubliez pas d'écrire votre contenu dans le langage Markdown.

## This is an H2 headline

Text goes here.

Après avoir terminé cette modification, laissez l'éditeur de texte ouvert pour une utilisation ultérieure.

Étape 6: Ajustez votre contenu avec le serveur Hugo

Vous pouvez utiliser le serveur Web intégré de Hugo pour déployer votre site, qui peut instantanément afficher vos modifications sur la page Web dès que vous modifiez votre contenu dans un éditeur de texte.

Ouvrez un autre terminal, configurez les iptablesrègles pour autoriser votre accès à votre site sur le port 1313 par défaut du serveur Hugo:

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

Lancez le serveur Hugo:

hugo server --bind="[YourServerIP]"

Visitez votre site à partir d'un navigateur:

http://[YourServerIP]:1313

Maintenant, vous pouvez essayer de modifier le contenu du fichier d'échange dans le terminal précédent ou d'ajouter / supprimer un fichier d'échange. Vous constaterez que toutes les modifications dans le content/répertoire seront reflétées simultanément sur l'écran de votre navigateur. C'est une excellente fonctionnalité pour un blogueur occupé, car vous pouvez toujours voir immédiatement vos modifications pour une meilleure expérience de composition.

Une fois la modification terminée, appuyez sur Ctrl+Cpour arrêter le serveur Hugo.

Étape 7: publier votre site

Il est maintenant temps de publier votre site sur le Web. Exécutez les commandes suivantes et Hugo générera tout le contenu statique adapté à la publication dans le public/répertoire.

cd ~/mysite
hugo

Remarque : Hugo ne supprimera pas les anciens fichiers qui ont été générés précédemment lorsque vous exécutez les commandes ci-dessus. Afin d'éviter des résultats inattendus, vous pouvez toujours supprimer le public/répertoire avant d'exécuter la hugocommande ou spécifier une nouvelle destination de sortie comme indiqué dans la commande suivante.

hugo --destination=public2

Étant donné que le serveur Web Nginx a déjà été exécuté sur le serveur, il vous suffit de copier le contenu du ~/mysite/public/répertoire ou d'autres répertoires de destination personnalisés dans votre répertoire Web /usr/share/nginx/html/.

Supprimez les fichiers originaux:

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

Copiez vos fichiers de site statiques dans le répertoire Web:

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

C'est ça. Maintenant , vous pouvez visiter votre site statique super rapide à partir de votre navigateur: http://[YourServerIP].

Pour voir plus de détails, utilisez la commande hugo helpou visitez le site officiel de Hugo .