Free vient d’activer une fonctionnalité pour sa Freebox Delta permettant l’hébergement de Machines Virtuelles (en anglais : Virtual Machines – VMs). Les détails sur cette mise à jour sont disponibles sur le site de la Freebox.

Suite à cette annonce, j’ai pensé qu’il était intéressant de migrer l’hébergement de mon site personnel de GitHub sur mon propre serveur (littéralement chez moi).

Dans la suite de cet article, je présenterai le système mis en place pour l’hébergement de ce site sur ma Freebox.

N.B. Les opérations décrites ici peuvent s’appliquer sur presque n’importe quel système Linux, indépendamment d’une Freebox.

Prérequis

Une Freebox Delta

Avant de commencer, il faut d’abord une Freebox Delta :) avec une VM opérationnelle.

VM installé sur votre Freebox

Debian logo

Pour des raisons idéologiques, j’ai choisi une VM avec Debian. Pour la suite, vous pouvez choisir n’importe quelle distribution Linux.

Je ne vais décrire ici la démarche à suivre pour l’installation d’une VM sur la Freebox car il y a d’excellent tutoriels traitants le sujet. Celui d’Inpact Hardware est très simple à suivre : Machines virtuelles et Freebox Delta : création et hébergement de votre première page Web.

Mise en Place

Solution de Blog

Mes besoins en termes de site personnel sont de pouvoir me présenter, partager mes publications et de partager quelques articles (plutôt techniques).

Il existe plein de solutions pour mettre en place des sites Web allant du plus simple comme écrire directement les pages en HTML, au plus compliqué avec les solutions de CMS.

J’ai opté pour une solution intermédiaire la génération de site statique. Ces solutions permettent d’avoir les avantages des CMS pour la rédaction, l’organisation, la mise en page, … en laissant souplesse d’extension et de modification d’une implémentation HTML.

Parmi toutes les solutions de générateur de site statique, j’ai choisi Jekyll.

Jekyll Logo

J’ai essayé d’autre générateur comme Pelican (utilisé pour la version précédente de ce site) ou Hugo. Mais, Jekyll reste le plus simple à mettre en place et le plus facile à utiliser / faire évoluer.

Configuration & Installation

Avant de se lancer dans la publication de votre site, il faut faire quelques installations systèmes sur votre machine locale (votre PC ou votre Mac) et sur votre VM.

Installation sur votre PC/Mac

Il faut aussi installer Jekyll sur votre machine pour valider votre site avant publication sur la VM. Jekyll propose des guides pour les principaux systèmes d’exploitation : Installation.

Installations sur la VM

  • Mise à Jour

Avant tout, il est important de mettre à jour le système de la VM. En effet, l’image de base peut de dater de quelques jours qu’il faut déjà appliquer des mises à jour :

$ sudo apt update
$ sudo apt full-upgrade
$ sudo apt autoremove

Debian est réputé pour son système de gestion des packages : apt.

  • Jekyll

La première étape est d’installer Jekyll sur la VM : Jekyll on Ubuntu.

Si vous utilisez Zsh comme shell Unix (plutôt que bash – par défaut), il faut ajouter des variables d’environnements pour le bon fonctionnement de Jekyll :

$ echo '# Install Ruby Gems to ~/gems' >> ~/.zshrc
$ echo 'export GEM_HOME="$HOME/gems"' >> ~/.zshrc
$ echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc
  • Apache HTTP Server

Pour servir vos pages Web, il faut un serveur HTTP. Le plus populaire est Apache HTTP Server.

Son installation se fait tout simplement par le gestionnaire de packages :

$ sudo apt install apache2

L’installation peut prendre quelques minutes, puis votre serveur sera démarré. Pour valider l’installation, il suffit de saisir l’adresse IP de votre VM dans un navigateur, pour moi : http://192.168.0.45

Pour connaître l’adresse IP de votre VM, il faut vous rendre sur le portail d’administration de votre Freebox et dans le panneau de contrôle des VMs :

Feebox VM Adresse IP

Déploiement Automatique

Maintenant, vous devez avoir une installation Jekyll en local sur machine et un serveur prêt à héberger votre site dans votre VM.

