# Création d'un site web statique
---
## Introduction
- Construire un site Web statique simple
- L'héberger sur `GitHub` pour que le monde entier puisse y accéder,
- Savoir comment demander de l'aide à votre ami `Google` pour l'améliorer.
---
### Plan
- Les notions de base, pour la création d'un site web
- L'exemple du pôle EEC
- Le déploiement sur un serveur (`Github`)
- Pour aller plus loin...
---
### Prérequis
- Git / Github ("un peu")
- [Lien vers la formation `R Collaboratif`](https://linogaliana.gitlab.io/collaboratif/git.html)
- R Markdown ("beaucoup")
- RStudio (pasionnément)
- R (éventuellement, pas du tout)
<br>
:::spoiler *Hey !*
```{R}
install.packages("rmarkdown")
```
:::
---
Euuuh ! On commence par quoi ? :shocked_face_with_exploding_head:
- [ ] On construit le site puis on le déploie ?
- [ ] On déploie le site avant de le construire ?
---
## La création du site
----
### Les principales étapes
- ***GitHub***
- Avoir un compte `Github`
- Créer un référentiel `Github` ("Repo")
- ***Créer son projet RStudio***
- Cloner son projet `Github` avec `RStudio`
- ***Liaison entre votre projet (répertoire local) et ce repo distant***
- déployer son site
- Actualiser, commiter, pusher... actualiser, commiter, pusher... actualiser, commiter, pusher...
----
### Créer son projet RStudio
- New Project
- Version Control
- Git
- **Repository URL :**
- **Project directory name :**
- Create project as subdirectory of :**
----
### Les fichiers créés automatiquement
- **==`index.Rmd`==** : contient le contenu de la page d'accueil du site
- **==`about.Rmd`==** : contient le contenu d'une page web
- va pouvoir être dupliquée et adaptée
- **==`_site.yml`==** : contient des métadonnées pour le site Web
----
:::success
C'est suffisant pour créer un site web !
:::
----
### Le contenu de ces fichiers
----
**==`index.Rmd`==**
```{R}
---
title: "My Website"
---
Hello, Website!
For more information about simple R Markdown websites, please read the documentation at https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html.
Please also note that simple R Markdown sites are _not_ based on **blogdown**. They are probably good for websites with only a few Rmd documents. For larger-scale and more sophisticated websites (such as blogs), you may want to use **blogdown** instead: https://github.com/rstudio/blogdown.
```
----
**==`about.Rmd`==**
```{R}
---
title: "About This Website"
---
More about this website.
```
----
**==`_site.yml`==**
:::spoiler **output_dir**
Ajouter **`output_dir: "."`** au fichier d'origine pour que les fichiers s'enregistrent à la racine du projet. Utile pour le déploiement...
:::
```{yaml}
name: "monSiteWeb"
output_dir: "."
navbar:
title: "My Website"
left:
- text: "Home"
href: index.html
- text: "About"
href: about.html
- text: "coucou"
href: coucou.html
```
----
### Pour ajouter des pages
- créer un fichier `maNouvellePage.Rmd`
- le préciser dans le `_site.yml`
----
**==`maNouvellePage.Rmd`==**
```
name: "monSiteWeb"
output_dir: "."
navbar:
title: "My Website"
left:
- text: "Home"
href: index.html
- text: "About"
href: about.html
- text: "coucou"
href: coucou.html
- text: "Nouvelle page"
href: maNouvellePage.html
```
----
### Générer les pages du sites
- **`"Build"`** / `"Build website"`
Permet de générer (localement) toutes les pages du site web avec les dernières modifications enregistrées.
- **`"knit"`** génèrera la page "active"
----
- Les `markdown` seront transformés en HTML.
- les `Rmd` commençant par "_" ne sont pas compilés
- Les `HTML` générés et tous les fichiers de support (par exemple `CSS` et `JavaScript`) sont copiés dans un répertoire de sortie (`_site`).
---
### Présentation du dashboard du pôle EEC
- par Luigi Muzzolin
---
## Le déploiement
Liaison entre votre projet (répertoire local) et le repo distant `Github`
----
:::spoiler **Initialiser un dépôt `Git` dans son projet**
- Tools / Version Controls / Project Setup
(ou Tools / Project options... /)
- Git / SVN
- Version Control System
- Git
Restart RStudio
- Créer son projet Github
- rattacher projets github-RStudio
:::
:::spoiler **Créer son repo sur `Github`**
- Créer un compte `Github`
- Créer un `New repository`
- Repository name : `monSiteWeb`
:::
:::spoiler **Relier son projet à `Github`**
- copier l'url (en HTTPS) : `https://github.com/CTassart/monSiteWeb.git`
- icône `New branch`
- Add Remote...
- Remote Name : Par convention, `origin`
- Remote URL : coller l'URL `https://github.com/CTassart/monSiteWeb.git`
- Branch Name : `demoCommunautR` (par exemple)
(Il peut être nécessaire de faire un commit, au préalable)
:::
:::spoiler **déployer son site web**
(Si nécessaire, raffraîchir sa page - F5)
- Github
- Settings
- Github Pages
- Source : sélectioner `main`
- Récupérer l'url de votre site : `https://ctassart.github.io/monSiteWeb/`
- L'URL sera fonctionnelle d'ici 20 minutes
:::
:::spoiler **Actualiser son site**
- Avec RStudio
- commit
- à chaque ensemble de modifications, j'enregistre mes modifications avec un `commit` et un message explicite
- push
- régulièrement, je `push` pour pousser ces modifications sur le serveur distant `github`
:::
---
## Pour aller + loin
----
### Les éléments communs
Inclure divers éléments communs dans toutes les pages (options de sortie, styles CSS, éléments d'en-tête et de pied de page, etc.).
----
**`_site.yml`**
```{yaml}
name: "my-website"
navbar:
title: "My Website"
left:
- text: "Home"
href: index.html
- text: "About"
href: about.html
output:
html_document:
theme: cosmo
highlight: textmate
include:
after_body: footer.html
css: styles.css
```
----
**`footer.html`**
```{html}
<p>Copyright © 2016 Skynet, Inc. All rights reserved.</p>
```
----
**`style.css`**
```{css}
blockquote {
font-style: italic
}
```
---
### Ressources
:::spoiler **Créer son site Web avec R**
- [10.5 rmarkdown site generator](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html)
- [Nick Strayer & Lucy D'Agostino McGowan ](https://livefreeordichotomize.com/2017/08/08/how-to-make-an-rmarkdown-website/)
- [les dev de RStudio : Wickham, Yihui Xie...](https://garrettgman.github.io/rmarkdown/rmarkdown_websites.html)
- [Emily Zabor](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html)
:::
:::spoiler **Et d'autres packages R font (à peu près) la même chose...**
- [`blogdown`](https://bookdown.org/yihui/blogdown/a-quick-example.html)
- [`pkgdown` de hadley Wickham](https://pkgdown.r-lib.org/)
:::
:::spoiler **git & github**
- [R collaboratif - Formation Insee - version temporaire](https://linogaliana.gitlab.io/collaboratif/git.html)
- [utilitR - Configurer Git sur son poste de travail](https://www.book.utilitr.org/git-config.html)
- [UtilitR - Utiliser Git avec RStudio](https://www.book.utilitr.org/git.html)
- [happy Git with R](https://happygitwithr.com/)
:::
:::spoiler **HTML, CSS...**
- [MDN Mozilla](https://developer.mozilla.org/fr/docs/Web)
- [W3 School](https://www.w3schools.com/)
:::
:::spoiler **Des sites Web... plus ou moins aboutis**
- [Lucy D'Agostino Mc Gowan... statisticienne](https://www.lucymcgowan.com/)
- [Nick's website](http://nickstrayer.me/personal_site/index.html)
- [Emily Zabor : son package `ezfun`](http://www.emilyzabor.com/ezfun/)
- [Un exemple **Insee** : le Pôle EEC]()
- [Un exemple moins sérieux : un site de tennis de table... mais avec du CSS et des images](https://ctassart.github.io/beauvaloiTT/index.html) ([Code source](https://github.com/CTassart/beauvaloiTT))
:::
<style>
/*--------------- view ---------------*/
h2 {
color: white;
background-color:steelBlue;
text-transform: uppercase;
height: 100px;
}
h3 {
background-color:lightSteelBlue;
color: white;
text-align: left;
}
h4 {
color: lightBlue;
}
a{
font-size: 0.5em;
}
summary {
background-color: lightSteelBlue;
border-style: double;
border-color: white;
text-align: left;
font-size: 0.5em;
}
</style>
{"metaMigratedAt":"2023-06-16T05:08:13.661Z","metaMigratedFrom":"YAML","title":"Communauté R","breaks":true,"contributors":"[{\"id\":\"96d7712a-5877-442b-af40-756218ae1fa8\",\"add\":33411,\"del\":25056}]"}