Tutoriel Hugo
De Mi caja de notas
Cet article est une débauche. Vous pouvez m’aider à l'améliorer.
Source / lien original https://dinosaurscode.xyz/tutorials/2016/07/25/hugo-static-site-generator-tutorial/
Tutoriel Générateur Statistique Hugo
Hugo est un générateur de site statique écrit en Go. Il est réputé pour être très rapide.
Installation
Il existe bien trop de plateformes pour que ce tutoriel puisse prétendre couvrir ce point. Pour les instructions d’installation, je vous renvoie [ici](https://gohugo.io/#action) et sur une [traduction à raffiner ici](Installer_Hugo).
Fondamentaux
Pour créer un nouveau site :
$ hugo new site <monsiteweb> ├── archetypes ├── config.toml ├── content ├── data ├── layouts ├── static └── themes
Lancez le site sur un serveur :
$ hugo server
Construction de la totalité du site à l’intérieur de **/public** :
$ hugo
Brève Description de l’Arbre
* Vous écrivez vos posts de blog à l’intérieur de **/content** en [markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).
* les **/layouts** sont des fichiers **.html** à l’intérieur desquels sont placés les contenus.
* **config.toml** stocke les options globales de configuration hugo.
* **/static** stocke le contenu tel que .js, .css, .png.
* **/themes** est l’endroit où vous installez les thèmes personnalisés en utilisant [Git](https://git-scm.com/downloads).
* **/archetypes** ajoute des variables au front matter du contenu et **/data** stocke les variables personnalisées pour vos layouts.
Thèmes
Hugo vous incite à utiliser un thème personalisé au lieu d’en construire un à partir de zéro.
Assurez-vous d’être dans le répertoire `/themes` et dirigez vous vers [themes.gohugo.io](https://themes.gohugo.io/)
Choisissez en-un et clonez-le avec git à l’intérieur de themes :
$ git clone https://github.com/digitalcraftsman/hugo-cactus-theme.git
Ouvrez `config.toml` et ajoutez le thème, puis lancez le serveur :
baseurl = "http://replace-this-with-your-hugo-site.com/" languageCode = "en-us" title = "My New Hugo Site" theme = "hugo-cactus-theme"
Hugo par défaut active un liveReload et par conséquent tous les nouveaux fichiers que vous créez ou modifiez seront rechargés dans le navigateur. Créez un post de blog :
$ hugo new post/premier.md
Produisez votre propre thème
Retirez le thème à partir de votre fichier config.toml.
Change directory into /layouts and make a directory named **post** with a **single.html** file:
<!DOCTYPE html>
{{ .Content }}
Now open /content/post/first.md and add the layout type of post:
+++ date = "2016-07-25T21:04:23-05:00" description = "" title = "first" type = "post" +++ # My first blog post
Partials give us the ability to break our layouts into parts such as head, footer, navbar:
# inside of /layouts $ mkdir partials $ cd partials $ touch head.html
Open the newly created head.html:
<head>
<link href="/css/main.css" rel="stylesheet">
</head>
Create the main.css file inside of /static/css and add the partial to your post layout:
/* /static/css/main.css */
body{
background: orange;
}
/layouts/post/single.html:
<!DOCTYPE html>
{{ partial "head.html" .}}
{{ .Content }}
Where’s the home page?
You would think that it would be inside of /content/index.md right? Well no it’s not. In fact it’s considered a template **/layouts/index.html**:
<!DOCTYPE html>
Home page
Poussez-le sur Github
Open config.toml and add github as the baseurl:
baseurl = "https://<yourusername>.github.io/<yourreponame>" canonifyurls = true languageCode = "en-us" title = "My Website"
Build the site:
$ hugo
Move /public/ to its own directory:
$ mv -v public/* ~/yourgitrepo
Inside of your git repo:
# ~/yourgitrepo $ git init $ git checkout -b gh-pages $ git add --all $ git commit -m "commit"
Create a new repo on Github:
Submit and look for the line **…or push an..**, but only run the first line:
Push it and then visit the URL yourusername.github.io/yourrepo:
$ git push origin gh-pages
Fini !
From here you should read up on the official [Hugo Docs](https://gohugo.io/overview/introduction/) to cover the parts this tutorial missed.