Contactez-nous

Etape 1 : Créer un fichier `index.html` simple localement

Apprenez à créer un fichier index.html simple sur votre machine locale, première étape essentielle avant de l'automatiser son déploiement avec Ansible.

La base de notre site : le contenu HTML

Avant de pouvoir automatiser le déploiement d'une application web, même la plus simple, nous avons besoin du contenu à déployer. Dans le cas d'un site web statique, le fichier le plus fondamental est généralement index.html. C'est ce fichier que les serveurs web recherchent par défaut lorsqu'un utilisateur accède à la racine d'un site.

L'objectif de cette première étape est donc de créer un fichier HTML minimaliste sur votre machine locale, celle qui vous sert de noeud de contrôle Ansible. Ce fichier servira d'artefact que nous déploierons ensuite sur un noeud géré via un playbook Ansible. La simplicité est de mise ici ; le but n'est pas de créer un chef-d'oeuvre de design web, mais de disposer d'un contenu tangible pour tester notre processus d'automatisation.

Ce fichier sera la "source de vérité" de notre page d'accueil. Ansible se chargera de le copier au bon endroit sur le serveur distant.

Structure et contenu du fichier index.html

Un fichier HTML de base comprend quelques balises essentielles : , , , et . La section contient des méta-informations comme le titre de la page (affiché dans l'onglet du navigateur) et peut inclure des liens vers des feuilles de style CSS ou des scripts JavaScript. La section contient le contenu visible de la page.

Pour notre exercice, nous allons créer un fichier très simple affichant un message de bienvenue. Vous pouvez utiliser n'importe quel éditeur de texte (VS Code, Notepad++, vim, nano, etc.) pour créer ce fichier.

Voici un exemple de contenu pour votre fichier index.html :




    
    Mon Premier Site avec Ansible
    


    

Page Déployée par Ansible !

Ceci est une page HTML simple servie par un serveur web configuré automatiquement.

L'automatisation est en marche !

Ce code inclut un titre, un message de bienvenue, et un peu de style CSS directement dans la balise