Comment mettre en ligne son site web ? (débutant) 🖥️ 🌎

Vous avez une idée de blog, de business, un projet de site web ? Génial ! Ça peut être un blog sur votre hobby favori, une boutique en ligne pour votre toute nouvelle marque de vêtements, un site vitrine pour votre entreprise ou que sais-je encore… Mais en farfouillant sur le net pour concrétiser votre projet, vous tombez sur une myriade d’offres de site en ligne, d’hébergements, voire pire, des tutos pour apprendre à coder 😱, le tout farci de termes barbares et obscurs et vous commencez à vous demander combien de temps cela va vous prendre, voire si il ne faudrait pas plutôt embaucher un pro et combien cela va vous coûter…

Pas de panique ! On va voir tout cela pas à pas 🙂 Dans cet article, on va parler du CMS le plus utilisé dans le monde, WordPress, et d’un hébergeur que j’utilise depuis bientôt 7 ans, IONOS.

Déjà, c’est quoi un site web ?

Alors, on ne va pas du tout rentrer dans la technique dans cet article. Je suis développeur mais j’estime que si tu es ici, c’est que tu n’y connais rien du tout en développement web, voire même que tu t’en fous complétement. Toi, ce qui t’intéresse c’est de mettre ton site en ligne, qu’il soit joli, qu’il attire du trafic et basta. Alors oui… Mais non 😉 On va quand même voir quelques notions essentielles rapidement, car j’estime qu’il est important de les connaitre en tant que créateur de site (pas d’inquiétude, je vais simplifier au maximum 🙂 ) :

La base d’internet

Un site web, c’est un ensemble de fichiers stockés sur un serveur (ça peut être du code, des photos, des vidéos…). Un serveur, c’est un ordinateur qui tourne 24h sur 24h, 7 jours sur 7, et qui peut être n’importe où dans le monde. Il est géré par une entreprise qu’on appelle un hébergeur. Pour accéder à un site, on utilise un navigateur, aussi appelé client (Google chrome, Firefox, Edge etc) qui envoie des requêtes à ces fameux serveurs.

Exemple: si vous tapez lesflibustiersdelafinance.fr dans votre navigateur (<= ou que vous cliquez sur le lien), votre navigateur vient d’envoyer une requête au serveur que je loue chez mon hébergeur. Ce serveur envoie les fichiers qu’il stocke correspondant à cette adresse à votre navigateur. Votre navigateur les traduit (plus exactement, on dit qu’il les interprète) et les affiche tout bien comme il faut sur votre écran.

Les langages incontournables

Deux langages sont principalement utilisés sur le web pour visualiser ces données, le HTML et le CSS. Le HTML est un langage de balisage dans lequel on place les titres, le texte, les photos, les vidéos etc. C’est la base même d’Internet, la moindre page web reposant TOUJOURS sur du HTML. Et le CSS permet de mettre en forme ce fameux HTML (couleurs, taille du texte ou des images, la mise en page, les animations, le comportement de l’affichage selon si l’on est sur un ordinateur ou un téléphone…).

Voilà, c’est fini ! Rien de bien compliqué non ? 🙂 (Si tu es dev et que tu as fait un infarctus et deux crises cardiaques, j’ai dit que je simplifiais hein 😉 ).

Ok génial, et mon site dans tout ça ?

Alors, il faut tout de suite faire la distinction entre deux sortes de « sites ». Le site web et l’application web. Oui, j’ai bien dit application web 😉 Quand on parle « d’application », on pense généralement à une application mobile, mais c’est un abus de langage. Il y a bien des applications web et des applications mobiles. Exemple avec Instagram : Il y a bien une application web que vous ouvrez dans un navigateur sur votre ordinateur, et l’application mobile que vous avez téléchargée sur votre smartphone.

La distinction entre site web et application web, elle, est assez simple : le site web a principalement pour vocation d’afficher des informations et les interactions avec les utilisateurs sont limitées (ce blog par exemple). La relation est donc quasi-unidirectionnelle.