Dans cette partie, je vais vous présenter une méthode pour simplement déployer votre site Web de votre machine locale vers votre VM qui l’exposera sur Internet.

Jekyll propose plusieurs manières d’automatiser les déploiements. Dans mon cas j’ai choisi une méthode simple avec Git (l’outil de gestion de code source).

Il faut en faire l’installation sur machine locale : https://git-scm.com/downloads

L’installation est très simple sur la VM :

$ sudo apt install git

Jekyll propose un très bon guide pour mettre en place la synchronisation : https://jekyllrb.com/docs/deployment/automated/

J’ai dû faire quelques ajustements à ce guide :

votre_machine_locale$ ssh ma_vm
vm$ mkdir mon-site.git
vm$ cd mon-site.git
vm$ git --bare init
vm$ touch hooks/post-receive
vm$ chmod a+x hooks/post-receive
vm$ sudo chown -R mon_user:mon_user /var/www/html

Le script ~/mon-site.git/hooks/post-receive est à créer comme suit :

#!/bin/bash -l

# Install Ruby Gems to ~/gems
export GEM_HOME=$HOME/gems
export PATH=$GEM_HOME/bin:$PATH

GIT_REPO=$HOME/alexdico-com.git
TMP_GIT_CLONE=$HOME/tmp/myrepo
GEMFILE=$TMP_GIT_CLONE/Gemfile
PUBLIC_WWW=/var/www/html

git clone $GIT_REPO $TMP_GIT_CLONE
BUNDLE_GEMFILE=$GEMFILE bundle install
BUNDLE_GEMFILE=$GEMFILE JEKYLL_ENV=production bundle exec jekyll build -s $TMP_GIT_CLONE -d $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit

Sur votre machine locale :

votre_machine_locale$ git remote add deploy deployer@ma_vm:~/mon-site.git

Maintenant, la commande qui déploiera les mises à jour de votre site sur le serveur et les rendra disponible sur Internet.

Pour déployer votre site :

votre_machine_locale$ git push deploy master

Pour valider, il vus suffit de taper l’adresse IP de votre VM dans votre navigateur.

Nom de Domaine (Pour les utilisateurs avancés)

Attention : cette partie s’adresse plutôt à des utilisateurs sachant ce qu’ils font.

IP Fixe

Votre site Web est maintenant publié sur le serveur. Je vais vous montrer comment le rendre publique sur Internet.

La première se passe sur espace abonné Free pour obtenir une adresse IP fixe. Sans une adresse IP fixe, vous ne pourrez pas exposer votre sur les ports http et https standards (80 et 443). Dans votre espace : MA FREEBOX -> Fonctionnalités avancées -> Demander une adresse IP fixe V4 full-stack

Au bout de quelques minutes, vous aurez une adresse IP fixe pour votre Freebox.

Ensuite, vous devez paramétrer la redirection des ports 80 & 443 par portail d’administration de votre Freebox dans la partie réseau - redirection port. Il faut mettre en place les deux redirections (80 & 443) vers la VM, comme ceci :

Freebox Redirection de Port

Normalement, votre site est accessible par Internet avec votre adresse IP fixe. Pour moi : http://82.64.166.214

Nom de Domaine

Si vous avez un nom de domaine (sinon OVH est très bien pour en acquérir).

C’est encore dans votre espace abonné que vous pourrez configurer votre DNS.

Avec mon DNS : http://www.alexdico.com

SSL

Il est bien d’exposer son site Web de manière sécurisé avec un certificat SSL.

Grâce à un projet Open Source, il est facile d’obtenir son certificat SSL valide : Let’s Encrypt

L’opération est assez simple et est à réaliser dans la VM :

$ git clone https://github.com/letsencrypt/letsencrypt
$ cd letsencrypt
$ ./letsencrypt-auto

Conclusion

Voilà votre site Web est en ligne !

Quelques remarques :

  • Il ne faut pas oublier de se connecter de temps en temps sur votre VM pour effectuer les mises à jour de sécurité.
  • Pour les sauvegardes, la solution présentée ici vous permet d’avoir une copie du site en locale sur votre machine et une autre sur le serveur. Vous pouvez revenir sur des versions précédentes facilement grâce à Git. S’il faut réinstaller la VM, vous avez cette page !