đ§âđš Le grand final ! - CrĂ©er un site gratuit - Ăpisode 5
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.