Publier votre site web

Quelles sont les différentes options ?

La publication d'un site web n'est pas un sujet simple. Cela est dû au fait qu'il existe de nombreuses façon pour publier un site. Dans cet article, nous ne documenterons pas toutes les méthodes. En revanche, nous discuterons des avantages et des inconvénients des différentes stratégies. Nous détaillerons ensuite une méthode qui devrait convenir dans la majorité des cas pour un premier projet.

L'hébergement et le nom de domaine

Si vous souhaitez complètement contrôler votre site web, vous aurez probablement besoin de payer pour :

• L'hébergement : cela correspond à l'espace, loué par une société d'hébergement, disponible sur un serveur web. Vous pourrez utiliser cet espace pour y placer vos fichiers et le serveur web fournira le contenu aux utilisateurs qui visitent le site.
• Un nom de domaine : cela correspond à l'adresse avec laquelle les visiteurs pourront accéder à votre site web : www.mozilla.org, ou www.bbc.co.uk. Il est possible de louer un nom de domaines à un bureau d'enregistrement.

La plupart des sites professionels sont publiés de cette façon.

En parallèle, vous aurez besoin d'un client FTP (pour File Transfer Protocol ou protocole de transfert de fichiers) (pour plus de détails, voir Combien ça coûte : les logiciels) pour transférer les fichiers depuis votre ordinateur vers le serveur web. Les différents programmes utilisés pour FTP varient mais, généralement, il faut se connecter avec des identifiants fournis par la société d'hébergement (ces identifiants sont généralement composés d'un nom d'utilisateur, d'un mot de passe et d'un nom de domaine sur lequel est situé le serveur). Le logiciel utilisé pour FTP affichera ensuite vos fichiers locaux d'une part et les fichiers présents sur le serveur d'autre part. Vous pourrez utiliser ces deux parties pour transférer vos fichiers d'une machine à l'autre :

Conseils sur l'hébergement et les noms de domaines

• Le but de cet article n'est en aucun cas de promouvoir certaines sociétés d'hébergement plutôt que d'autres. Pour trouver différentes sociétés d'hébergement et de noms de domaine, vous pouvez utiliser votre moteur de recherche préféré. Tous bureaux d'enregistrement permettent de rechercher le nom de domaine que vous voulez utiliser.
• Il se peut que votre fournisseur d'accès Internet fournisse un service d'hébergement limité pour un petit site web. Les fonctionnalités offertes seront limitées mais pour un premier projet ça peut être amplement suffisant ! N'hésitez pas à les contacter pour savoir si ce service est disponible.
• Il existe des services gratuits tels que Neocities, Blogspot et Wordpress. Là aussi, vous en aurez pour votre argent mais certains de ses services peuvent convenir pour un premier projet. Pour la plupart de ces services, il n'est pas nécessaire d'utiliser FTP, vous pourrez uploader les fichiers via une interface web.
• Certaines des sociétés fournissent le nom de domaine et l'hébergement dans un même package.

Utiliser un outil en ligne comme GitHub ou Dropbox

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

• GitHub est un site de « gestion de versions collaborative » qui permet de stocker en ligne des « dépôts » manipulés avec le système de gestion de versions Git. Vous pouvez collaborer sur des projets logiciels et y stocker des projets open source (ce qui signifie que tout le monde pourra trouver les fichiers que vous publiez sur GitHub, les utiliser et améliorer votre projet. Vous pouvez aussi faire de même avec les autres projets présents sur GitHub. Cela permet de participer à différents projets et communautés, Git est un système de gestion de versions très populaire. GitHub possède une fonctionnalité très utile pour l'hébergement que sont les pages GitHub. Ces pages vous permettent d'exposer un page web dont le code est présent sur GitHub.
• Dropbox est un système de stockage de fichiers qui permet de sauvegarder des fichiers sur le Web afin qu'ils soient disponibles sur différents appareils. Si les fichiers sont disponibles de façon publique, n'importe qui pourra y accéder. Si le dossier publique contient des fichiers web, Dropbox servira le site web automatiquement. Pour plus d'informations, voir comment héberger des sites web avec Dropbox.

À la différence d'un environnement hébergé, ces outils sont gratuits mais disposent d'un ensemble de fonctionnalités limitées.

Utiliser un IDE web tel que Thimble

Il existe plusieurs applications web qui émulent un environnement de développement web qui permet de saisir du HTML, CSS et JavaScript et de voir le résultat affiché sous la forme du site web. Tout ça en une seule fenêtre ! De façon générale, ces outils sont simples d'utilisation, très utiles pour apprendre et ils sont gratuits (pour les fonctionnalités de bases). Ils permettent en plus d'afficher la page web finie avec une adresse donnée. Cependant, les fonctionnalités de base sont plutôt limitées et ne permettent pas de charger des ressources comme des images.

Voici les quelques IDE que vous pouvez essayer. Choisissez celui qui vous convient le mieux :

• JSFiddle
• Thimble
• JSBin

Publier un site 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 :

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 !

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 !

Les prochaines étapes

• Qu'est-ce qu'un serveur web
• Comprendre les noms de domaine
• Combien ça coûte de faire quelque chose sur le Web ?
• Hébergement de sites web statiques gratuit ou peu cher, un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles.