Différences entre versions de « Tutoriel Hugo »

Version du 22 mars 2017 à 12:25

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

Erreur lors de la création de la miniature : Impossible d’enregistrer la vignette sur la destination

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-minimalist-theme.git

Ouvrez `config.toml` et ajoutez le thème, puis lancez le serveur :

   languageCode = "fr-fr"
   title = "Mon nouveau Site Hugo"
   baseURL = "http://example.org/"
   theme = "hugo-minimalist-theme"

![Hugo Cactus Theme](https://dinosaurscode.xyz/images/hugo-cactus-theme.png)

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

![Hugo first post](https://dinosaurscode.xyz/images/hugo-first-content.png)

Produisez votre propre thème

Retirez le thème à partir de votre fichier config.toml.

Modifiez le répertoire à l'intérieur de `/layouts` et produisez un répertoire appelé **post** avec un fichier **single.html** :

   <!DOCTYPE html>
   
    
      
      {{ .Content }}

Maintenant ouvrez `/content/post/premier.md` et ajoutez le type de layout du post :

   +++
   date = "2016-07-25T21:04:23-05:00"
   description = ""
   title = "premier"
   type = "post"
   
   +++
   
   # Mon premier post de blog

![Hugo Custom Theme Layout](https://dinosaurscode.xyz/images/hugo-custom-theme-one.png)

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

Ouvrez le nouveau fichier créé `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 }}

![Hugo partials](https://dinosaurscode.xyz/images/hugo-partials.png)

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

![Hugo homepage](https://dinosaurscode.xyz/images/hugo-homepage.png)

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:

![Hugo Github Repo](https://dinosaurscode.xyz/images/hugo-github-repo.png)

Submit and look for the line **…or push an..**, but only run the first line:

![Hugo Push Repo](https://dinosaurscode.xyz/images/hugo-repo-push.png)

Push it and then visit the URL yourusername.github.io/yourrepo:

   $ git push origin gh-pages

![Hugo Completed Push to Github](https://dinosaurscode.xyz/images/hugo-pushed.png)

Fini !

From here you should read up on the official [Hugo Docs](https://gohugo.io/overview/introduction/) to cover the parts this tutorial missed.