Créer un site avec Quarto dans RStudio

Préambule

Créer un site simple avec Quarto dans RStudio

Déploiement du site sur des pages dédiées [Git huma-Num]

Page introductive

Toutes les options pour générer des sites avec Quarto : https://quarto.org/docs/websites.

Eléments à connaître … plus ou moins

• l’IDE RStudio,
• le langage R,
  
• Quarto,
• le langage Rmarkdown,
• le yaml,
• les balises et le format html,
• le langage css

Le markdown

Le langage markdown est un langage de balisage léger qui permet de formater du texte brut. Il est souvent utilisé pour rédiger des documents, des articles ou des pages web. Il utilise une syntaxe simple et intuitive, ce qui le rend facile à apprendre et à utiliser.
Il permet de créer des titres, des listes, des liens, des images et d’autres éléments de mise en forme sans avoir à utiliser des balises HTML complexes.
Markdown est souvent utilisé dans des environnements de développement comme RStudio, GitHub et d’autres plateformes de publication.

Exemple de langage markdown

Le yaml

C’est l’en tête du document produit avec quarto (.qmd) qui comprend toutes ses métadonnées : titre, date, options de mise en page… ; celle-ci est encadrée par 2 séries de tirets ---. Par défaut elle contient le titre du document et son format de sortie.
La syntaxe est assez simple yaml mais très sensible à l’intendation.
Il est donc important de respecter les espaces et les retours à la ligne (\). Lors de la compilation, le yaml est le premier élément qui est évalué. En cas d’erreur elle sera stoppée quasi instantanément. Ce fichier ets quasi vide à la génération du document quarto. Importance d’indiquer self-contained: true pour que le fichier soit autonome et que les images soient inséres.

Exemple de yaml

Le langage CSS

Le langage CSS (Cascading Style Sheets) est un langage de style utilisé pour décrire la présentation d’un document écrit en HTML ou XML. Il permet de contrôler l’apparence visuelle des éléments d’une page web, tels que les polices, les couleurs, les marges, les espacements et bien plus encore.

Exemple de fichier styles.css

Générer une structure de site

Dans RStudio, créer un projet R (d’extension .proj) via le menu File -> New Project -> New Directory -> Quarto Website

Donner un nom au dossier Directory name qui sera un sous dossier du répertoire contenant le projet R. Puis cliquer sur Create Project.

Exemple de génération de site

Le projet est créé et il contient différents fichiers qu’on pourra adapter

Contenu du projet

Les fichiers crées sont :

• _quarto.yml qui spécifie que le projet est un site web,
  
• about.qmd` qui est un exemple de page,
  
• index.qmd correspondant à la page d’accueil du site et qui contient un texte d’exemple,
  
• styles.css où on paramètre l’apparence générale du site

Ces fichiers sont à modifier selon les besoins du site.

Exemple de _quarto_yml pour un site

index.qmd généré par défault

et Quarto génère aussi

• le dossier _site où seront placés les pages (.html) générées par Quarto au fur et à mesure de leurs créations.

Tous les éléments utiles seront à placer dans le dossier du projet et rangés dans des sous dossiers dédiés à créer (Ex.:images pour placer des logos, des fichiers .png ou .jpg…)

Générer les pages qui vont constituer le site

Dans le projet dédié au site (d’extension .proj) via le menu File -> New File -> Quarto Document

Générer la page d’une recette

Puis on le sauvegarde avec le nom recette_frangipane.qmd et on génère la page résultante via la commande quarto render ou via le bouton en haut à droite de Rstudio

De la même façon, a généré les pages

• recette_brioche,
  
• Présentation,
  
• Bibliographie

Modifier la mise en page du site

Modifier la page d’accueil index.qmd pour y ajouter un lien vers chacun des éléments correspondants aux pages créées.

Changer l’apparence générale : le fichier custom.css

On va diminuer la taille de la police et quand il sera ajouté, paramétrer l’apparence du tableau du programme.