L’application web, elle, est beaucoup plus orientée utilisateur et permet généralement de créer un compte, de s’y connecter, de l’administrer, de publier du texte et des photos… (les réseaux sociaux sont le parfait exemple d’une application). On voit bien que la relation est bi-directionnelle, vous pouvez consulter mais également créer du contenu sur ces plateformes, et ce contenu sera envoyé sur un serveur. Son développement est évidemment plus long et complexe et répond à des besoins plus précis.

Dans cet article, on va principalement parler de site web. Donc si vous souhaitez développer le prochain TikTok, vous n’êtes pas au bon endroit… Il va falloir travailler avec un ou des développeurs selon la taille de votre projet, ou vous pencher sur le no-code pour construire votre premier MVP.

Bref, à vous donc de bien faire la distinction entre les deux (site ou application) au niveau de vos besoins et de contacter les personnes adéquates en conséquence. Maintenant que tout ceci est clarifié, on va pouvoir parler de…

WordPress

WordPress est un CMS (Content Management System). Pour faire simple, c’est une application web, permettant de créer des sites en ligne. WordPress est le CMS le plus connu et utilisé dans le monde. Sachez qu’en 2023, 43% des sites sur internet étaient développés avec WordPress. Pas besoin de savoir coder donc (même si c’est mieux de connaitre au moins quelques bases mais vraiment pas obligatoire, on en reparle plus loin). Et surtout, pas besoin de réinventer la roue : ça m’aurait personnellement pris plusieurs semaines voire plusieurs mois pour développer ce blog « from scratch » (en partant de rien), pourquoi s’embêter alors que le boulot est déjà fait ?

De plus, WordPress propose un système de plugins (extensions) très bien fourni. Plugins de sauvegarde, de gestion de cookies, de newsletter… Ils sont généralement payants, mais proposent la plupart du temps une version gratuite, souvent suffisante pour des besoins basiques. On peut parler par exemple de Yaost SEO, qui vous permet d’optimiser votre SEO (référencement naturel) pendant l’écriture de votre contenu. C’est un plugin essentiel à la bonne réussite de votre projet, et personnellement, la version gratuite couvre largement mes propres besoins.

Pas de code ?

Dans la théorie, vous n’avez donc rien à développer, rien à coder. Dans la pratique… c’est pas tout à fait vrai. En effet, WordPress fonctionne avec un système de thèmes, en gros ce sont des templates graphiques déjà codés. Et les devs de ces thèmes n’ont pas forcement prévu tout ce que vous, vous avez en tête. Donc il y a aura peut-être quelques petits ajustements à faire de votre côté, surtout si vous êtes perfectionniste.

Je vous recommande donc de vous intéresser un minimum au HTML et au CSS (si une petite formation sur les bases de ces langages vous intéresse, dites le moi en commentaire et je travaillerais un petit tutoriel très simplifié pour débutant). Vous serez bien plus autonome, pas besoin de dépendre d’un développeur, de votre pote geek ou de tonton Roger qui s’y connait un peu en informatique. N’hésitez pas également à utiliser une Intelligence Artificielle pour vous assister (personnellement j’utilise beaucoup Gemini, qui a l’avantage d’être gratuit). Dans tous les cas, il va falloir apprendre à être débrouillard, à trouver des solutions aux problèmes que vous rencontrerez… c’est VOTRE PROJET après tout !

Et IONOS ?

IONOS est un des leaders des hébergements WordPress en Europe. Vous pouvez en quelques clics et sans aucune connaissances techniques déployer très facilement votre site web chez eux. Alors, bien évidemment, ce n’est pas gratuit… Oui, un serveur pour que ça fonctionne il faut de l’électricité, du matériel, de la maintenance, des techniciens… Bref, if faut bien payer tout ça. Mais leurs tarifs restent franchement très abordables.

Par exemple, pour ce blog, j’ai pris l’offre Start. Donc 3.60 euros TTC les 6 premiers mois, puis 6 euros par mois. Le nom de domaine est offert la première année, puis comptez une dizaine d’euros par année pour la suite. L’intérêt de ces offres c’est de pouvoir tester votre idée de projet à faible coût. Dans mon cas, ce blog me revient donc la première année à : 6 mois x 3.6e + 6 mois x 6e = 57.60 euros. Et les années suivantes, en comptant le nom de domaine : 12 x 6e + 10 = 82 euros. Évidemment, à vous de bien peser le pour et le contre avant de vous lancer, cela reste un budget.

