Creating a New Theme

Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme. We’ll start with creating a new site with a very basic template.

Migrate to Hugo from Jekyll

Move static content to static Jekyll has a rule that any directory not starting with _ will be copied as-is to the _site output. Hugo keeps all static content under static. You should therefore move it all there. With Jekyll, something that looked like ▾ <root>/ ▾ images/ logo.png should become ▾ <root>/ ▾ static/ ▾ images/ logo.png Additionally, you’ll want any files that should reside at the root (such as CNAME) to be moved to static.

Création d'un nouveau thème

Introduction Ce tutoriel vous montrera comment créer un thème simple pour Hugo. Je suppose que vous êtes familier avec HTML, la ligne de commande bash, et que vous êtes à l’aise avec Markdown pour formater le contenu. Je vais expliquer comment Hugo utilise des modèles et comment vous pouvez organiser vos modèles pour créer un thème. Je ne couvrirai pas l’utilisation de CSS pour styliser votre thème. Nous allons commencer par créer un nouveau site avec un modèle très basique.

(Hu)go Template Primer

Hugo uses the excellent Go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in Go templates. This document is a brief primer on using Go templates.

Débuter avec Hugo

Étape 1. Installer Hugo

Allez sur la page de téléchargements de hugo et téléchargez la version appropriée à votre système d’exploitation et votre architecture.

Sauvegardez le fichier téléchargé à un endroit précis, afin de l’utiliser dans l’étape suivante.

Des informations plus complètes sont disponibles sur la page installing hugo

Getting Started with Hugo

Step 1. Install Hugo Go to Hugo releases and download the appropriate version for your OS and architecture. Save it somewhere specific as we will be using it in the next step. More complete instructions are available at Install Hugo Step 2. Build the Docs Hugo has its own example site which happens to also be the documentation site you are reading right now. Follow the following steps: Clone the Hugo repository Go into the repo Run hugo in server mode and build the docs Open your browser to http://localhost:1313 Corresponding pseudo commands:

Introduction aux modèles (Hu)go

Hugo utilise l’excellente librairie go html/template pour son moteur de modèles. c’est un moteur extrêmement léger qui offre un très petit nombre de fonctions logiques. À notre expérience, c’est juste ce qu’il faut pour créer un bon site web statique. Si vous avez déjà utilisé d’autre moteurs de modèles pour différents langages ou frameworks, vous allez retrouver beaucoup de similitudes avec les modèles go. Ce document est une introduction sur l’utilisation de Go templates.

Migrer vers Hugo depuis Jekyll

Déplacez le contenu statique vers static

Jekyll a une règle comme quoi tout répertoire qui ne commence pas par _ sera copié tel-quel dans le répertoire _site. Hugo garde tout le contenu statique dans le répertoire static. Vous devez donc déplacer tout ce type de contenu là-dedans. Avec Jekylll, l’arborescence ressemblant à ceci :

▾ <root>/
    ▾ images/