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”.

Création du dépôt

Cloner le dépôt et créer un index.html

Une fois créé, vous pouvez cloner votre dépôt.

Cloner le 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”.

Sélectionner la source

Un message vous confirme que le site est disponible et vous indique l’adresse où il peut être consulté.

Confirmation

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