Créer son environnement de développement avec Claude Code et GitHub

Pourquoi un environnement de développement quand on est marketeur

Il y a encore deux ans, créer un site web ou un outil interne sans savoir coder relevait de la science fiction. Aujourd'hui, avec Claude Code, un marketeur peut concevoir un site complet, automatiser des tâches et construire des outils sur mesure. La barrière technique n'a jamais été aussi basse.

Mais cette liberté nouvelle s'accompagne d'une responsabilité : travailler proprement. Publier du code directement en production sans filet de sécurité, c'est prendre le risque de casser son site à chaque modification. Perdre des heures de travail parce qu'on n'a pas sauvegardé correctement, c'est frustrant et évitable.

Un environnement de développement structuré, c'est exactement ce qui vous permet de créer en toute sérénité. Vous testez vos modifications avant de les publier, vous conservez un historique de tout ce que vous faites, et vous pouvez revenir en arrière à tout moment. C'est le setup que j'utilise au quotidien pour jessem.fr, et c'est celui que je recommande à tous mes clients qui se lancent dans la création avec l'IA.

Ce guide vous accompagne pas à pas, de l'installation de Claude Code jusqu'au déploiement automatique, en passant par GitHub et la sécurité. Aucune connaissance technique préalable n'est requise.

Installer Claude Code

Claude Code est un outil en ligne de commande (CLI) développé par Anthropic. Il fonctionne directement dans votre terminal et vous permet de dialoguer avec Claude pour écrire, modifier et organiser du code. Concrètement, vous lui décrivez ce que vous voulez en français, et il s'occupe de l'implémentation.

Installer Node.js

Claude Code nécessite Node.js pour fonctionner. Node.js est un environnement d'exécution JavaScript, mais vous n'avez pas besoin de comprendre ce que cela signifie techniquement. Il suffit de l'installer.

Rendez vous sur nodejs.org, téléchargez la version LTS (la version stable recommandée), et suivez l'installateur. Sur Mac comme sur Windows, c'est un simple fichier à ouvrir et quelques clics sur "Suivant". Pour vérifier que tout fonctionne, ouvrez votre terminal et tapez node --version. Si un numéro de version s'affiche, c'est bon.

Installer Claude Code

Une fois Node.js en place, l'installation de Claude Code se fait en une seule commande dans le terminal :

npm install -g @anthropic-ai/claude-code

Ensuite, placez vous dans le dossier de votre projet et lancez claude. L'outil vous demandera de vous connecter à votre compte Anthropic, puis vous pourrez commencer à travailler.

Le fichier CLAUDE.md

Avant de commencer à créer, prenez le temps de rédiger un fichier CLAUDE.md à la racine de votre projet. Ce fichier sert de mémoire et de guide pour Claude Code. Vous y décrivez votre projet, vos conventions, vos préférences. Par exemple : "Ce site utilise du HTML statique avec du CSS externalisé. Les couleurs principales sont le doré et le bleu nuit. Ne jamais utiliser de tirets dans les textes."

Ce fichier est lu automatiquement par Claude Code à chaque session. Plus il est précis, plus les résultats seront cohérents d'une session à l'autre. C'est un investissement de 30 minutes qui vous fera gagner des heures.

Comprendre et utiliser GitHub

Si vous travaillez sur un projet de code, même assisté par l'IA, GitHub est indispensable. Pour comprendre son utilité, pensons à une analogie simple.

Git, c'est le suivi des modifications dans Word, mais pour le code. Chaque fois que vous sauvegardez une version (on appelle cela un "commit"), Git enregistre exactement ce qui a changé. Vous pouvez revenir à n'importe quelle version précédente, comparer deux états de votre projet, ou annuler une modification problématique.

GitHub, c'est votre code stocké en ligne. Comme Google Drive pour vos documents, mais conçu pour le code. Votre projet est accessible depuis n'importe quel ordinateur, sauvegardé en sécurité, et vous pouvez collaborer avec d'autres personnes (ou avec Claude Code sur une autre machine).

Les commandes essentielles

