Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, il vous faut mettre le site en ligne pour que les gens puissent le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'effort.

Quelles sont les différentes options ?

La publication d'un site web n'est pas un sujet simple, principalement du fait qu'il existe de très nombreuses façon pour publier un site. Dans cet article, nous ne visons pas à documenter pas toutes les méthodes possibles. A la place, nous discuterons des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant, puis vous ferons parcourir une méthode qui fonctionnera pour vous.

Trouver un hébergement et un nom de domaine

Si vous voulez un contrôle total sur votre site web publié, alors vous aurez probablement besoin de dépenser de l'argent pour acheter :

  • L'hébergement --- c'est de l'espace de fichier sur le serveur web d'une société d'hébergement. Vous mettez les fichiers de votre site web dans cet espace, et le serveur web en fournira le contenu aux utilisateurs qui le demande.
  • Un nom de domaine --- c'est l'adresse à laquelle les visiteurs pourront trouver votre site web, comme www.mozilla.org, ou www.bbc.co.uk. Vous louez votre nom de domaine à un bureau d'enregistrement (registrar) de domaines.

De nombreux sites professionnels sont mis en ligne de cette façon.

En plus, vous aurez besoin d'un programme File Transfer Protocol (FTP) (voir Combien ça coûte : les logiciels pour plus de détails) pour réaliser le transfert des fichiers depuis votre ordinateur vers le serveur web. Les différents programmes FTP varient largement mais de façon générale, vous devrez vous connecter sur votre serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., un nom d'utilisateur, un mot de passe, un nom d'hôte). Le logiciel utilisé pour FTP affichera alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, de sorte que vous puissiez les transférer dans les deux sens :

Suggestions pour trouver un hébergement et des domaines

  • Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des sociétés d'hébergement et des bureaux d'enregistrement, rechercher "hébergement web" et "noms de domaine". Tous bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine que vous voulez est disponible.
  • Il se peut que votre fournisseur d'accès Internet fournisse un hébergement limité pour un petit site web. Le jeu des fonctionnalités disponibles sera limité, mais il pourra être parfait pour vos premières expérimentations --- contactez-les et demandez !
  • Il existe quelques services gratuits tels que Neocities, Blogspot et Wordpress. A nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne requièrent pas pour la plupart de logiciel FTP pour le téléversement non plus --- vous pouvez juste faire un tirer/lâcher directement dans leur interface web.
  • Parfois, des sociétés fournissent à la fois l'hébergement et les domaines dans un même package.

Utiliser un outil en ligne comme GitHub ou Google App Engine

Certains outils vous permettent de publier votre site web en ligne :

  • GitHub est un site de « codage collaboratif ». Il vous permet de téléverser dépôts de code pour stockage dans le système de gestion de versions Git. Vous pouvez alors collaborer sur des projets de code, et le système est open source par défaut, ce qui signifie que le monde entier pourra trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée pages GitHub, qui vous permet de présenter du code de site web en direct sur le web.
  • Google App Engine est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi-tier à partir de zéro ou d'héberger une site web statique. Voir How do you host your website on Google App Engine? pour plus d'information.

À la différence de la plupart des hébergements, ces outils sont d'utilisation gratuite, mais vous n'avez accès qu'à un ensemble limité de fonctionnalités.

Utilisation d'un EDI web tel que Thimble

Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, du CSS et du JavaScript, puis d'afficher le résultat de ce code lorsqu'affiché comme site web --- tout cela dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse spécifique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).

Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :

Publication via GitHub

Nous avons vu différentes options. Désormais, nous allons voir en détails comment publier un site sur une page GitHub. Encore une fois, cette méthode n'est pas nécessairement la meilleure pour votre projet ou en général mais elle est :

  • gratuite
  • simple
  • applique des compétences qui pourront vous être utiles par la suite.

Mise en place basique

  1. Pour commencer, installez Git sur votre machine. C'est l'outil sur lequel GitHub est basé.
  2. Ensuite, inscrivez-vous sur GitHub.
  3. Une fois que vous êtes inscrit, connectez-vous sur github.com avec votre nom d'utilisateur et votre mot de passe.
  4. Ensuite, il faut créer un dépôt dans lequel vous placerez vos fichiers. Pour ce faire, cliquez sur le bouton + en haut à droite sur la page d'accueil GitHub puis sélectionnez New Repository.
  5. Sur cette page, dans le champ Repository name box, entrez username.github.io, où username correspond à votre nom d'utilisateur. Si, par exemple, votre nom d'utilisateur est jeanbiche, le nom sera jeanbiche.github.io.
  6. Cliquez sur Create repository, cela devrait afficher la page suivante :

