Introduction
Le précédent blog était un simple wordpress avec un thème glané sur la marketplace. Pas personnalisable et pas dynamique, j’avais envie de créer mon propre site from scratch et d’appliquer toutes les notions acquises lors de ma reconversion en Administrateur Système Sécurisé.
Resté à choisir la stack. Soit un classique LAMP ou du Nodejs. J’ai opté pour la seconde tout en conservant wordpress. Je m’explique :
L’idée est de conserver wordpress pour l’édition d’article et de servir l’application nodejs via l’API REST (headless mode). En effet, Gutenberg est tout de même bien plus agréable pour rédiger un article plutôt que le html ! Vous comprenez maintenant le ‘overvmhx’ 😉.
On conserve donc le même nom de domaine mais ce dernier pointe à présent vers une application Nodejs que nous allons découvrir un peu plus loin dans cet article.
Le projet
Donc voici le plan :
WordPress
Première étape, lancer en local un serveur wordpress et importer le site original.
J’avais créé un script de backup : site + base de données mais ce n’est pas une bonne approche pour restaurer un site wordpress. Il vaut mieux installer la dernière version de wordpress nue et ensuite importer le site en .xml. Cela implique que le site orignal soit toujours en ligne.
Par défaut l’api REST est activé dans wordpress. Il est possible de s’en assurer en tapant ceci dans votre barre URL : https://monsite.fr/wp-json/wp/v2.
Pas besoin de theme ni d’extension on rédige, on relis et on publie. La mise en page sera gérée par le frontend.
Frontend
Étant novice dans le Javascript, autant dire que l’on rentre dans le dur ! J’ai commencé par créer les routes, la récupération des articles et enfin le fronted. Le site utilise Axios pour gérer les requêtes API. D’ailleurs ce fut une vrai galère à mettre en place la gestion des articles protégés par mot de passes, mais tout fonctionne pour votre plus grand plaisir.
Features
Je ne sais pas si vous avez déjà ressenti cela mais lorsque l’on code et que cela fonctionne, on se sent vite pousser des ailes. L’impossible devient possible. J’ai donc voulu ajouter des fonctionnalités. La première, l’intégration d’une page Phish. Cette dernière utilise phishtank pour vérifier si une URL est dans leurs base de données. Le site vous renvoi la réponse.
J’ai également ajouté dans la section à propos le nombres d’articles publié et mes statistiques HackTheBox. Le tout récupéré dynamiquement via les API respectives.
L’hébergement
Pour l’hébergement ? Et bien c’est @home dans Proxmox sur deux containers LXC qui sont derrières un Nginx Proxy Manager. J’ai découvert cet outil à l’occasion de ce projet et c’est top. Gestion des certificats SSL, compatible avec DNS challenge CLoudflare, redirection…Un indispensable pour l’auto-hébergement.
Conclusion
Pour conclure ce fût un projet très intéressant et surtout complet. J’ai du aborder le JavaScript, la virtualisation, la mise en réseau, génération de certificat SSL, le hardening…Alors évidemmment le site n’est pas parfait. Il reste encore beaucoup à faire (responsive, avoir fichier CSS propre…)et à ajouter. Mais ce sera mon fil rouge. Alors à très vite sur le site pour les nouveautés et les évolutions.
Cyberfishement 🐡