Bref, on peut également ajouter que leur SAV est excellent ! Ils vous répondront en moins de 6 heures par mail (testé et approuvé), ou sont tout à fait disponible pour répondre rapidement au téléphone.

Mise en garde

Dans tous les cas, fuyez les sites vous promettant de déployer votre site gratuitement, on a vu plus haut qu’un hébergeur a des dépenses incompressibles, il y a forcément anguille sous roche (soit vous ne serez pas propriétaire du code, soit on vous obligera à afficher des bannières publicitaires, le logo de l’hébergeur dans vos pages etc, cela pourrait aboutir à un rendu pas du tout professionnel et à une grosse perte de temps et d’énergie).

Mise en ligne !

Ça y est, vous vous êtes décidés ? Prêt à sauter dans le grand bain du web ? Allez, on se fait le déploiement en ligne de votre site ensemble 🙂

Alors, première étape, rendez-vous sur le site de IONOS.

Cliquez sur WordPress dans la barre de navigation en haut, puis « Hébergement WordPress » dans la petite fenêtre qui apparait dessous. Si votre projet est d’ouvrir une boutique en ligne, cliquez sur e-Commerce dans la barre de navigation et laissez vous guider (attention, comme dit plus haut, je me concentre principalement sur la création d’un site web, donc la suite de l’article pourrait différer pour une boutique e-commerce). Et si vous souhaitez un site dans lequel vous pourrez créer du contenu et vendre en ligne sélectionnez « Hébergement WooCommerce » dans l’onglet WordPress.

Choix de l’offre

Descendez un peu sur la page jusqu’à voir les tarifs que je vous montrais tout à l’heure (si vous ouvrez un WooCommerce, il n’y a qu’une seule offre actuellement). Étudiez les et choisissez celui qui vous convient (personnellement, j’ai donc opté pour l’offre Start, qui revient moins cher au final à l’année). Attention, si vous comptez travailler avec d’autres personnes sur votre projet, l’offre Start ne donne accès qu’à une seule adresse mail, ce qui explique la différence de prix. Penchez-vous plutôt sur les deux autres offres dans ce cas là.

Le nom de domaine

Deuxième étape : ici, c’est le moment de se creuser un peu la tête. Je vous recommande de prendre un peu le temps de la réflexion à ce stade là. Un conseil : optez pour un nom qui décrit l’intention globale de votre site. L’idée c’est qu’on puisse se rappeler facilement de ce nom. Beaucoup de gens font l’erreur de prêter beaucoup trop d’attention à leur nom de domaine, le voyant un peu comme une marque. Mais c’est la qualité du contenu de votre site la seule chose réellement importante, car c’est elle qui va vous amener du trafic, pas votre nom de domaine (que personne ne connait à ce stade là, sauf peut-être votre maman). Le nom doit tout de même vous satisfaire, bien évidemment…

Aussi, évitez de faire du Shakespeare ou des jeux de mots malheureux, vous aurez tout le loisir de faire ça plus tard dans vos pages et puis on est pas en train d’ouvrir un salon de coiffure là 😉

Quelques conseils

Surtout pas de caractères spéciaux dans le nom de domaine (lettres accentuées, apostrophes etc) uniquement des lettres en minuscules, des chiffres et des tirets ! Vous pourriez vous retrouver avec une url un peu bizarre du fait de l’encodage des caractères spéciaux…

Quelques exemples de noms de domaine, tirés de mon chapeau en moins de deux minutes : untourdumondeenvelo.fr, lesrecettesdemamiefrancine.fr, maboutiquedefripes.fr, ajourneyinlondon.com, best-burgers-around-the-world.com, les-meilleurs-dessinateurs-belges.be… Vous voyez, on comprend immédiatement quel est le sujet abordé par le site, et si le contenu est bon vos lecteurs ou clients se rappeleront naturellement de votre nom, pas d’inquiétude 😉 .

Si votre future audience est francophone, optez pour le .fr. Si elle sera internationale le .com. Si elle sera belge le .be, allemande le .de etc (liste des codes internet par pays).

