Déploiement

Optimisations

Les images

• inutile de charger des images de très haute résolution
  • → exportez vos images en 72dpi, pas plus.
  • → si c'est une vignette, il faut l'exporter dans la bonne taille (400x200, 300x300, etc…).
  • → si c'est une image dans le corps du contenu, au-delà de 1920px ça ne servira à rien.
  • → si une même image est affichée en vignette et en pleine largeur, faites deux version (img_vignette.png et img_full.png par exemple).
• pour les écrans hdpi (retina par ex.), faite une version x2 - càd doublez les dimensions en px, sans toucher aux DPI.
• JPEG vs. PNG
  • JPEG : Idéal pour les photographies, car il gère bien les nuances de pixels. Attention cependant aux artefacts sur les aplats.
    • Une qualité de 90% suffit pour les images pleine largeur
    • 70% pour les vignettes.
  • PNG : Meilleur pour les graphiques avec des aplats de couleur, comme les images vectorielles.
• lazyloading
  • le lazy loading permet de ne charger les images que lorsqu'elles entrent dans le champ de vision au lieu de toutes les télécharger au lancement du site.
  • la plupart des navigateurs modernes supportent l'attribut loading="lazy" dans les balises img.

Mise en ligne

Hébergement web

• l'hébergement web implique de louer un espace chez un fournisseur pour y stocker vos fichiers, rendus accessibles via une URL ou une adresse IP.
• les offres varient en termes de coût, de quelques euros à plusieurs centaines par mois, selon l'espace et le trafic nécessaires.
• pour des besoins basiques, alwaysdata offre une option gratuite avec 100 Mo d'espace.

Noms de domaine

• un nom de domaine doît être acquis auprès d'un registraire (un type de sociétés habilitées à louer des noms de domaine).
• pour les extensions standard (par exemple .fr) le coût est généralement autour de 20€/an.
• pour des extensions plus éxotiques (.cool, .xyz, .design, …), cela peut monter assez haut.
• Gandi.net est une bonne option.

Avant toute chose

• Évitez de créer des comptes d'hébergement et de domaine depuis des réseaux partagés comme celui de l'école, alwaysdata ou Gandi pourraient bloquer l'IP de l'école et nous empêcher de travailler. Pour cette étape, passez en partage de connexion.
• Optez pour des noms simples, sans caractères spéciaux ou accentués. Par exemple nomdefamille.fr ou prenom-nom.fr.

Étapes pour la mise en ligne

Création de l'hébergement chez alwaysdata

• inscrivez-vous sur alwaysdata en suivant le lien d'invitation que vous avez reçu par mail.
• choisissez le plan 100Mo gratuit ainsi qu'un nom de projet cohérent avec votre nom de domaine envisagé, et définissez un mot de passe.

Transfert des fichiers

• téléchargez FileZilla
• dans l'admin alwaysdata, allez dans Accès distant → FTP.
  • En haut, vous avez l'adresse de votre serveur FTP. C'est le champ « Hôte » de FileZilla. Il suit la nomenclature ftp-NOMPROJET.alwaysdata.net.
  • L'identifiant et le mdp sont ceux que vous avez renseigné lorsque vous avez choisi le plan 100Mo.
• via FileZilla, connectez-vous à votre serveur FTP.
  • à gauche, ce sont les fichiers sur votre ordinateur.
  • à droite, c'est le serveur.
• ne touchez pas au dossier admin.
• placez le contenu de votre site dans le dossier www sur le serveur.
  • attention : vous uploadez le contenu de votre dossier, pas le dossier. Dans la capture d'écran ci-dessous, j'ai transféré fonts/ fonts.css index.html et syle.css, pas le dossier poster/ à proprement parler.
  • le fichier principal doit impérativement être nommé index.html. C'est celui qui s'affichera lorsqu'on ira sur votre-portfolio.fr.
• Pour mettre à jour, écraser simplement les fichiers sur le serveur FTP par vos nouveaux fichiers.
• Vous devriez pouvoir accéder à votre site depuis votre-portfolio.alwaysdata.net

Achat du nom de domaine (facultatif)

• sur Gandi.net, recherchez votre nom de domaine et suivez les étapes d'achat pour la durée souhaitée. Attention aux options par défaut lors du paiement.
• la création de votre nom de domaine peut prendre quelques minutes.

Lier le nom de domaine et le serveur (facultatif)

• sur Gandi, dans votre espace administrateur, allez dans Nom de domaine → Serveurs de noms et remplacer les nameservers par ceux de alwaysdata :
  • dns1.alwaysdata.com
  • dns2.alwaysdata.com
  
• suivez ce tuto alwaysdata pour configurer le nom de domaine du côté de votre serveur.
• attention : la liaison entre le nom de domaine et le serveur peut prendre du temps, jusqu'à 48h. Patience…
• une fois la liaison effectuée, dans l'admin alwaysdata allez dans Web → Sites → Modifier puis dans l'onglet SSL sélectionnez « Forcer le HTTPS ».

Enfin, dans Web > Sites cliquez sur Modifier (l'engrenage) et ajouter votre nom de domaine aux adresses, sans oublier de sauvegarder (tout en bas)