Trois commandes suffisent pour le quotidien. Et la bonne nouvelle, c'est que Claude Code peut les exécuter pour vous si vous le lui demandez.

• git add . : prépare vos modifications pour la sauvegarde
• git commit -m "description" : enregistre une version avec un message qui décrit ce qui a changé
• git push : envoie vos modifications sur GitHub

En pratique, vous pouvez simplement dire à Claude Code : "commit et push mes modifications avec un message descriptif". Il s'en charge.

Créer un repository et connecter son projet

Un "repository" (ou "repo") est l'espace en ligne qui contient votre projet sur GitHub. Pour en créer un, rendez vous sur github.com, créez un compte gratuit, puis cliquez sur "New repository". Donnez lui un nom (par exemple "mon-site"), laissez le en privé si vous le souhaitez, et GitHub vous affichera les commandes à exécuter dans votre terminal pour connecter votre dossier local à ce repo. Là encore, Claude Code peut le faire pour vous.

Mettre en place un environnement de staging

Le staging est un concept fondamental que beaucoup de non développeurs découvrent trop tard, souvent après avoir cassé leur site en production. Le principe est simple : avant de publier vos modifications sur votre vrai site, vous les testez sur une copie.

Imaginez que votre site soit une vitrine de magasin. Vous ne réorganiseriez pas toute la vitrine pendant les heures d'ouverture, sous les yeux des clients. Vous prépareriez la nouvelle disposition dans l'arrière boutique, vérifieriez que tout est en place, puis vous feriez le changement d'un coup. Le staging, c'est votre arrière boutique numérique.

Comment le configurer

La méthode la plus courante consiste à créer un sous domaine dédié, par exemple staging.monsite.fr. Ce sous domaine pointe vers un dossier séparé sur votre serveur, qui contient une copie de votre site. Vous y déployez vos modifications, vous testez, et une fois satisfait, vous publiez sur le site principal.

Pour jessem.fr, j'utilise exactement ce setup avec staging.jessem.fr. Chaque modification passe d'abord par le staging avant d'atteindre la production. Cela m'a évité de nombreux incidents.

Protéger le staging

Votre environnement de staging ne doit pas être accessible au public ni indexé par les moteurs de recherche. Deux précautions essentielles :

• Un mot de passe : configurez une authentification basique (via le fichier .htaccess sur Apache) pour que seules les personnes autorisées puissent accéder au staging
• Un noindex : ajoutez une balise <meta name="robots" content="noindex, nofollow"> ou une règle dans le fichier robots.txt pour empêcher Google d'indexer votre version de test

Déploiement automatique avec GitHub Actions

Le déploiement, c'est le moment où votre code quitte votre ordinateur pour aller sur le serveur qui héberge votre site. Manuellement, cela implique de se connecter au serveur, de transférer les fichiers, de vérifier que tout fonctionne. Avec GitHub Actions, tout cela se fait automatiquement.

Le principe

Vous poussez votre code sur GitHub. GitHub détecte le changement et exécute un script que vous avez défini à l'avance. Ce script se connecte à votre serveur et y transfère les fichiers modifiés. En quelques secondes, votre site est à jour. Vous n'avez rien d'autre à faire que de pousser votre code.

Deux branches pour deux environnements

Le système repose sur deux branches Git :

• staging : quand vous poussez du code sur cette branche, il est déployé automatiquement sur staging.monsite.fr
• main : quand vous poussez sur cette branche (généralement en fusionnant depuis staging), le code est déployé sur votre site en production

Cette séparation vous donne un contrôle total. Vous développez et testez sur staging, et vous ne publiez en production que lorsque tout est validé.

Les secrets GitHub