N’hésitez pas également à vous aider d’une IA à cette étape là : Je ne le répeterais jamais assez, prenez dès maintenant l’habitude d’utiliser cet outil, vous êtes sur le point de devenir un webmaster et un bon webmaster utilise les outils qu’il a à sa disposition.

N’hésitez pas à relancer la recherche pour avoir de nouveaux résultats, à affiner avec d’autres mots clés et surtout vérifiez immédiatement que le nom n’est pas déjà utilisé par quelqu’un d’autre sur le net (réseaux sociaux etc) afin d’éviter de désorienter votre future audience ou clientèle.

Dès que c’est ok pour vous, cliquez sur Ajouter. À partir de cette étape, IONOS va vous proposer plusieurs produits comme plus d’espace de stockage, une protection de nom de domaine, un nom de domaine supplémentaire etc. Faites comme vous l’entendez selon vos besoins, mais dans le doute, sachez que vous pourrez prendre ces produits plus tard depuis votre espace client.

Finalisation

Dernière étape, vous êtes censés arrivé à un panier ressemblant à ceci :

Vous remarquerez que vous pouvez changer ici la durée d’engagement de votre offre de 12 à 1 mois. Cela peut être intéressant si vous cherchez juste à tester WordPress pour le moment. À vous de voir évidemment, mais sachez qu’en seulement un mois, si vous débutez, vous n’aurez pas le temps d’approfondir réellement le sujet et qu’il vous faudra repasser à la caisse après, et au prix fort cette fois ci :/ . (Dans tous les cas, attention à faire la distinction entre durée d’engagement et fin de contrat, vous vous engagez pour une certaine durée mais le contrat est renouvelé tacitement sans résiliation de votre part).

Je vous laisse cliquer sur le bouton Continuer, créer votre compte et finaliser le paiement.

Installation et premiers pas dans WordPress

Après avoir validé le paiement et reçu quelques mails de confirmation (ça prendra quelques minutes), vous pouvez commencer l’installation de votre WordPress.

Laissez vous guider par le processus d’installation (je ne détaille pas volontairement toutes les étapes) tout en gardant en tête que tout ce que vous faites dans ces étapes sera entièrement modifiable par la suite, donc n’hésitez pas à tester des choses.

On vous propose de choisir directement un design prédéfini…

…Et également la génération de pages pré-rédigées.

Pour finir, vous arrivez sur une interface de bienvenue qui vous propose de faire un petit tour des fonctionnalités de base de WordPress, ce que je vous encourage à faire. Vous pourrez retrouver cette interface très facilement en cliquant sur le bouton tout en haut du menu de gauche.

Cliquez sur le nom de votre site tout en haut de ce menu…

Et voilà ! Bienvenue sur votre site ! 🙂

L’interface

Alors, ce que vous venez de faire en cliquant sur le nom de votre site dans le menu tout en haut, vous allez le faire des centaines voire des milliers de fois à l’avenir. C’est ce qui permet de passer du rendu graphique de votre site à l’interface de wordpress, et vice-versa.

Je ne vais pas détailler tout le menu (vous aurez tout le temps de le découvrir vous même) mais je vous indique tout de suite quelques détails importants.

Rendez vous dans Réglages.

Modifiez le slogan avec quelques mots clés judicieusement choisis. Pour mon exemple, je vais écrire « Le site de référence des recettes mexicaines typiques » (Rien que ça 😉 ).

Les deux url un peu bizarres renseignées plus bas ont été générées à partir de votre nom de domaine pour éviter que quelqu’un ne tombe sur votre site en tapant les mots clés compris dedans (dans mon cas « cantine » et « mexicaine »). Gardez à l’esprit que pendant le développement d’un site, on cherche à être un maximum en mode sous-marin, on ne veut surtout pas quelqu’un tombe sur notre projet en construction…

..Je vous recommande donc également de vous rendre dans Lecture (dans le sous-menu de Réglages), et de cocher la case ne pas indexer votre site.

Désormais, votre site n’est plus trouvable par une recherche par mots clés. Il faudra ABSOLUMENT penser à décocher cette case lorque votre site vous semblera prêt à être consulté par le reste du monde.

