Mise en place de son micro site

 · 10 min read
 · Johann
Table of contents

Avant d'aller plus loin dans la technique...

Le but de cet article est de mettre en place une page statique, un micro site...appelez ça comme vous voulez.

Divisé en deux parties, nous allons voir comment déployer son site via Hugo. Suivra une seconde partie qui s'attardera sur comment sécuriser le tout via crowdsec.

Dans mon cas j'avais besoin d'une page "CV" qui mentionne mon parcours et mes coordonnées. Je n'ai pas spécialement le souhait que ce site soit référencé sur les moteurs de recherches - l'idée est simplement de permettre à mes interlocuteurs de trouver les infos qui les intéressent à travers une page unique - je n'aborderai donc pas ce sujet.

Déploiement d'un site web

Hugo, ton nouveau meilleur pote

Hugo est défini sous les paquets Debian comme un "générateur de site statique flexible et rapide écrit en Go".

J'ai découvert celui ci grace à la communauté Linux, et il fait parfaitement l'affaire.

Hugo

La simplicité de prise en main

Pour l'installation, rien de bien sorcier:

apt install hugo

Une fois le déploiement fait, vous pourrez valider la version déployée via la commande

hugo version

Ensuite rendez vous dans un répertoire qui contiendra votre architecture de test de votre futur site.

Attention évitez de vous faire avoir comme moi, et d'aller directement dans /var/www/html/, il est essentiel d'avoir un répertoire local différent de celui de déploiement définitif

cd /var/tmp/site/

# création du premier site
hugo new site cv

Un répertoire cv sera créé

root@debian-routeur:/var/tmp/cv# ls -l
total 36
drwxr-xr-x 2 root root 4096  4 nov.  11:02 archetypes
-rw-r--r-- 1 root root  103  4 nov.  10:20 config.toml
drwxr-xr-x 2 root root 4096  4 nov.  10:18 content
drwxr-xr-x 2 root root 4096  6 nov.  19:35 data
drwxr-xr-x 2 root root 4096  4 nov.  10:18 layouts
drwxr-xr-x 3 root root 4096  4 nov.  10:21 resources
drwxr-xr-x 3 root root 4096  4 nov.  10:23 static
drwxr-xr-x 3 root root 4096  4 nov.  10:19 themes

Pour l'instant le site est au format brut, pour y ajouter un thème dans la grande majorité des cas il faudra importer celui ci d'un dépôt git

Les thèmes

Le seul reproche qu'on pourrait faire à Hugo, c'est qu'il y a pas mal de versions de retard entre celle proposée sur les dépots des différentes distributions Linux (dans mon cas Debian Bullseye propose la 0.80.0-6+b5) et celle proposée par l'éditeur.

Il y a toujours la solution d'aller taper sur le dépôt git officiel, sans trop d'explications rationnelles je préfère pour ma part m'appuyer sur les paquets Debian.

En résulte que j'ai dû fouiller les entrailles du web pour trouver un thème qui soit compatible avec une 'vieille' version et qui me convienne. Tous ceux que j'ai testé au préalable n'étaient pas compatibles avec cette version de l'outil, un peu galère donc.

Une fois qu'on a trouvé son thème, il suffit de l'importer donc depuis le dépôt git adéquat

git submodule add https://github.com/calintat/minimal.git themes/minimal

Ici le thème minimal sera ajouté au répertoire themes, jusqu'ici vide. Vous pouvez ajouter autant de thème que souhaité, il suffit ensuite de basculer de l'un à l'autre en modifiant le fichier de config

Pour obtenir un site avec un peu de contenu rapidement, recopier le répertoire exampleSite dans la racine du site.

