Depuis fin 2022, l’intelligence artificielle occupe une part importante dans la société, notamment grâce à ChatGPT d’OpenAI. Cantonnée à des secteurs très spécifiques et souvent utilisée de manière obscure par des entreprises vendant de l’IA sans en faire, elle devient accessible à tous, et c’est une vraie révolution.
ChatGPT offre d'infinies possibilités s'il est utilisé correctement. Ici, nous allons voir comment créer un site vitrine en une heure, à l’aide de quelques prompts et sans connaissances techniques particulières.
Prérequis
Il n’est pas nécessaire d’avoir de bonnes connaissances techniques pour réaliser un site vitrine avec ChatGPT, juste un ordinateur fonctionnel et un peu de logique.
Installation de Node.js
Assurez-vous d’avoir Node.js installé sur votre ordinateur. Sinon, rendez-vous sur Node.js et installez la version LTS.
Ouvrez un terminal et entrez cette commande `node -v` ; normalement, la version installée s’affiche.
Création du projet
Dans votre terminal, rendez-vous à l’endroit où vous voulez créer votre projet (commande `cd`).
Créez un dossier avec le nom de votre projet (commande `mkdir`).
Déplacez-vous dedans et exécutez `npm init`, appuyez sur entrée à chaque demande (vous pouvez aussi modifier les valeurs si vous le souhaitez).
Vous devez ensuite installer ExpressJS via la commande `npm install express`.
Dans le projet, vous allez créer la structure suivante : un dossier public contenant les dossiers css, html et js et un fichier index.js.
Pour un usage plus poussé de Node.js, je vous recommande ma formation QUALIOPI “Développer une application web à l’aide de Node.js”.
Création du site
Maintenant que notre projet est en place, nous allons nous rendre sur ChatGPT site de chatGPT et démarrer la création.
Un nouvel ami
Il convient de programmer un nouveau bot pour le rendre expert en création de site.
Ouvrez un nouveau chat et entrez le prompt suivant :
"Tu es un expert en création de site web, ton rôle est de m’aider à créer des sites web de bout en bout, ceux-ci devront respecter tous les standards du web, les requis SEO et l’utilisation bureau et mobile."
Maintenant, vous avez un bot opérationnel pour créer votre site.
La structure de base
Énormément de fournisseurs d’hébergement proposent des outils clés en main pour déployer des sites écrits avec Node.js, de plus l’utilisation de cette technologie fiable et robuste assure une grande stabilité.
La première étape est de créer le squelette du site. Tapez le prompt suivant dans votre bot:
"J'ai besoin que tu m'écrives le index.js d'un projet ExpressJs dont le but est de servir du HTML, idéalement. La page d'accueil sera sur /, il y aura une page de blog sur /blog, une page de formations sur /formations et une page contact sur /contact. Les HTMLs seront stockés dans un dossier /public/html, les CSS dans /public/css et les JS dans /public/js. Il faut aussi que Express soit capable de gérer les fichiers CSS et JS."
Le bot va vous fournir un fichier de code, copiez-le dans un index.js que vous aurez créé à la racine de votre projet.
Retournez sur GPT et entrez le prompt suivant:
"Pour déployer mon site, j'ai besoin que tu m'écrives le script de démarrage."
Suivez les instructions fournies par la réponse.
Dans votre terminal, exécutez la commande suivante : `npm start`, normalement, vous verrez votre application lancée sur un port particulier.
Dans votre navigateur, tapez ‘localhost:3000’, ceci utilisera votre nouveau site.
La page d’accueil
Maintenant, nous allons créer la page d’accueil du site, pour cela tapez le prompt suivant :
"Je souhaite que tu écrives le HTML de la page d'accueil, celui-ci doit inclure (dans l'ordre)
- Les balises meta de SEO Google et réseaux sociaux
- une barre de navigation contenant les éléments suivants : un logo, un lien vers le blog, un lien vers les formations, un lien vers le contact, et un bouton 'prendre rendez-vous'
- Une section principale contenant un titre H1 et un texte
- Une section secondaire avec un titre H2 et un texte
- Un footer contenant 2 liens pour l'instant non définis."
Copiez le résultat obtenu dans public/html/index.html
Pour son CSS, utilisez le prompt suivant:
"Je souhaite que tu écrives le fichier CSS de cette page. La charte graphique à respecter est la suivante :
- La barre de navigation a un background color noir et une couleur de texte blanche
- le bouton 'prenez rendez-vous' a un background color orangé et un texte noir
- Les éléments de la barre de navigations sont en display flex, le logo, le lien vers le blog, le lien vers les formations, le lien vers le contact sont centrés à gauche, le bouton est centré à droite
- La section principale a un background color de couleur blanc cassé, le texte est noir
- La section secondaire a un background color de couleur noire, le texte est blanc cassé
- Le footer a un background color de couleur noire, le texte est blanc cassé et les liens sont en display flex centré
- le texte des liens ne doit pas être décoré
- Il faut que l'ensemble soit responsive"
Et le résultat dans public/css/home.css
Pour finir, liez la page CSS à la page d’accueil en appliquant ce que vous dit GPT (avec un code HTML de ce type : `<link rel="stylesheet" href="css/home.css">`)
Actualisez la page de votre navigateur, votre site apparaît.
Le reste
Les autres pages
Pour la page blog, vous pouvez directement écrire ceci:
"Je souhaite que tu génères le HTML pour la page blog, celle-ci est une page de blog qui contiendra une liste d'articles consultables"
Et ceci pour le CSS
"Bien, maintenant écris le CSS de cette page"
Votre bot ChatGPT, reprenant l’historique de la conversation, va déduire ce que vous souhaitez et s’adapter.
Il ne faut surtout pas hésiter à demander à votre bot de retravailler certains points, par exemple, l’obliger à positionner le footer en bas de la page.
"J'aimerais que la taille minimum de la page soit égale à celle de la fenêtre du navigateur, ce qui permettra au footer de toujours apparaître en bas de page, expliquez-moi où je dois insérer les modifications."
Précautions
ChatGPT n’est pas omniscient, il peut se tromper, donc soyez humble et pensez à bien tester ce qu’il vous génère.
De plus, le code généré est un code de base, qui n’utilise pas les optimisations telles que SCSS, les outils comme React ou TypeScript. Vous pouvez aussi utiliser ChatGPT pour ce type d’optimisation.
Pour aller plus loin
La documentation de Mozilla est très complète concernant le HTML / CSS / JS https://developer.mozilla.org
Mon catalogue de formation QUALIOPI vous permettra d’avancer dans la compréhension du web.
https://css-tricks.com/ est un site très bien fait sur les ressources et le fonctionnement de CSS.