Vous « brancherez » votre url officielle quand vous serez prêts, ça se fera très facilement dans votre espace client, puis vous n’aurez plus qu’à renseigner votre vrai nom de domaine dans la fenêtre vu plus haut. Continuons cette démonstration avec…

L’installation d’un plugin

Un plugin, c’est une brique de code qui répond à un besoin précis et spécifique (sauvegardes automatiques, newsletter, gestion de cookies, optimisation des images ou que sais-je encore…) et qui va être injecté dans votre site. Ça s’installe très simplement et se supprime de manière tout aussi simple directement depuis l’interface de WordPress. Vous verrez, pour chaque fonctionnalité que vous souhaiterez ajouter à votre site, elle existe, oui oui, les développeurs ont pensé à vous 😉

Yoast SEO

Exemple: dans le menu de l’interface, cliquez sur Extensions, puis Ajouter une extension (tout en haut). Dans la barre de recherche cherchez Yoast SEO et installez-le.

Pour rappel, Yoast SEO vous permet d’optimiser votre référencement naturel directement pendant la rédation d’une page ou d’un article. C’est un outil indispensable et une réference absolue chez les utilisateurs de WordPress.

Attention à bien l’activer (vous n’avez fait que le télécharger pour le moment).

Après activation, une nouvelle ligne vient d’apparaitre dans le menu de WordPress 😉

Yoast pourrait vous mettre en garde qu’un plugin installé de base rentre en conflit avec lui, faites lui confiance, supprimez cet autre plugin.

Désormais, lorsque vous écrirez du contenu, Yoast vous previendra en temps réel de la pertinence de votre titre, de votre texte, de sa longueur, de sa qualité… Sincèrement, ce plugin est absolument indispensable la bonne réussite de votre projet et donc du trafic que vous allez attirer (pour exemple, voici le score SEO du titre de cet article calculé par Yoast).

En tout cas, bravo, vous venez d’installer votre premier plugin avec WordPress ! 🙂

…Bon, je vais m’arrêter là, sinon cet article (déjà très long) va tout simplement devenir interminable, tellement le sujet est vaste… D’ailleurs, n’hésitez pas également à aller voir ce qu’il se passe dans les sections Pages et Articles (et les autres) et amusez vous à modifier le texte, les images etc…

Sachez que la communauté wordpress est très active et importante, vous trouverez donc une multitude de tutoriels en tout genre sur le net qui répondront à toutes vos questions, et ce, sur tous les sujets possibles. Et n’oubliez surtout pas votre nouvelle meilleure amie l’IA, qui n’attend que de répondre à vos questions 😉

Conclusion

Votre site est en ligne ! Félicitations ! C’est le début d’une grande aventure !

Je vous encourage à ne SURTOUT PAS HÉSITER à refaire plusieurs déploiements avant de vous lancer dans votre projet final, sutout si vous des objectifs très précis. Voyez vos premiers jets de sites comme des brouillons. Il vous suffira tout simplement de supprimer votre site directement dans votre espace client IONOS, puis de relancer une installation de WordPress (Attention, la supression de l’ancien WordPress sera définitive).

Vous avez vu à quel point le déploiement se fait très vite, donc prenez le temps de tester des choses avant de vous lancer sur votre projet final. Cela vous permettra de pratiquer, et de visuellement vous rendre compte de vos futurs besoins au niveau de vos pages, de vos menus etc.

Le développement d’un site web est un apprentissage continu. Il vous incombe désormais de vous former de votre côté, d’être curieux et de prendre l’habitude de chercher des informations par vous-même (coucou l’IA !).

Je vous encourage également vivement à vous former sur le référencement naturel (SEO). C’est le SEO qui amènera du trafic sur votre site. Pas de SEO, pas de trafic… pas de trafic, pas de clients. Donc il est capital de vous pencher rapidement sur le sujet.

N’hésitez pas à partager les liens de vos créations dans les commentaires, ce sera chouette de voir ce que vous avez fait et ça motivera ceux qui passeront par ici 🙂 ! (Et ça vous fera un de vos premiers backlink pour votre SEO 😉 ).

Des questions ? les commentaires sont là pour ça 🙂

Ah et sinon, il y a la newsletter pour ne pas louper les prochains articles !