Création d'un blog avec hugo et github

J’ai construit ce blog en utilisant Github pages, Hugo le theme beautifulhugo. La partie la plus étonnante est qu’il est gratuit, minimaliste, utilise Markdown et qu’il peut être exécuté en un rien de temps! De plus, Hugo est livré avec Live-Reload activé afin que vous puissiez voir simultanément les modifications que vous apportez sur votre site Web.

Voici un court tutoriel sur la création de ce blog. Commençons!

Cette page est très inspiré de [https://vaibhavk.github.io/post/beautiful_blog/ ] (https://vaibhavk.github.io/post/beautiful_blog/)

Note: Si cela ne vous intéresse pas de configurer vous-même, insérez simplement le [repo de vaibhavk ] (https://github.com/vaibhavk/Blogs) et apportez les modifications nécessaires pour inclure vos informations.

1. Github

Pour cette étape, vous devez avoir un compte github et git installés sur votre système. Ensuite, rendez-vous ici pour créer un nouveau repository pour votre blog. Vous pouvez nommer n’importe quoi. Vous devez maintenant cloner ce repository en utilisant:

$ git clone https://github.com/yourusername/repo-you-just-made.git && cd repo-you-just-made

        $ hugo new site . --force

        $ echo "Public/" > .gitignore

        $ git add --all
        $ git commit -m "initial commit" -a
        $ git push -u origin master

2. Theme

Nous allons maintenant utiliser un thème. Vous pouvez utiliser le thème que j’utilise beautifulhugo ou choisir parmi les Themes Hugo, selon la procédure que vous préférez, mais la procédure restera la même. Pour ajouter le thème:

  $ git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

Nous avons maintenant besoin d’un fichier de configuration. Pour ce faire, nous pouvons copier le fichier de configuration du site exemple dans les thèmes.

        $ cp themes/beautifulhugo/exampleSite/config.toml config.toml

Maintenant, notre site de base est presque prêt. Pour voir vos progrès, vous pouvez faire :

        $ hugo serve -w

Vous pouvez voir beaucoup de choses non pertinentes ici. Nous devons mettre à jour notre fichier config.toml afin qu’il corresponde à votre profil. Vous pouvez prendre une référence du config.toml de vaibhavk

Vous avez également besoin que votre propre logo soit affiché ici, pas celui fourni par le thème. Pour ce faire, créez un répertoire img dans un dossier statique et copiez-y le fichier.:

        $ mkdir -p static/img
        $ cp /path-to-image static/img/avatar-icon.png

Les dates ne sont pas encore supporté par Hugo pour le mutltilanguage. La page customize-dates du site de Hugo donne une façon de remédier à cette problématique.

La première étape est de créer data/mois.yaml avec le contenu suivant:

1: "janvier"
2: "février"
3: "mars"
4: "avril"
5: "mai"
6: "juin"
7: "juillet"
8: "août"
9: "septembre"
10: "octobre"
11: "novembre"
12: "décembre"

Dans le cas du thème beautifulhugo, vous devez modifier post_meta.html pour traduire le mois.

        $ vi /themes/beautifulhugo/layouts/partials/post_meta.html

Avant :

1  <i class="fas fa-calendar"></i>&nbsp;{{ $datestr | i18n "postedOnDate"}}

Après :

1  <i class="fas fa-calendar"></i>&nbsp;{{ i18n "postedOnDate"}}{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}

Nous sommes maintenant prêts à écrire notre tout premier blog.

3. Première page du Blog

Nous pouvons utiliser Hugo pour initialiser le premier fichier de notre blog et le modifier en utilisant:

        $ hugo new post/first-blog.md
        $ vi content/!$

Maintenant, vous pouvez écrire votre blog ici. Lorsque vous avez terminé votre blog, changez draft = true en draft = false que vous pouvez utiliser sur les toutes premières lignes. N’oubliez pas que jusqu’à brouillon = true, la page ne sera pas affichée sur votre site Web.

Maintenant, vérifiez votre site en utilisant:

        $ hugo serve -w

Maintenant, si vous pouvez déployer notre site sur github.

4. Github Encore

Retournez sur github et créez un autre repository avec yourusername.github.io comme vaibhavk à fait vaibhavk.github.io et cloner le. Maintenant que vous êtes dans votre Blog’s repository. Vérifiez votre site Web localement une fois de plus :

        $ hugo serve -w
        $ hugo -d /path-to-yourusername.github.io/

Maintenant, tout le contenu a été ajouté, prêt à être validé (commit).

        $ cd /path-to-yourusername.github.io
        $ git add --all
        $ git commit -m "rebuilding site `date`" -a
        $ git push origin master

Aller à cette adresse https://yourusername.github.io via le navigateur internet.

5. Conclusion

Références

• Vaibhavk Blog
• Horea’s Blog
• Hugo’s Documentaion

Closing Notes

Finalement, Merci à Vaibhavk pour cette article clair.

Voir également

• Decouverte De Markdown