Hugo, générateur de site statique

Rédigé par Paille Aucun commentaire
Classé dans : Internet Mots clés : blog, tutos, hugo

InternetHugo est un logiciel qui permet (et facilite) la création de sites statique.
Quoi t'est-ce et comment ça marche ?
Suivez le guide....

Site statique ? Quoi t'est-ce ?

Selon wikipédia :

"C'"est une page web dont le contenu ne varie pas en fonction des caractéristiques de la demande, c'est-à-dire qu'à un moment donné tous les internautes qui demandent la page reçoivent le même contenu.
À l'inverse, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande"
Pour faire simple, un site statique est conçu de html (le fond) et de css (la forme), pas de php.
Bon il peut y avoir d'autres trucs style JavaScript, mais on va pas compliquer pour le moment.

Pourquoi utiliser des sites statiques en 2018 ?

Pour un blog, une documentation ou un site vitrine (etc.) pas besoin de sortir l'artillerie lourde.....
De plus, l'affichage sera beaucoup plus rapide et demandera moins de ressources pour s'afficher.
On peut aussi citer :

  • le site est sur le serveur, mais aussi sur notre ordinateur (donc plus facile à sauvegarder, réinstaller ou déplacer si besoin)
  • répond aux standards du web et se référence parfaitement,
  • hébergement moins coûteux (pas de base de données, moins de charge serveur…),
  • sécurisé (quasi impossible à pirater),
  • pas de mises à jour,
  • plus facile à “bidouiller”,
  • Alors, en pratique ?

    On peut construire un tel site juste avec un éditeur de texte, mais cela peut s'avérer un peu long....
    Ou alors on peut utiliser un générateur de site statique qui nous simplifiera la tache. Dans notre cas Hugo.

    Trouver Hugo

    Le logiciel est disponible dans les dépôts de la plupart des distributions Gnu/Linux (sous windows et mac aussi, hein ?). Mais la version disponible n'est pas forcément la plus récente. Je vous conseille donc de le télécharger directement depuis le github du projet.

    Créer la base du site

    Une fois le bouzin installé, nous allons créer notre premier site. Pour cela ouvrez un terminal et tapez :

    hugo new site ~/chemin/vers/votre/dossier/nom-du-site

    Maintenant, dans votre répertoire vous devriez trouver les dossiers suivants : archetypes, content, data, layouts, static, thème et un fichier de configuration "config.toml". C'est le "squelette" de base de votre site.

    Installer un thème

    Bon, faut avouer que pour le moment c'est un peu tristounet, il vous faut un thème. Vous trouverez moult thèmes ici.(vous pouvez aussi créer le vôtre).

    Une fois le thème choisi, téléchargé et décompressé, copiez-le dans votre dossier "thème".
    Dans votre thème vous devriez trouver un dossier "exampleSite", ouvrez le et copier le fichier "config.toml".
    Remplacez le "config.toml" qui se trouve à la racine de votre site par celui que vous venez de copier. (Attention !! Les thèmes venant de Github sont intitulés "Non-de-thème-master", renommez votre thème en virant le "-master")

    Pour info : L’installation d'un thème peut varier d’un thème à l’autre, lisez le fichier README.md fourni.

    Pour installer tout ça, reprenez votre terminal, rendez-vous dans le répertoire du site et tapez un :
    hugo
    Cette commande va installer votre thème et générer le site. Un dossier "public" fera son apparition, c'est son contenu qu'il faudra mettre sur votre serveur pour mettre à disposition votre site sur le web.

    Pour voir ce que ça donne utilisez la commande : hugo server, dans le répertoire du site.

    paille@debian:~/hugo/mr-paille$ hugo server

    | EN
    +------------------+----+
    Pages | 30
    Paginator pages | 0
    Non-page files | 2
    Static files | 3
    Processed images | 0
    Aliases | 11
    Sitemaps | 1
    Cleaned | 0

    Total in 318 ms
    Watching for changes in /home/paille/hugo/mr-paille/{content,data,layouts,static,themes}
    Serving pages from memory
    Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
    Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
    Press Ctrl+C to stop

    Votre site est maintenant accessible via cette url : http://localhost:1313/
    Si vous faites des modifications le site sera réactualisé automatiquement.

    Pour personnaliser le blog, il vous faudra modifier le fichier config.toml. Le css se trouve généralement dans themes/nom-de-theme/static/css/ le header, footer (etc.) se trouvent dans themes/nom-de-theme/layouts/partials/ .

    Mais pour le moment c'est encore un peu vide, il vous faut des articles et des pages....

    Créer un article :

    Toujours dans le terminal :
    hugo new post/mon-premier-article.md

    Le post sera créé dans le dossier "content/post" Les articles devront être écrits en HTML ou Markdown (Vous pouvez mélanger les deux.). Il existe des applications qui génèrent ces formats, mais ce n'est pas très compliqué et ça peut toujours être utile. Je vous conseille, donc, de vous y mettre....

    L'entête de votre article ressemblera à ça (il peut y avoir des différences) :
    +++
    title: "votre titre"
    description = ""
    author:
    - vous
    date: '2018-03-26'
    categories:
    - Example
    tags:
    - tag1
    - tag2
    +++
    Le contenu sera inséré après les "+++"

    Créer une page :

    Les pages sont dans blog/content. Des fois il y a un dossier au nom de la page, ou juste un fichier titre_page.md.
    Pour créer une page il suffit de générer votre fichier.md avec un éditeur de texte, insérez une entête. :
    +++
    title = "Votre titre"
    date = "2018-03-26"
    +++
    Pour que votre page apparaisse dans votre menu, regardez dans config.toml et rajoutez votre page :
    [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
    [[menu.main]]
    name = "nouvelle page"
    url = "/nouvelle-page/"
    weight = 2
    Voilà, pour le plus gros, après pour le reste la documentation d'hugo est complète (mais en anglais).
    Ca peut paraître un peu compliqué au début, mais on s'y fait vite.....



    Écrire un commentaire

    Quelle est le sixième caractère du mot h6epb81y ?

    Fil RSS des commentaires de cet article