Pour que GitHub Actions puisse se connecter à votre serveur, il a besoin de vos identifiants (adresse du serveur, nom d'utilisateur, mot de passe). Ces informations sensibles ne doivent jamais apparaître dans votre code. GitHub propose un système de "secrets" : des variables chiffrées stockées dans les paramètres de votre repository, accessibles uniquement par les scripts de déploiement.

SFTP : le transfert sécurisé

Pour transférer vos fichiers vers le serveur, privilégiez toujours le SFTP (Secure File Transfer Protocol) au FTP classique. La différence est simple : le SFTP chiffre tout le trafic, y compris vos identifiants. Avec le FTP standard, vos mots de passe transitent en clair sur le réseau. La plupart des hébergeurs modernes proposent le SFTP par défaut.

Les bases de la sécurité

Vous n'avez pas besoin de devenir expert en cybersécurité, mais quelques principes fondamentaux vous éviteront des problèmes sérieux.

Ne jamais publier de mots de passe dans le code

C'est la règle numéro un. Aucun mot de passe, aucune clé API, aucun identifiant ne doit apparaitre dans vos fichiers de code. Si vous utilisez GitHub, tout ce que vous poussez est potentiellement visible (même dans un repo privé, une erreur de manipulation peut tout exposer). Utilisez les secrets GitHub pour le déploiement, et des fichiers .env (ajoutés au .gitignore) pour le développement local.

Les headers de sécurité

Sur un hébergement Apache, le fichier .htaccess permet de configurer des en têtes de sécurité HTTP. Trois sont particulièrement importants :

• CSP (Content Security Policy) : définit quelles ressources externes votre site est autorisé à charger. Cela empêche l'injection de scripts malveillants
• HSTS (HTTP Strict Transport Security) : force les navigateurs à utiliser uniquement le HTTPS pour accéder à votre site
• X Frame Options : empêche votre site d'être intégré dans un iframe sur un autre domaine, ce qui protège contre le clickjacking

Claude Code peut vous aider à configurer ces en têtes. Il suffit de lui demander de générer un .htaccess sécurisé adapté à votre projet.

Le HTTPS

Le certificat SSL (qui active le HTTPS et le cadenas dans la barre d'adresse) est aujourd'hui indispensable. La plupart des hébergeurs le proposent gratuitement via Let's Encrypt. Si votre site n'est pas en HTTPS, Google le pénalise dans les résultats de recherche et les navigateurs affichent un avertissement "Non sécurisé" à vos visiteurs.

Auditer la sécurité avec le plugin Security Review

Mon astuce préférée : Claude Code dispose d'un plugin /security-review qui analyse automatiquement votre code et identifie les vulnérabilités potentielles. Avant chaque mise en production, lancez cette commande. Elle vérifie les failles courantes (credentials exposés, headers manquants, fichiers sensibles déployés par erreur) et vous donne des recommandations concrètes pour corriger. C'est exactement comme ça que j'ai identifié et corrigé les failles de sécurité sur jessem.fr avant le lancement.

Les mises à jour

Si votre projet utilise des dépendances (bibliothèques JavaScript, plugins), pensez à les mettre à jour régulièrement. Les failles de sécurité connues sont corrigées dans les nouvelles versions. Claude Code peut vous aider à identifier les dépendances obsolètes et à les mettre à jour en toute sécurité.

Conclusion

Mettre en place un environnement de développement structuré demande quelques heures d'investissement initial. C'est un effort modeste au regard de ce qu'il vous apporte : un historique complet de votre travail, un filet de sécurité avant chaque mise en production, un déploiement automatisé et des pratiques de sécurité solides.

Pour récapituler les étapes : installer Node.js et Claude Code, créer un repository GitHub, configurer un environnement de staging protégé, mettre en place le déploiement automatique avec GitHub Actions, et appliquer les bases de la sécurité. C'est exactement le workflow que j'utilise pour jessem.fr et que je mets en place avec mes clients.

L'IA rend le développement accessible à tous. Mais accessible ne veut pas dire approximatif. Avec le bon environnement, vous travaillerez aussi proprement qu'un développeur expérimenté, tout en gardant la vitesse et la flexibilité que Claude Code vous offre. Pour découvrir les outils IA que je recommande en complément, consultez mon article sur les 5 outils IA à connaitre en 2026. Et si vous envisagez votre premier projet d'intégration IA, commencez par mon diagnostic gratuit pour évaluer votre maturité.