Mise en place de son micro site
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.
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.
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:
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!