🧑‍🎨 Le grand final ! - Créer un site gratuit - Épisode 5

John-Pierre Clark ·

Vous allez tout savoir sur :

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 :

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

cheese

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

cheese

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.

cheese

Choisissez “For my own purposes” et Continue.

3/ - Installer Node sur votre ordinateur

cheese

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

cheese

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

cheese

Puis installez le code de départ “Createur” en tapant :

npm install

cheese

5/ Aller, c’est le moment de voir votre premier site

Dans le terminal et tapez :

gatsby develop

cheese

Attendez 30 secondes et allez sur :  http://localhost:8000/

Et voilà vous avez votre site démo, installé sur votre ordinateur 😁

cheese

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

cheese

Dans /pages/index.js

Vous pouvez modifier chaque ligne dans ce code :

cheese

Vous pouvez aussi modifier la couleur de l’arrière plan :

/utils/globalStyle.js 

cheese

Bouton réserver

cheese

Dans /pages/index.js

Vous pouvez modifier l’url de votre calendrier “calendly”

cheese

Témoignages 1

cheese

Dans /pages/index.js

Vous pouvez modifier les 3 témoignages dans le code suivant :

cheese

Audio Soundcloud

cheese

Dans /pages/index.js

Vous pouvez modifier l’url de votre soundcloud dans le code suivant :

cheese

Quoi

cheese

Dans /pages/index.js

Vous pouvez modifier l’url de votre soundcloud dans le code suivant :

cheese

Témoignages 2

cheese

Dans /pages/index.js

Vous pouvez modifier l’url de votre soundcloud dans le code suivant

cheese

Questions / Réponses

cheese

Dans /pages/index.js

Vous pouvez modifier l’url de votre soundcloud dans le code suivant :

cheese

Header

cheese

/components/Header/Header.js

/components/Header/menuitems.js

Footer

cheese

/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”.

cheese

Puis “Fork This Repository”

cheese

Puis “For my own purposes”

cheese

Puis “Commit to main”

cheese

Puis “Push origin”

cheese

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

cheese

cheese

Attendez quelques minutes et votre site sera en ligne !! 

cheese

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 :

http://localhost:8000/

Github Desktop > Commit to main + Push origin

Netlify > se mettra automatiquement à jour. Vos modifications prendront quelques minutes à s’actualiser.

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"