🧑🎨 Le grand final ! - Créer un site gratuit - Épisode 5
Vous allez tout savoir sur :
- 1/ Connectez-vous à GitHub desktop
- 2/ - Clone repo
- 3/ - Installer Node sur votre ordinateur
- 4/ - Gatsby / VSCode
- 5/ Aller, c’est le moment de voir votre premier site
- 6/ On plonge dans le code de départ.
- 7/ Mettez votre nouveau site en ligne
- 8/ Netlify
- 9/ Modifiez le site pour vérifier que tout est connecté
C’est la toute dernière étape de cette série sur “créer un site internet et le publier gratuitement sur le web”.
En suivant les étapes précédentes vous avez publié une simple page web en html gratuitement sur le web :
Épisode 1 - Créer un site - On install VSCode et on parle à notre ordinateur >>
Épisode 2 - Créer un site - On écrit le code de notre première page web >>
Épisode 3 - Créer un site - On ouvre un compte GitHub et on install GitHub Deskop >>
Épisode 4 - Créer un site - Publier votre page sur Internet >>
Aujourd’hui vous allez publier un site complet en Gatsby React.
React c’est le code qui a été créé par l’équipe de Meta (Facebook) et qui est aujourd’hui le plus utilisé pour toutes les applications web.
J’ai fabriqué un code de départ pour tous les membres de Createur. Dans ce guide, je vais vous montrer comment l’installer en quelques clics et comment la modifier pour l’adapter à vos besoins.
Pour pouvoir avoir accès à ce code, vous devez simplement m’envoyer votre user Github en répondant à cet email.
Voici à quoi votre site va ressembler si vous ne touchez à rien :
Site demo - code de départ Createur >>
1/ Connectez-vous à GitHub desktop
Si vous ne l’avez pas déjà fait, c’est le moment de vous connecter sur Github desktop.
Sur Mac :
GitHub Desktop > Preferences > Signup
Sur PC :
GitHub Destop > File > Options
2/ - Clone repo
File > Clone Repository
Une fois que votre compte Github à été validé de mon côté, vous allez voir “MonCreateur/monsite” apparaître dans la fenêtre “clone repository”.
En cliquant sur “Clone”, vous allez copier tout mon code sur votre ordinateur.
Choisissez “For my own purposes” et Continue.
3/ - Installer Node sur votre ordinateur
Installez NodeJS sur votre ordinateur en cliquant sur le lien suivant :
https://nodejs.org/en/download/
Lorsque NodeJS est installé, ouvrez un terminal dans VSCode pour vérifier votre version.
Si vous avez besoin d’un rappel sur le terminal, vous pouvez vous rendre sur l’épisode 1 de cette série.
Une fois le terminal ouvert, tapez :
node -v
Si vous voyez v16.13.2 (ou tout chiffre > v14.10.1), vous êtes prêt à passer à l’étape suivante.
4/ - Gatsby / VSCode
Dans VSCode, ouvrez le repo que vous avez cloné.
Dans le terminal, installez d’abord ’outil de commande de Gatsby en tapant :
Sur PC :
npm install -g gatsby-cli
Sur Mac :
sudo npm install -g gatsby-cli
Puis installez le code de départ “Createur” en tapant :
npm install
5/ Aller, c’est le moment de voir votre premier site
Dans le terminal et tapez :
gatsby develop
Attendez 30 secondes et allez sur : http://localhost:8000/
Et voilà vous avez votre site démo, installé sur votre ordinateur 😁
6/ On plonge dans le code de départ.
Ce site est à vous. Vous pouvez le modifier comme vous voulez.
Voici comment le modifier :
Explorer > /pages/index.js
Top
Dans /pages/index.js
Vous pouvez modifier chaque ligne dans ce code :
Vous pouvez aussi modifier la couleur de l’arrière plan :
/utils/globalStyle.js
Bouton réserver
Dans /pages/index.js
Vous pouvez modifier l’url de votre calendrier “calendly”
Témoignages 1
Dans /pages/index.js
Vous pouvez modifier les 3 témoignages dans le code suivant :
Audio Soundcloud
Dans /pages/index.js
Vous pouvez modifier l’url de votre soundcloud dans le code suivant :
Quoi
Dans /pages/index.js
Vous pouvez modifier l’url de votre soundcloud dans le code suivant :
Témoignages 2
Dans /pages/index.js
Vous pouvez modifier l’url de votre soundcloud dans le code suivant
Questions / Réponses
Dans /pages/index.js
Vous pouvez modifier l’url de votre soundcloud dans le code suivant :
Header
/components/Header/Header.js
/components/Header/menuitems.js
Footer
/components/Footer/index.js
7/ Mettez votre nouveau site en ligne
Donc je résume.
Vous avez cloné le code de départ
Vous avez installé NodeJs
Vous avez installé le code de départ avec Gatsby
Maintenant c'est le moment de publier votre nouveau site sur le web.
Faites une petite modification sur index.js. Je vous suggère de modifier “Top” avec un titre qui vous plaît mieux.
Une fois votre modification enregistrée, retournez sur Github Desktop et cliquez sur “create a fork”.
Puis “Fork This Repository”
Puis “For my own purposes”
Puis “Commit to main”
Puis “Push origin”
Voilà votre nouveau site a été envoyé sur Github. C’est le moment de le publier en ligne avec Netlify.
8/ Netlify
Retournez sur Netlify.com
Attendez quelques minutes et votre site sera en ligne !!
9/ Modifiez le site pour vérifier que tout est connecté
VSCode > pour modifier
Pour vérifier vos modifications, vous pouvez taper “gatsby develop” dans le terminal et dans votre navigateur :
Github Desktop > Commit to main + Push origin
Netlify > se mettra automatiquement à jour. Vos modifications prendront quelques minutes à s’actualiser.
