Jusqu'à maintenant, nous avons développé des sites web directement sur nos ordinateurs. Afin de rendre ces sites webs accessible à nos visiteurs potentiels, il faudra trouver un serveur où les héberger.
Il existe différents "niveaux" d'hébergement de serveurs. On peut monter un serveur et le garder chez soi, ou encore louer un emplacement physique dans un centre de données. De nos jours, la façon la plus courant sera d'utiliser une plateforme d'hébergement dans le cloud. Le cloud nous permet de très rapidement créer des serveurs à peu de coûts et d'efforts.
Il est également important de comprendre le type de site web qu'on souhaite héberger.
À noter qu'il est possible d'héberger des parties distinctes d'un site web de façons différentes. Par exemple, les pages d'informations et de marketing d'un site web peuvent être hébergées de façon statiques, tandis que le panneau d'administration pourrait utiliser un hébergement dynamique côté serveur.
Voici une liste de quelques services d'hébergement bien connus et fiables. La liste est classée par puissance et capacité des services d'hébergement, mais se souvenir qu'avec la puissance et capacité viennent aussi la complexité et les coûts.
Afin de mettre à jour ou de créer pour la première fois un site web hébergé, il faut faire un déploiement. Le déploiement s'occupe de transférer les fichiers nécessaires au fonctionnement du site web et de configurer le serveur qui hébergera le site web. Il existe deux catégories générales de déploiement:
Un des meilleurs hébergeurs gratuits de site statique est Netlify. Une fois un compte créé, on doit également installer leur programme d'invite de commande (aussi appelé CLI) afin de configurer notre déploiement.
Le CLI a besoin de Node.js pour fonctionner, il faut donc d'abord s'assurer que Node.js version 10+ soit bien installé sur votre ordinateur avant de débuter. Lien pour le téléchargement de Node.js.
Une fois Node.js installé, il suffit d'utiliser la commande suivante:
npm install netlify-cli -g
On peut ensuite vérifier si le CLI est bien installé en utilisant simplement la commande netlify.
Avant de pouvoir déployer notre application, il faudra également s'identifier à travers l'invite de commande. Pour se faire, utiliser la commande suivante et suivre les instructions qui vous mèneront à vous identifier dans votre navigateur.
netlify login
Une fois le CLI de Netlify d'installé et de configuré, nous sommes prêts à déployer notre premier site.
Premièrement, naviguez à l'aide de votre invite de commande à l'endroit où se trouve les fichiers de votre site web. On utilisera ensuite la commande suivante:
netlify deploy
Lors de la première exécution de cette commande pour un site web, le CLI vous posera quelques questions.
This folder isn't linked to a site yet
? What would you like to do? (Use arrow keys)
> Link this directory to an existing site
+ Create & configure a new site
Choisir Create & configure a new site. Choisir ensuite la seule Team qu'on vous offre, ainsi qu'un nom pour votre site web (ou utilisez le nom par défaut).
Please provide a publish directory (e.g. "public" or "dist" or "."):
Il s'agit ici du dossier qui contient votre fichier index.html. Si il s'agit du dossier de premier niveau de votre site web, dans lequel vous êtes présentement dans votre invite de commande, indiquez .
Netlify déploiera ensuite une version brouillon de votre site, qui vous permettra de faire un contrôle de la qualité. Rendez-vous à l'adresse indiquée par le Website Draft URL: et vérifiez que tout fonctionne.
Une fois que tout a été vérifié, vous pouvez mettre votre site en ligne à l'aide de:
netlify deploy --prod
Tout site web hébergé sur le web se trouve à une adresse IP. Toutefois, afin d'éviter d'avoir à se souvenir d'adresses IP, on donne à nos sites web des noms de domaines. Un nom de domaine est simplement la partie principale de l'adresse d'un site web, tel que cegepoutaouais.qc.ca ou encore alexturpin.com.
Un nom de domaine peut être acheté si il est encore disponible. La plupart des noms de domains coûtent entre 10 $ et 20 $ par année. Il est possible de renouveller automatiquement afin de garder un nom de domaine pour toujours.
Un nom de domaine est enregistré auprès d'un registraire. Il existe plusieurs registraires, et tous les registraires peuvent vous permettre d'acheter la plupart des noms de domaine. Vous pouvez également transférer un nom de domaine d'un registraire à un autre.
Il est fort possible que votre hébergement offre des services d'enregistrement de noms de domaine. Vous pouvez également l'enregistrer chez un registraire indépendant tel que https://www.namecheap.com/
Un nom de domaine vient avec un nombre illimité de sous domaines: c'est à dire des domaines partiels tel que portfolio.alexturpin.com ou 582-125-hu.alexturpin.com. Ces sous-domaines sont configurables par vous même et peuvent pointer vers n'importe quel hébergement ou serveur.
Le système de DNS de l'internet agit à titre de sorte de "botin téléphonique", associant un nom de domaine à une adresse IP. Pour se faire, lorsqu'on tente de se connecter à un nom de domaine en particulier, par exemple alexturpin.com, notre ordinateur ira demander au serveur autoritaire qui s'occupe du .com de nous donner l'adresse d'un autre serveur. On suivra ensuite cette chaîne de serveur jusqu'à ce qu'on obtienne l'adresse IP désirée.
Ce résultat sera mis dans une cache pour un certain temps, c'est pourquoi les changements DNS peuvent prendre de 24 à 72 heures avant d'être réflectés.
On peut faire une analyse de la configuration DNS d'un nom de domaine à l'aide d'un outil tel que nslookup. Des outils en ligne tel que https://www.nslookup.io/ existent.
Le panneau de bord de votre registraire vous permettra de configurer les zones DNS pour votre domaine. Il est préférable de trouver des instructions de configuration directement de votre hébergeur. Les instructions seront d'habitude de configurer un CNAME ou encore un A record.
Le référencement, ou SEO consiste à optimiser son site afin qu'il apparaisse dans les différents moteurs de recherche tel que Google.
Dans le passé, certaines techniques étaient possible tel que l'ajout de mots clés de façon stratégique sur sa page. De nos jours, il faut simplement bâtir une bonne expérience utilisateur ainsi qu'un site informatif. Il existe quelques techniques pour se faire.
Certaines balises sont particulièrement importantes pour le référencement.
La balise <title> qui se trouve dans le <head> de la page, donne à la page son titre dans le navigateur et Google. Elle devrait contenir le nom de la page ainsi que le nom du site web.
La balise <meta name="description" content="Le meilleur gym en ville!">, qui va dans le <head> de la page, permet de donner une brève description du contenu de la page.
Il faut également prendre soin d'utiliser les éléments sémantiques afin de structurer notre site web, tels que <main>, <nav>, <header>, <footer>, <article>, etc.
L'utilisation des en-têtes est également importante. Chaque page devrait contenir une seule en-tête <h1> avec le nom du site, ainsi qu'une seule en-tête <h2> avec le nom de la page. Il faut également utiliser les en-têtes en ordre décroissant et logique.
Il existe un outil de Google qui permet la vérification d'une page web. L'outil rapportera un score ainsi qu'une liste de problèmes pour plusieurs catégories.
On peut utiliser l'outil soit à partir du site web https://web.dev/measure/ ou encore de l'onglet "Lighthouse" des outils de développement de Google Chrome.
Les catégories évaluées sont les suivantes:
Afin de vérifier nos résultats de référencement et la performance de nos efforts de marketing, on peut utiliser certains outils.
Lors du partage de votre site web sur les médias sociaux, il est possible de configurer l'apparence des posts à l'aide de balises meta Open Graph.
<meta property="og:url" content="http://gymturpin.com" />
<meta property="og:title" content="Gym Turpin" />
<meta property="og:description" content="Le meilleur gym en ville!" />
<meta property="og:image" content="http://gymturpin.com/images/banniere.jpg" />
Toutes les adresses fournies dans les balises meta Open Graph doivent être des adresses complètes, incluant le nom de domaine.
Il est possible de tester l'apperçu de notre page web à l'aide d'outils fournis par Facebook et Twitter.