Mettre en page un site statique avec Jekyll et Github Pages

Choisir un thème officiel compatible Github page

Github pages propose une liste de thèmes compatibles à l’adresse : +https://pages.github.com/themes/ Afin de les utiliser, il faut suivre la procédure d’installation indiqué à l’adresse du dépot du theme choisi.

Dans notre cas, nous choisissons le theme tactile (un thème sobre et responsive) :

Installation du thème

Ouvrir le fichier “_config.yml” à la racine de votre site et ajouter le nom du thème :

theme: jekyll-theme-tactile

Pour que le thème soit actif aussi en local, vous pouvez modifier le “.gemfile”, en ajoutant : gem "github-pages", group: :jekyll_plugins, puis lancer
```
bundle update github-pages
```
Il faut enfin ajouter ou modifier le fichier “_layouts/default.html” en faisant un copier/coller du template présent sur le dépot en ligne d thèmé choisit. Dans notre cas :https://github.com/pages-themes/tactile/blob/master/_layouts/default.html
Le push une fois effectué, la page rafraichie et l’historique effacé, le nouveau thème devrait actif!

Remarques :

Si le thème précédent était ‘minima’, le thème par défaut chargé à la création du site, ces procédures ne sont pas suffisantes.
- Il faudra aussi effacer toute les références à “minima”, que ce soit dans le config.yml, about.md et gemfile.
- Il faudra aussi modifier les premières lignes de tous les articles et pages déja écrites en remplacant layout: post par layout: default

On remarquera alors que la page d’accueil n’affiche plus les liens vers les articles, comme pouvez le faire minima. Nous allons voir par la suite, comment mettre en page son site et récupérer boutons et fonctionnalités.

https://www.taniarascia.com/responsive-dropdown-navigation-bar/

https://learn.cloudcannon.com/jekyll/advanced-navigation/

Il va falloir créer un fichier “navigationTree.yml” qui va nous permettre d’ordonner les pages dans le menu. Ainsi à la racine du site :

mkdir -p _data
nano navigationTree.yml

On integre ensuite la liste des pages de notre site telle que :

- link: /
  name: Home
- link: /about/
  name: About
- link: /services
  name: Services

Puis dans le fichier _includes/navigation.html ( créé précédement pour la barre de navigation “simple” ), il faut insérer les lignes suivantes ;


 {% for item in site.data.navigation %}
    <a href="{{ item.link %}" {% if item.link == page.url %}class="active"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}

Personnaliser la page d’accueil d’un site statique sous Jekyll Le contenu de la page d’accueil se situe dans le fichier index.md

Afficher les derniers articles

Créer une nouvelle Page

Pour créer une nouvelle page, il suffit de copier la page “about.md” et de la renommée. Toutes les nouvelles pages doivent etre enregistrées à la racine du site.

Comment ajouter un sommaire ( TOC : Table of Content)

Avec krawdow sous github pages, il faut inserer dans l’article :

* TOC
{:toc}

Résultat :

Mettre en page un site statique avec Jekyll et Github Pages

Comment ajouter une image

![titre image](http://memofil.github.io/assets/image.png)

Comment insérer un lien vers une autre page de son site

Exemple d’un lien qui pointe vers cet article :

[--> Mettre en page un site satique]({% post_url 2017-06-04-Mettre-en-page-un-site-statique-avec-jekyll-et-github-pages %})

Résultat : Mettre en page un site statique

Comment insérer un bout de code sur une ligne

Pour avoir index.htlm , il faut entourer le mot par le caractère `, tel que :

`index.html`

Personnaliser le template avec Bootstrap

Installer Bootstrap pour Jekyll

Boostrap fonctionne nativement avec less, pour utiliser Bootstrap avec Jekyll qui utilise Sass, on doit installer Bootstrap-sass via les gem Ruby :

Install le gem bootstrap-sass :

sudo gem install bootstrap-sass

Se rendre à la racine du site jekyll et ajouter les lignes suivantes au fichier Gemfile :
```
gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '>= 3.2'
```
Afin de réinitialiser la configuration du site jekyll , taper :

bundle install

Créer un répertoire _sass à la racine du site ou seront stocké les templates .scss de Bootstrap
Télécharger le dépot bootstrap afin d’y récupérer les éléments necessaires à Jekyll pour pouvoir compiler les styles bootstrap. On déplacera alors le dossier assets/stylesheets/bootstrap et le fichier assets/stylesheets/_bootstrap.scss dans le dossier _sass tout juste créé.
Modifier le ‘_config.yml’ en y ajoutant les lignes (docs jekyll):

sass:
    sass_dir: _sass

Messages d’erreur:

The jekyll-theme-minimal theme could not be found

En tentant d’exécuter en local Jekyll avec la commande

bundle exec jekyll serve

On obtient

jekyll 3.4.3 | Error:  The jekyll-theme-minimal theme could not be found

Le thème est manquant. Il faut ajouter gem "jekyll-theme-minimal", "~> 0.0.3" au Gemfile et l’installer:

bundle install

Error: Could not locate the included file ‘icon-github.html’