Développer un site

Intégrer un site Web accessible et sobre avec Osuny, pour produire votre propre site Web

Pour faire un site avec Osuny, la solution la plus simple est de partir du template Github osuny-hugo-template-AAA. Ce template utilise le thème osuny-hugo-theme-AAA. Le template propose une configuration de site à jour, avec Hugo, le thème et les scripts facilitant les mises à jour. Comme les sites sont développés avec Hugo, il faut l’installer pour coder en local.

Avant le template AAA, il y a eu un autre template, nommé osuny-hugo-template, qui utilisait le thème osuny-hugo-theme. Ce template et ce thème sont obsolètes. Il a fait l’objet de plusieurs refontes, et a lui-même succédé au thème Jekyll, au début d’Osuny. La mention AAA se réfère à l’article Qualité frontend : à la recherche du AAA, publié sur le Lab noesya.

Installer Hugo

Mac

Sur Mac, avec Homebrew, il faut utiliser la commande :

brew install hugo

C’est la méthode que nous utilisons dans l’équipe noesya. Pour d’autres méthodes, la documentation officielle d’installation est disponible sur le site gohugo.io.

Windows

La méthode la plus simple pour installer Hugo sur Windows est d’utiliser un package manager, comme Scoop ou Chocolatey.

choco install hugo-extended

Voir la documentation officielle d’installation pour plus d’informations sur l’installation avec Windows.

Installer Yarn

Mac

Sur Mac, avec Homebrew, il faut utiliser la commande :

brew install yarn

Documentation officielle d’installation.

Windows

Pour installer Yarn sur Windows, la méthode recommandé est d’utiliser NPM inclu avec l’installation de Node.js.

npm install --global yarn

Pour plus d’informations sur l’installation de Yarn sur Windows, voir la documentation officielle d’installation.

Créer le référentiel

Sur la page du template, il faut cliquer sur le bouton “Use this template”, puis donner un nom et valider. Dans ce tutoriel, nous utiliserons le nom monreferentiel.

Une fois le référentiel créé, il faut le cloner en local. Le thème est un sous-module git. Pour cloner avec le thème, il faut utiliser la commande :

git clone git@github.com:monorganisation/monreferentiel.git --recurse-submodules

Lancer le serveur

La première fois, on installe les dépendances :

cd monreferentiel
yarn install

Pour lancer le serveur, on utilise la commande :

yarn osuny dev

Utiliser des données d’exemple

Vous pouvez utiliser des données d’exemple, présentant l’ensemble des cas possibles avec Osuny, ce qui vous permet de travailler sur l’apparence du site avant même d’avoir publié du contenu. Bien entendu, vous pouvez repasser très simplement sur vos données réelles dès qu’elles sont disponibles, et alterner en fonction de vos besoins.

Pour installer le contenu d’exemple, on utilise la commande :

yarn osuny setup-example

Pour travailler sur le site avec le contenu d’exemple, on utilise la commande :

yarn osuny server-example

WARNING : quelque chose ne fonctionne pas avec cette commande, il faut la réparer.

Et maintenant ?

L’idée générale pour développer votre site sur la base d’Osuny est de procéder en suivant les étapes suivantes.