Uploader vos fichiers sur GitHub

Nous allons utiliser la ligne de commande pour placer notre dépôt sur GitHub. Une invite en ligne de commande permet de saisir des commandes au clavier pour créer des fichiers et de lancer des programmes (plutôt que de cliquer sur une interface utilisateur avec des boutons). Une interface en ligne de commandes ressemble à ça :

Note : Si vous préférez avoir une interface graphique et éviter l'interface en ligne de commande, vous pouvez utiliser une interface graphique pour Git pour faire la même chose.

Chaque système d'exploitation possède un outil de ligne de commande :

  • Windows : Invite de commande qui peut être lancé en appuyant sur la touche Windows, tapez « Invite de commande » et sélectionnez le dans la liste. Attention, Windows possèdent des conventions différentes de Linux et OS X. Les commandes pourront être légèrement différentes.
  • OS X : Terminal qui peut être lancé depuis Applications > Outils.
  • Linux : Généralement, il est possible de lancer un terminal avec Ctrl + Alt + T. Si ça ne fonctionne pas, vous pouvez chercher Terminal dans le menu principal.

Cela peut sembler un peu effrayant à première vue. Ne vous en faites pas. Le terminal est en fait utilisé pour envoyer des commandes à l'ordinateur une fois qu'on appuie sur Entrée.

  1. Placez vous dans votre répertoire site-test (si votre répertoire a un nom différent, remplacez le nom avec celui que vous utilisez). Pour aller dans un répertoire, on utilisera la commande cd (qui signifie « change directory » qui signifie « changer de répertoire »). Si votre répertoire s'appelle site-test et qu'il est sur votre bureau :
    cd Bureau/test-site
  2. Une fois que vous êtes dans ce répertoire, saisissez cette commande qui indique à git de créer un dépôt dans ce répertoire :
    git init
  3. Ensuite, sur le site GitHub, sur la page, allez dans la section …or push an existing repository from the command line, vous devriz avoir deux lignes de code. Copiez la première ligne dans votre terminal/invite et appuyez sur Entrée. La commande devrait ressembler à :
    git remote add origin https://github.com/jeanbiche/jeanbiche.github.io.git
  4. Ensuite, tapez ces deux commandes suivantes en appuyant sur Entrée pour chacune. Ces commandes permettent d'indiquer à git qu'il faut gérer les fichiers contenus dans le répertoire et de préparer la connexion entre le dépôt qui est sur GitHub et le dépôt qui est sur votre ordinateur.
    git add --all
    git commit -m 'adding my files to my repository'
  5. Enfin, on envoie le code sur GitHub grâce à la deuxième commande qui était listée à l'étape 3 :
    git push -u origin master
  6. Pour voir si cela a bien fonctionné, allez sur jeanbiche.github.io dans votre navigateur. Votre site devrait être en ligne ! Vous pouvez envoyer l'adresse du site par e-mail à vos amis pour leurs montrer votre talent !

Note : Si vous êtes bloqué, la page GitHub Pages pourra vous être d'une aide précieuse.

En savoir un peu plus sur GitHub

Si vous souhaitez apporter d'autres changements à votre page puis les publier sur GitHub, vous aurez simplement besoin de modifier les fichiers comme précédemment. Une fois les fichiers modifiés et sauvegardés, vous pouvez utiliser les commandes suivantes (en appuyant sur Entrée à chaque fois) pour publier vos modifications sur GitHub :

git add --all
git commit -m 'Mes modifications étaient...'
git push

Le message présent sur la ligne git commit -m peut être remplacé avec un message qui décrit plus précisément les changements que vous avez apportés.

Le but de cet article n'est pas de découvrir GitHub en profondeur mais d'utiliser quelques commandes pour publier ce site. Pour en savoir plus, vous pourrez utiliser le site GitHub Help.

Conclusion

Après ces différentes étapes, vous devriez disposer d'un site web, disponible en ligne, accessible à une adresse donnée. Félicitations !

Lectures pour approfondir

Étiquettes et contributeurs liés au document

Contributeurs à cette page : NemoNobobyPersonne, Ilphrin, villastien, SphinxKnight
Dernière mise à jour par : NemoNobobyPersonne,