Besoin d’un site Internet pour mettre en avant ton cv, ton activité, ton livre ? Je te montre comment héberger un site gratuitement avec Google Firebase.
Les 2 sites que j’ai créés :
Comme il y a pas mal de lignes de commandes, je te montre les manipulations sur mon Mac en vidéo ci-dessous pour tousinfluenceurs.web.app
Et je te montre également les manipulations sur le PC Windows 10 de mon épouse (Sonia) ci-dessous en mode capture d’écrans, notes, pour le site jesaiscoder.web.app
Ainsi tu auras le temps de bien faire, sans erreur de saisie.
1- Télécharge un template de site gratuit
Télécharge par exemple ce fichier monsite.zip et décompresse-le ensuite dans un répertoire C:/Sites/ comme ceci :
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-5.png)
Navigue ensuite jusqu’à C:\Sites\monsite\public Et ouvre le fichier index.html sur Chrome comme ceci
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-6.png)
Tu vois ainsi en local le fichier index.html que l’on va héberger sur les serveurs de Google.
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-7.png)
Il s’agit d’un compteur qui indique le nombre de jours, d’heures, minutes, secondes avant la sortie de mon livre Tous Influenceurs.
Si tu veux créer des choses plus fun, je t’invite à regarder la vidéo ci-dessous.
2- Installe Node JS (NPM)
Rends toi sur le site https://nodejs.org/en/
Et télécharge et installe la version de node js qui s’affiche à gauche
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-8-1024x549.png)
Node JS embarque NPM qui nous permettra d’installer localement Google Firebase sur notre PC Windows.
3- Vérifie que NPM est installé
Lance un terminal dans Windows en tapant cmd dans la barre de recherche puis entrée, comme ceci.
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-10.png)
Tu devrais voir un terminal se lancer 😉
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-11.png)
Pour vérifier que NPM (inclus dans Node JS) est bien installé, tape cette commande dans ton terminal Windows
npm -v
Tu devrais avoir ceci en réponse normalement
8.15.0
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-9.png)
4- Va sur firebase.google.com
En étant loggué avec ton compte Google, rends toi ici :
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-12.png)
Et clique ensuite sur Get started.
5- Crée un projet Firebase
Puis sur Créer un projet
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-13.png)
Donne un nom à ton projet ex: « Je sais coder » et un identifiant sans numéro, tiret, pour favoriser la mémorisation et la saisie plus tard, ex : jesaiscoder
Ton site aura pour URL identifiant.web.app, donc dans mon cas jesaiscoder.web.app
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-15.png)
Coche les 2 cases et clique sur « Continuer » pour aller à l’étape 2
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-17-1024x286.png)
Décoche Google Analytics et Clique sur « Créer un projet ».
Attends quelques secondes que le projet se crée et clique sur Continuer, une fois que ton projet est prêt.
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-18.png)
6- Crée un hébergement sur Firebase (Hosting)
Tu vas arriver là-dessus
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-19-1024x733.png)
Clique sur Créer > Hosting sur la gauche puis sur Commencer sur la droite
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-20-1024x780.png)
7- Installe la CLI de Firebase
Tu vas ensuite copier-coller cette ligne de commande dans ton terminal pour installer la CLI de Firebase
npm install -g firebase-tools
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-21-1024x704.png)
Sois patient, l’opération peut durer plusieurs minutes.
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-22.png)
8- Connecte-toi avec ton compte Google
Ensuite connecte-toi avec ton compte Google grâce à cette commande à saisir dans le terminal
firebase login
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-23.png)
Réponds Y ou N à l’invite qui suit
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-24-1024x160.png)
Moi j’ai mis « y » (yes = oui) puis Entrée
Lie ton compte Google dans le navigateur qui va s’ouvrir en cliquant sur ton compte Gmail (ici le compte de ma femme).
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-25.png)
Puis sur autoriser à la fenêtre qui suit
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-26.png)
On est connecté ! Woohoo ! Tu peux fermer la fenêtre du navigateur.
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-27.png)
9- Initie ton projet firebase
Mets toi maintenant dans le répertoire racine de ton projet en tapant dans le terminal :
cd C:\Sites\monsite
Puis une fois dans le bon répertoire de ton site, tape ceci dans le terminal
firebase init
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-28-1024x416.png)
Il va falloir répondre par y (oui) ou n (non) puis entrée à tous les questions.
Je te mets les réponses :
- are you ready to proceed => y + entrée
- déplace toi ensuite avec la flèche du bas de ton clavier sur « Hosting : configuring files… » clique sur espace (pour sélectionner l’item) puis entrée (pour valider)
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-29-1024x222.png)
sélectionne « use an existing project » avec la flèche bas du clavier puis entrée
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-30.png)
Sélectionne comme moi l’identifiant du projet que tu viens de créer, chez moi « jesaiscoder » puis entrée
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-31.png)
laisse (public), puis entrée
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-32.png)
- single page app : n
- set up automatic builds with git : n
- file public/index.html exists, overwrite ? : n
10- Mets tes fichiers HTML/CSS dans public/
On est bon !!!
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-34.png)
Pour mon exemple, je n’ai mis qu’un fichier html, la page 404 a été créé par Firebase.
11- Déploie ton site
Pour déployer les fichiers contenus dans public/ il faut retourner dans le terminal et taper ceci depuis C:\Sites\monsite
firebase deploy --only hosting
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-35.png)
Et voilà tu sais coder et ton site est déployé ! Admire le résultat avec le miens depuis cette URL : jesaiscoder.web.app
![](https://jeanviet.fr/wp-content/uploads/2022/08/image-36.png)
Alors, tu t’en sors ?
Une galère, une question ou même la satisfaction d’avoir réussi ce tuto tout seul ? Partage moi ton ressenti en commentaires !
Une réponse sur « Comment héberger un site gratuitement chez Google depuis un PC Windows ? »
[…] GPT sait créer des sites Web gfonctionnels de A à Z en HTML / CSS / JS, à condition de savoir lui parler. Je te montre dans […]