🧑‍🎨 Connecter GitHub à VSCode - Créer un site gratuit - Épisode 3

John-Pierre Clark ·

Vous allez tout savoir sur :

Bienvenue sur ”Samedi Site” ! C’est le vrai e-mail des créateurs. Celui où on essaie de créer quelque chose ensemble 😁. Et notre premier projet est : 

🧑‍🎨 Créer un site internet qui vous coûtera rien !

Si vous avez raté les premiers épisodes :

Dans ces épisodes, vous allez apprendre à :

  • écrire votre code sur VSCode

  • envoyer votre code sur GitHub

  • publier votre code sur le web avec Netlify

  • mettre votre site internet en ligne gratuitement

Cette semaine, on va s’installer sur la plateforme gratuite GitHub et connecter GitHub à VSCode.

Si vous êtes vraiment intéressé par créer un site, cliquez bien sur le lien "j'ai fini cette étape" en bas de cette page.

Étape 0 - GitHub

Allez sur le site de GitHub >>

GitHub est une plateforme qui fait beaucoup de choses en rapport avec le développement seul ou en équipe. Ici, on va l’utiliser pour stocker notre code et l’envoyer sur le web.

C’est une des plateformes les plus connues. C’est le moment de créer votre compte gratuit.

Étape 1 - Cliquez sur “Sign up” en haut à droite :

cheese

Puis ajoutez votre e-mail, mot de passe ainsi que votre nom d’utilisateur. Puis tapez “n” pour ne pas recevoir d’offres promo.

cheese

Étape 2 - Choisissez vos caractéristiques

Combien de membres de votre équipe vont travailler avec vous ?

(How many team members will be working with you?)

Sur la prochaine étape, vous pouvez sélectionner : 

  • Just me (seulement moi)

  • Student (élève)

cheese

Puis coché les 2 premières cases : 

  • Collaborative coding (Code collaboratif)

  • Automation and CI/CD (automatisation).

cheese

Étape 3 - Finalisez votre compte

Puis choisissez le compte Free (gratuit) :

cheese

J’adore la petite intro de GitHub. On part vraiment dans l’espace !! 🧑‍🚀 🚀

cheese

Étape 4 - Créer votre token GitHub

Maintenant, que votre compte GitHub est créé, il faut créer votre Token personnel qui vous permettra de lier GitHub à VSCode.

Cliquez sur votre petit avatar profile en haut à droite, puis “Settings”

cheese

Puis en bas à gauche > Developer Settings

cheese

Cliquez sur “Personal access tokens” et “Generate new token”

cheese

Donnez un nom a votre token (quelque chose de simple que vous allez vous rappeler).

Modifier l’expiration à 90 days (90 jours).

cheese

Cliquez sur “Generate token” (Générer le token).

cheese
cheese

Copiez bien ce token sur votre ordinateur.

Voilà, ça, c’est pour l’installation de GitHub. Maintenant, on va créer notre premier projet. 

Étape 5 - Créez votre premier projet

Retournez sur la page d'accueil sur GitHub.

Sur GitHub, un projet se range dans un “repository” ou “repo.

En haut a gauche, cliquez sur "New".

cheese

Choisissez le nom de votre repo. Vous pouvez mettre le nom de votre site. Vous pourrez le changer plus tard.

Cliquez sur “Private”

Cliquez sur “Create repository”

cheese
cheese

GitHub c’est fait ! C’est un peu long, mais vous n’aurez vraiment pas à faire ça souvent.

Vous avez installé le compte et vous avez créé votre premier repo.

Bravo 🎉

Étape 6 - Installer GitHub Desktop

Vous avez crée votre compte GitHub, maintenant vous installer GitHub sur votre ordinateur.

Allez sur GitHub Desktop >>

Puis cliquez sur le bouton pour télécharger et installer GitHub Desktop.

cheese

Aujour'dhui vous avez :

  • crée un compte GitHub avec votre token

  • crée votre premier repo

  • installez Github Desktop

Si vous êtes coincé à n’importe laquelle de ces étapes, n’hésitez pas à me le dire en répondant à cet e-mail.

​​Cliquez ici, si vous avez fini cette étape >>

La semaine prochaine, on va enregistrer votre tout premier site sur GitHub, puis l’envoyer sur Internet avec Netlify ! 🚀

je me lance

💡 Idées business

🛋️ Lancer une maison de créateurs

🕺🏽 Opportunité TikTok - La différence avec l'algorithme d’Instagram ?

📷 Comment créer et publier sa première vidéo TikTok ?

🧑‍🚀 Créer mon business

👕 Exercice - Vendez un t-shirt en 15 minutes chrono !

😺 Exercice (15 min) - Lancez un compte Instagram Pro !

🏋️ Utilisez la même technique que l’équipe de Doctolib !

🚀 Trouver mes clients

🚀 Landing page - 7 blocs pour booster votre taux de conversion (dernier épisode)

🦸 Landing page - Optimisez votre Héros (épisode 2)!

🧐 Landing page - Optimisez votre en-tête (Épisode 1)

0

"chaque email m'inspire, merci !"

0

"c'est ma newsletter préférée, et de loin"

0

"j’économise des heures de recherches"