cp -r themes/minimal/exampleSite/* ./

A minima sera copié le fichier config.toml, et les répertoires data et content

Enfin reste à modifier le fichier de configuration

baseURL = "https://monurl/"
languageCode = "fr-fr"
title = "CV en ligne"
theme = "minimal"

Dernière étape, le test du site. Très pratique pour tester le thème, la mise en page, et l'accès au contenu.

hugo server

Le site sera accessible en local sur le port 1313, d'ailleur l'ami Hugo l'indique lorsqu'on lance la commande, sympa le mec.

Test Local

Jusqu'ici nous avons:

  • ajouté un thème
  • copié son contenu à la racine du site
  • paramétré le fichier de configuration
  • lancé le site en local pour test

Vous pouvez jouer avec les autres options, très bien décrites via la commande

hugo -h

J'ai donc trouvé un thème qui me correspondait bien. J'ai modifié quelques balises, rajoutés des entrées et des couleurs, et hop en quelques heures (un webmaster obtiendrait le même résultat en certainement quelques dizaines de minutes...) j'obtiens un truc qui me convient:

Test Final

Mise en ligne

Il est nécessaire d'obtenir un répertoire public depuis Hugo, on copiera son contenu simplement dans /var/www/html/site_profil/ pour ensuite l'ouvrir à travers Apache.

C'est très simple, c'est la commande hugo:

root@debian-routeur:/var/www/html/site_profil# hugo
Start building sites 
WARN 2023/01/14 17:56:43 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2023/01/14 17:56:43 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN
-------------------+-----
  Pages            |  5
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  7
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 21 ms

Hop, magie un répertoire public a été créé, il y a également des alertes sur lesquelles j'avoue ne pas m'être penché. Cependant dans mon cas, tout fonctionne impec'.

*Une petite parenthèse, si vous n'avez pas ou ne souhaitez pas auto héberger votre micro site, vous pouvez passer par l'hébergement github.

Vous trouverez de nombreux sites qui indiquent la marche à suivre, celui ci est particulièrement pertinent:

https://www.techonsunday.com/posts/creer-un-site-avec-hugo-et-le-deployer-sur-netlify/

Apache

Il va désormais falloir s'appuyer sur un gestionnaire de page web pour héberger de manière pérenne notre site web.

Je m'appuie sur Apache2, je ne rentre pas dans l'installation de l'outil, si vous vous en savoir plus c'est par ici par exemple mais il y a des dizaines d'articles que vous trouverez sans difficulté.

Déploiement de mon sous domaine

J'ai choisi de rediriger un sous domaine vers mon nouveau micro site, ça se fait en quelques lignes sous Apache2.

  • redirection http > https

Il y a de nombreuses manières de faire, peut être la plus simple est d'indiquer à apache que toutes les requêtes sur le sous domaine indiqué sur le port 80 seront redirigés vers le port 443.

nano /etc/apache2/sites-available/000-default.conf

<VirtualHost *:80>
  ServerName monsite.net
  ServerAlias sousdomaine.monsite.net

  RewriteEngine on
  RewriteCond %{SERVER_NAME} =sousdomaine.monsite.net [OR]
  RewriteCond %{SERVER_NAME} =monsite.net
  RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

Donc tout ce qui arrivera en http, sera redirigé vers https.

  • création du virtualhost:

Activons donc un virtualhost sur le port 443, toujours dans le même fichier:

<VirtualHost *:443>
  ServerName monsite.net
  ServerAlias sousdomaine.monsite.net
  ServerAdmin johann@monsite.net

  Protocols h2 http/1.1

  DocumentRoot /var/www/html/site_profil
  <Directory "/var/www/html/site_profil">
        Options +FollowSymLinks
        AllowOverride all
        Require all granted
  </Directory>
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

Dans l'immédiat, même si on peut tester la configuration apache, le site ne sera pas accessible. En effet qui dit https dit génération d'une paire de clé pour accèder en TLS, ce qui n'est pas encore le cas.

Tournons nous vers l'outil désormais incontournable

Let's Encrypt

Dans l'ancien temps, pour avoir un site accessible de manière sécurisée, il fallait acheter un certificat.

Ce temps désormais révolut avec l'arrivée de Let's Encrypt, une autorité de certification à but non lucratif.

L'Electronic Frontier Foundation (EFF) à mis à disposition un outil nommé certbot permettant de générer de manière très simple un certificat pour Let's Encrypt, et cerise sur le gâteau il peut interargir avec Apache2 sans trop de problème.

Pour l'installer, rien de complexe:

apt install certbot

Puis on génère notre couple de clés publique / privée

certbot --apache -d sousdomaine.monsite.net

Dans l'exemple ci dessus, je génère un certificat mon pour sous-domaine, et lui indique qu'il est géré par Apache. Le grand intérêt est que certbot va ajouter à mon fichier de configuration les lignes suivantes:

Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/sousdomaine.monsite.net/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/sousdomaine.monsite.net/privkey.pem

La configuration est complète, j'activer mon site

a2ensite 000-default

Le site est en ligne, redirigé en TLS et le certificat est valide et reconnu par mon navigateur.

Renouvellement automatique

Les certificats Let's Encrypt sont valides trois mois. Si vous ne souhaitez pas vous mettre un petit rappel pour à chaque fois avoir à renouvellement manuellement votre certificat, vous pouvez simplement créer une tâche cron du genre:

nano /etc/cron.d/certbot

0 */12 * * * root test -x /usr/bin/certbot -a \! -d /run/systemd/system && perl -e 'sleep int(rand(43200))' && certbot -q renew

Cette ligne lancera l'outil certbot, qui va renouveler si nécessaire le certificat de votre site.

Pour conclure

Nous sommes au bout de la première partie. Nous avons déployé grâce à Hugo un site statique, puis nous l'avons mis en ligne via apache et certbot pour la partie chiffrement.

Gardons à l'esprit qu'il n'y a pas de bases de données, donc les failles par exemple de type XSS ne sont pas exploitables, et aucune requêtes post ne peuvent être envoyées.

Ce n'est que de la consultation. Cependant ça nous empêche pas d'apporter une (grande) couche de sécurité supplémentaire, que nous allons faire avec l'outil crowdsec. La suite bientôt donc!