Vous trouverez dans cet article, l’ensemble des éléments permettant de mettre en place un site web static en se basant sur les outils suivants :

• Hugo : Générateur de site web static
• Github : Service web d’hébergement et de gestion des sources de développements (utilisant l’outil Git)
• Travis CI : Service web permettant de tester et deployer les développements
• Gandi : Fournisseur du nom de domaine

Objectif

• Création d’un dépôt Github pour stocker les sources permettant de générer le site web static (documentation)
• Création d’un dépôt Github pour stocker les éléments du site web static (pragmatias.github.io)
• Configurer Travis CI pour déclencher la génération du site web static dans le dépôt pragmatias.github.io lors d’un commit dans la branche master du dépôt documentation
• Gestion du nom de domaine personnel chez Gandi pour afficher le site web static avec l’adresse pragmatias.fr

Code source

L’ensemble du code source de ce site se trouve sur mon dépôt github

Création des dépôts sur Github

Création du dépôt documentation

Pré-requis : avoir un compte sur Github

1. Sur la page listant vos dépôts, cliquez sur New

2. Renseignez le nom de votre dépôt qui contiendra les sources permettant de générer le site web et cliquez sur Create repository

3. Github vous affichera les étapes pour initialiser votre dépôt

Création du dépôt pragmatias.github.io

Il faut faire les mêmes étapes que pour la création du dépôt documentation mais cette fois avec le nom pragmatias.github.io.

Il faut créer au moins un fichier dans le dépôt pragmatias.github.io pour la suite de la configuration du dépôt.

Vous trouverez plus d’information sur le systeme Pages de Github sur le site officiel.

Si vous voulez modifier la configuration par défaut :

1. Allez dans la page Settings du dépôt pragmatias.github.io

2. Allez dans la section GitHub Pages pour configurer les informations nécessaires (custom domain, enforces HTTPS, …)

Lier Travis CI avec un dépôt Github

1. Connectez vous sur Travis CI avec votre compte Github

2. Allez dans Settings, puis dans Repositories et cliquez sur Manage repositories on Github

3. Sur Github, dans la section Repository access, ajoutez le dépôt documentation et cliquez sur Approve and install

Configuration des actions de Travis CI sur les dépôts Github

Gestion d’un jeton Github

Il faut commencer par créer un jeton Github permettant de donner le droit à Travis CI de faire la mise à jour du dépot cible.

1. Connectez vous sur votre compte Github, allez dans settings et cliquez sur Developer settings

2. Cliquez sur Personal access tokens, puis cliquez sur Generate new token

3. Remplissez le champ Tocken description, puis selectionnez les droits nécessaires (repo et gist) et cliquez sur Generate token

4. Copiez le code indiqué après la génération du jeton (il ne s’affichera qu’une seule fois)

5. Allez sur Travis CI et ajoutez le jeton avec le nom GITHUB_TOKEN et la valeur notée lors de l’étape précédente.

Création du fichier de configuration pour Travis CI

Pour pouvoir déployer automatiquement le site web à partir du dépôt documentation vers le dépôt pragmatias.github.com, il faut créer un fichier .travis.yml à la racine du dépôt documentation

 1# https://docs.travis-ci.com/user/deployment/pages/
 2# https://docs.travis-ci.com/user/reference/trusty/
 3# https://docs.travis-ci.com/user/customizing-the-build/
 4
 5dist: trusty
 6
 7install:
 8  - wget -O /tmp/hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.54.0/hugo_0.54.0_Linux-64bit.deb
 9  - sudo dpkg -i /tmp/hugo.deb
10
11before_script:
12    - rm -rf public 2> /dev/null
13
14# script - run the build script
15script:
16    - hugo
17
18deploy:
19  provider: pages
20  skip-cleanup: true
21  github-token: $GITHUB_TOKEN
22  verbose: true
23  keep-history: true
24  local-dir: public
25  repo: pragmatias/pragmatias.github.io
26  target_branch: master  # branch contains blog content
27  on:
28    branch: master  # branch contains Hugo generator code

Le contenu du fichier est le suivant :

• Utilisation de la distribution Ubuntu Trusty dist: trusty
• Recuperation et installation de l’outil Hugo pour Linux install: ...
• Suppression du répertoire public qui est le répertoire par défaut de génération de l’outil Hugo before_script: ...
• Exécution de l’outil Hugo script: ...
• Pour la partie déploiement :
• On défini que l’on souhaite déployer le contenu du répertoire public après exécution de la partie script dans le dépôt pragmatias/pragmatias.github.io
• On défini que l’on souhaite utiliser la branche master pour les deux dépôts (source et cible)
• On défini que la cible est Github Pages provider: pages

Utilisation d’un domaine personnel avec Github Pages

Note : J’utilise le nom de domaine pragmatias.fr chez Gandi

1. Dans les paramètres du dépôt pragmatias.github.io, renseignez la section Custom domain

pour forcer l’utilisation du https, sélectionnez l’option Enforce HTTPS

2. Modifier la section script du fichier .travis.yml

1# script - run the build script
2script:
3    - hugo
4    - echo "pragmatias.fr" > public/CNAME

3. Configurez votre domaine pour rediriger les utilisateurs vers le contenu des Pages du dépôt pragmatias.github.io

3.1. Allez sur le site de Gandi, cliquez sur Nom de domaine, puis sur le nom de domaine souhaité

3.2. Allez dans Enregistrement DNS pour modifier les enregistrements

3.3. Ajouter les enregistrements DNS suivants (pour faire la redirection entre le service Pages de Github et votre nom de domaine)

1@ 1800 IN A 185.199.108.153
2@ 1800 IN A 185.199.109.153
3@ 1800 IN A 185.199.110.153
4@ 1800 IN A 185.199.111.153
5www 10800 IN CNAME pragmatias.github.io

Attention à ne pas avoir d’autres lignes commençant par @ 1800 IN A ou par www

La modification des enregistrements peut mettre plusieurs heures à se propager pour être prise en compte.