09/2022 ⋅ Marc Chevaldonné

Vous cherchez à créer un nouveau dépôt pour votre projet HTML CSS ?
Vous aimeriez profiter des capacités d’analyse de code de Sonarqube ?
Alors ce tutoriel est fait pour vous !

• D’abord, nous allons montrer comment créer un nouveau dépôt HTML / CSS à partir d’un template fourni.
• Ensuite, nous montrerons comment synchroniser Sonarqube, drone et gitea, afin que vous puissiez lancer l’analyse de code à chaque fois que vous exécutez la commande “git push”.

C’est parti !

Création du dépôt

• Rendez-vous sur Code#0 et identifiez-vous.
• Puis allez sur la page Gitlab de Code#0.

Votre dépôt est maintenant créé et contient :

• un fichier html index.html,
• une page de style css mycoolstyle.css,
• un fichier README.md permettant de présenter brièvement votre projet,
• un fichier .gitignore pour éviter d’ajouter involontairement des fichiers inutiles, compilés ou binaires,
• un dossier images dans lequel une seule image est placée,
• et surtout, un fichier .gitlab-ci.yml qui est celui qui vous permettra de lancer le pipeline d’intégration continue et de déploiement.

Configuration CI/CD pour votre projet

Afin de pouvoir déployer votre site web HTML sur CodeFirst, vous devrez ajouter une variable secrète (NAMESPACE_TOKEN) dans les paramètres de CI/CD de votre dépôt. Pour ce faire, vous pouvez suivre la page du tutoriel sur comment récupérer le token (c’est comme un mot de passe secret) lié à votre espace de noms personnel : Générer et voir le token. La dernière opération que vous devrez faire est de copier sa valeur dans Gitlab en suivant cette documentation.

Vous avez aussi besoin d’une deuxième variable SONAR_TOKEN, si vous ne savez pas comment générer votre token vous pouvez suivre ce tutoriel.

La première fois, quand votre dépôt est tout neuf, le pipeline n’est pas créé automatiquement. Il sera automatiquement créé lorsque vous aurez fait votre premier push.

Il est composé de trois tâches :

• La première anaylse votre code et publie le résultat sur SonarQube.
• La seconde appelée push pour construire votre image docker et la pousser vers votre registre de projet.
• La troisième pour déployer un conteneur docker de votre image précédemment construite.

C’est fini !

Maintenant vous avez un pipeline fonctionnel. À chaque fois que vous modifierez la page html, ou la feuille de style, l’analyse de code sera automatiquement relancée !

Et mon site web, où est-il ?

Nous avons ajouté au pipeline la création d’un conteneur qui stockera votre site web. Ainsi, à chaque modification, les fichiers seront transférés vers le conteneur. Ce conteneur se comporte comme un simple serveur. Donc, en accédant à ce conteneur, vous pourrez visualiser votre site web comme s’il était déployé chez un hébergeur. Tout est prêt.

Pour trouver l’URL d’accès de votre conteneur, utilisez le Developer Portal avec ce guide. Collez l’URL dans votre navigateur et profitez-en !

September 09, 2022 - Marc Chevaldonné
October 01, 2023 - Cédric Bouhours
August 14, 2025 - Camille Petitalot
Septembre 16, 2025 - Cédric Bouhours