"🛠️ La pile à coût zéro : Next.js, Vercel et GitHub"

#🛠️ La pile à coût zéro : Next.js, Vercel et GitHub

Ce trio constitue une combinaison puissante pour créer et déployer une présence Web professionnelle à un coût minime, voire nul. Il exploite une technologie de classe mondiale pour garantir que votre site est rapide, sécurisé et facile à entretenir.

| Composant | Rôle | Coût | Pourquoi c'est le meilleur choix | | :--- | :--- | :--- | :--- | | Suivant.js | Le Framework (Le code) | Gratuit (Open Source) | Hautes performances, excellent référencement et optimisation facile des images. Entretenu par Vercel. | | Vercel | L'hôte (le serveur) | Gratuit (Plan Hobby) | Déploiement sans configuration pour Next.js, CDN global pour la vitesse et SSL automatique. | | GitHub | La Source (Le stockage) | Gratuit (dépôts publics/privés) | Stocke votre code en toute sécurité et déclenche automatiquement les déploiements sur Vercel à chaque modification. |

#🚀 Étape 1 : configurez votre projet sur GitHub (gratuit)

Le code de votre site Web a besoin d’un emplacement, et c’est GitHub. Cette plateforme stocke en toute sécurité votre code et gère l'historique des versions de votre projet.

• Créez un compte GitHub : Si vous n'en avez pas, inscrivez-vous.
• Démarrez votre projet : Vous disposez de deux options principales :
  • Option A (recommandée pour les artistes) : utilisez un modèle. Recherchez « modèle de portfolio Next.js GitHub » (ou « modèle Vercel »). De nombreux développeurs talentueux proposent de superbes bases de code gratuites. Simplement « Fork » ou « Utilisez ce modèle » pour créer une copie dans votre propre référentiel. Cela vous fait gagner des semaines de codage.
  • Option B (pour les développeurs) : démarrez à partir de zéro. Exécutez npx create-next-app@latest localement et suivez les invites. Ensuite, transférez votre code local vers un nouveau référentiel GitHub vide.
• Cloner localement : Utilisez votre méthode préférée (VS Code, Git CLI) pour télécharger le référentiel sur votre ordinateur.

Étape suivante : Votre code est désormais stocké en toute sécurité et contrôlé en version.

#💻 Étape 2 : Créez et personnalisez avec Next.js (gratuit)

C'est ici que vous donnez vie à votre portefeuille. Next.js est un framework React qui facilite la création de sites Web rapides et modernes.

#Personnalisez le contenu :

Ouvrez le projet dans votre éditeur de code. Vous modifierez principalement des fichiers pour :

• Ajoutez votre propre texte sur la page À propos (/pages/about.js ou /app/about/page.js).
• Remplacez les images d'espace réservé par vos illustrations (souvent dans le dossier /public).
• Ajustez les liens de navigation.

#Ajoutez votre œuvre (la clé) :

1. Organisez vos meilleures pièces dans des dossiers.
2. Utilisez le composant Next.js <Image>. C'est crucial ! Il optimise automatiquement vos gros fichiers artistiques, les redimensionne et les diffuse dans des formats modernes (comme WebP) afin que votre site se charge rapidement sur n'importe quel appareil.

#Contrôle de version :

• Validez vos modifications : Une fois que vous avez effectué vos personnalisations, validez les modifications avec un message significatif (par exemple, git commit -m "J'ai ajouté mes cinq premières œuvres d'art").
• Push vers GitHub : Téléchargez vos modifications dans votre référentiel GitHub (git push origin main).

Étape suivante : Votre code final est prêt à être déployé.

#☁️ Étape 3 : Déployer avec Vercel (Hébergement gratuit)

Vercel est le créateur de Next.js, leur hébergement est donc parfaitement optimisé. Leur Hobby Plan est gratuit pour toujours et comprend tout ce dont un portefeuille a besoin.

1. Inscrivez-vous à Vercel : Accédez à Vercel et inscrivez-vous en utilisant votre compte GitHub. C’est la clé de la connexion gratuite et automatisée.
2. Importez votre projet :
   • Dans le tableau de bord Vercel, cliquez sur « Ajouter un nouveau » > « Projet ».
   • Sélectionnez votre référentiel GitHub dans la liste.
   • Vercel détectera automatiquement qu'il s'agit d'un projet Next.js. Vous pouvez généralement simplement cliquer sur "Déployer".
3. Votre URL gratuite est en ligne ! Vercel déploie instantanément votre site sur une URL gratuite (par exemple, « mon-site-artiste.vercel.app »).
4. Mises à jour automatiques : À partir de maintenant, chaque fois que vous envoyez un nouveau code vers votre branche principale sur GitHub, Vercel reconstruira et déploiera automatiquement votre site en quelques minutes. C'est la magie du déploiement continu (CI/CD).

Prochaine étape : Votre portfolio est désormais en ligne sur Internet, 100 % gratuitement.

---## 🌐 Étape 4 : Achetez et connectez votre domaine personnalisé (le seul coût)

La dernière étape consiste à connecter votre nom de domaine professionnel, comme « https://www.votrenom.com ». C'est la seule partie qui coûte de l'argent (généralement entre 10 et 20 dollars par an).

1. Achetez votre domaine : Achetez votre nom de domaine auprès de n'importe quel registraire (Namecheap, GoDaddy, Google Domains ou même directement via Vercel).
2. Connectez-vous à Vercel :
   • Dans les paramètres de votre projet Vercel, accédez à "Domaines".
   • Entrez votre nom de domaine acheté.
   • Vercel vous donnera un ensemble d'instructions simples (généralement un enregistrement A ou un enregistrement CNAME) à ajouter aux paramètres DNS de votre registraire de domaine.
3. Attendez et confirmez : Après avoir mis à jour vos paramètres DNS, Vercel vérifiera la connexion au domaine, souvent en moins d'une heure.

#🎉 Félicitations !

Votre portfolio d'artistes professionnels est désormais disponible sur votre domaine personnalisé, fonctionnant sur une infrastructure de classe mondiale pour un coût minime. Vous avez un contrôle total sur le code, des mises à jour automatiques et un site ultra-rapide pour présenter votre travail, le tout pour le prix de votre domaine.