Jekyll - Votre parternaire minceur

# Jekyll

## Votre partenaire minceur

### Cellenza, Bootcamp, 27 juin 2018

---
layout: false

## Agenda

### Vos questions

- Qu'est-ce qu'un site statique ?

- Comment en construire un ?

- Qu'est-ce que Jekyll ?

- Comment l'utiliser ?

- Qui l'utilise ?

- Où trouver des ressources ?

---
template: inverse

# Site statique

---

- Un site statique est constitué de fichiers HTML ordinaires

- C'est simple, propre, rapide, sécurisé et flexible

- C'est pratique, amusant et ça s'adapte à votre façon de travailler

- C'est hautement disponible et nécessite peu de maintenance

- C'est une réaction aux CMS .red[*]

---

- Les programmeurs

- Les marketers

- Les contributeurs open source

- Les documentations

- Les bloggers

- Les sites d'entreprise

---

- In 2008, Wordpress était omniprésent

- In 2018, Jekyll + Hugo + etc montent en puissance
    
    - Pourquoi ? Contrôle, séparation entre le contenu et la présentation
]

---

- Maintenance

- Complexité

- Performance

- Sécurité

- Coûts
]

---
template: inverse

# Comment construire un site statique

---

## Fonctionnement d'un site statique

1. Ecrire le contenu, **sans la présentation** (en Markdown avec Front-Matter pour les headers)

1. Créer des templates (navigation, etc...) pour héberger le contenu

1. Rendre le contenu et l'injecter dans les templates

1. Ecrire les fichiers HTML dans un répertoire de sortie

1. Fusionner, optimiser, minifier et copier les assets statiques tels que les images, les feuilles de styles ou les fichiers javascript dans le répertoire de sortie

---
## Générateurs de sites statiques

- Rendent le Markdown en HTML et appliquent les templates

- Disposent de fonctionnalités pour garder un markdown simple et propre :

- Raccourcis pour l'intégration de galeries photos l'inclusion de fichiers slides comme Slideshare

- Au final, *la plupart des sites peuvent être construits statiquement*

---
template:inverse

## Qu'est-ce que Jekyll ?

---

## Jekyll est un générateur de sites statiques

- Il existe des centaines de nombreux de sites statiques

- Les principaux sont [Jekyll](https://jekyllrb.com/), GitHub Pages (utilise Jekyll), [Hugo](https://gohugo.io/), et quelques autres

- Jekyll est écrit en [Ruby](https://www.ruby-lang.org/fr/)

* Jekyll est mature, puissant et flexible

* Il est populaire avec une très large communauté

* Facile à installer

* Apprendre toutes ses fonctionnalités prend un peu de temps

* Les performances sont inférieures à celles de [Hugo](https://gohugo.io/) par exemple

---
template: inverse

## Comment on l'utilise ?

---

## Démarrage rapide

```sh
gem install jekyll bundler
jekyll new myblog
cd myblog
bundle exec jekyll serve
```

1. Installer Ruby, Jekyll et Bundler
1. Créer un site: jekyll new myblog
1. Ajouter un thème comme Minimal Mistakes Jekyll
    1. Avec une gem
    1. En le copiant collant
1. Customiser la configuration du site
1. Créer une nouvelle page ou un nouveau post: touch posts/hello-world.md
1. Démarrer le serveur jekyll: bundle exec jekyll serve
1. Visualiser le site sur http://localhost:4000/
1. Pusher sur GitHub, héberger sur GitHub Pages, Netlify, S3, Azure Web Sites ou autres

---
template: inverse

## Qui l'utilise ?

---

## Moi

--
### GitHub

#### Vous.red[*]

---

* Utilisation de [minimal mistakes jekyll](https://mmistakes.github.io/minimal-mistakes/)

* [Algolia](https://www.algolia.com/) pour la recherche

* [Disqus](https://www.disqus.com/) pour les commentaires

* Optimisation d'images avec [Pngquant](https://pngquant.org/) et [ImageMagick](https://www.imagemagick.org/)

* Vérification des liens morts avec [Html Proofer](https://github.com/gjtorikian/html-proofer)

* Minification avec [minify](https://github.com/tdewolff/minify) (un outil en Go)

* Publication sur Azure avec [lftp](https://lftp.yar.ru/)

* Disponible sur [GitHub](https://github.com/johnthiriet/site/)
]

---

- Utilisation de [StaticMan](https://staticman.net/) pour les commentaires

- Optimisations diverses
]

---

## Et vous ?

---

## Ressources

- [Jekyll](https://jekyllrb.com/) et son [Quick-Start](https://jekyllrb.com/docs/quickstart/)

- [Jekyll Themes](http://jekyllthemes.org/)

- [Minimal Mistakes](https://mmistakes.github.io/minimal-mistakes/)

- [Netlify](https://www.netlify.com/), [Forestry](https://forestry.io/)

- [GitHub Pages](https://pages.github.com/)

- [Static Site Generators](https://staticsitegenerators.net/)

- [Mon site](https://johnthiriet.com) et [son code source](https://github.com/johnthiriet/site/)

- [Building Static Sites with Hugo](https://www.xaprb.com/slides/building-static-sites-with-hugo/), contenu qui a servi de base à cette présentation.

---

## Slides

Les slides sont disponibles sur [mon site](https://johnthiriet.com/presentations/cellenza-bootcamp-jekyll) ou alors scannez le QrCode

Contact: @johnthiriet 
- [Twitter](https://twitter.com/JohnThiriet)
- [LinkedIn](https://linkedin.com/in/JohnThiriet)