Mettre en ligne son site web statique et évaluer sa qualité : Partie 1 — Création d’un dépôt sur Github et activation de Github Pages
Partie 1 — Création d’un dépôt sur Github et activation de Github Pages
Partie 2 — Configuration d’un nom de domaine sur Github Pages
Partie 3 — Optimiser les performances et la sécurité avec Cloudflare
Partie 4 — Tester les performances et évaluer la qualité avec Google Page Speed, WebPageTest et Opquast
Pré-requis : avoir des bases avec git. (Si ce n’est pas le cas, les commandes nécessaires sont indiquées).
J’ai réfléchi il y a quelques semaines au moyen le plus simple pour mettre rapidement en ligne une page web sur mon nom de domaine acheté il y a plusieurs mois.
Avec la volonté que celle-ci prenne en compte les recommendations de Google en terme de rapidité, de “mobile-friendly”, que celle-ci soit optimisée, dans divers domaines tels que le référencement naturel, les performances, la sécurité avec le protocole HTTPS… sans y passer un temps conséquent.
Ces différentes parties ont pour but de vous présenter la démarche que j’ai suivi et le fruit de mes recherches pour mettre en ligne ma page web rapidement et l’optimiser.
Vous serez guidés au fil des parties dans la création d’un dépôt avec Github, dans l’hébergement et la configuration d’un nom de domaine avec Github Pages, puis l’optimisation des performances et la configuration du HTTPS avec Cloudflare et enfin les tests de la page avec Google PageSpeed, WebPageTest et Opquast.
Si vous êtes déjà à l’aise avec certaines parties, vous pouvez très bien les zapper.
Création du dépôt sur Github
Rendez-vous sur la page https://github.com/new et créez votre nouveau dépôt. Dans mon cas jeremyraffin.com.
N’oubliez pas de cocher l’option “Initialize this repository with a README” et de sélectionner une licence dans l’option “Add a license”.
Cloner le dépôt et créer un index.html
Une fois créé, vous pouvez cloner votre dépôt.
Le dépôt cloné, créez votre fichier index.html à la racine et mettez-y votre contenu.
Ajoutez-le au versionnement (git add index.html).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header> </header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Vous pouvez commiter et pousser le fichier index.html sur le dépôt (git commit -m “Création du fichier index.html” puis git push).
Activer Github Pages sur le dépôt
Le fichier index.html est désormais présent sur le dépôt, vous pouvez à présent activer Github Pages pour héberger votre page.
Allez dans les “Settings” de votre dépôt et au niveau du bloc Github Pages, sélectionnez dans “Source”, l’option “master branch” puis cliquez sur “Save”.
Un message vous confirme que le site est disponible et vous indique l’adresse où il peut être consulté.
Félicitations, votre page est en ligne. Voyons maintenant dans une seconde partie, comment configurer un nom de domaine sur Github Pages.
Partie 2 — Configuration d’un nom de domaine sur Github Pages
