Guide complet : Installation et déploiement d'un blog Hexo sur GitHub Pages

  1. Préparation des comptes et outils nécessaires

Installation de Node.js

Rendez-vous sur la page officielle de Node.js pour télécharger la version recommandée : https://nodejs.org/

Une fois le fichier .msi téléchargé,double-cliquez pour lancer l'installation. Suivez les étapes en cliquant sur "Next" jusqu'à la fin de l'installation. Les paramètres par défaut conviennent parfaitement aux débutants.

Installation de Git

Téléchargez Git depuis le site officiel : https://git-scm.com/

Lancez l'installation en exécutant le fichier .exe. Durant l'installation, acceptez les options par défaut en cliquant sur "Next" jusqu'à voir la barre de progression. L'installation peut prendre quelques minutes selon votre connexion.

Création des comptes GitHub et Vercel

Inscription GitHub : Rendez-vous sur https://github.com/ et créez un compte gratuit en suivant les instructions. Vous devrez vérifier votre adresse email.

Compte Vercel (optionnel) : Vercel propose un hébergement gratuit optimisé pour les sites statiques. Connectez-vous avec votre compte GitHub sur https://vercel.com/

  1. Configuration du dépôt GitHub et des environnements

Création du dépôt GitHub

Connectez-vous à votre compte GitHub et cliquez sur "New repository" pour créer un nouveau dépôt. Nommez-le selon le format suivant : votrepseudo.github.io

Cochez la case "Public" et cliquez sur "Create repository".

Configuration de Node.js

Créez un nouveau dossier sur votre ordinateur qui servira à accueillir les fichiers de votre blog. Ouvrez un temrinal dans ce dossier.

Configurez npm pour utiliser un miroir chinois afin d'accélérer les téléchargements :

npm config set registry https://registry.npm.taobao.org

Installez ensuite Hexo de manière globale :

npm install -g hexo-cli

Une fois l'installation terminée, initialisez votre blog :

hexo init .
npm install

Note : Si vous rencontrez des erreurs liées à OpenSSL, cela peut indiquer un problème de connexion réseau. Essayez de configurer un proxy ou utilisez un autre miroir npm.

Configuration de Git (étape cruciale)

Ouvrez un terminal et configurez votre identité Git :

git config --global user.name "Votre pseudo GitHub"
git config --global user.email "votre@email.com"

Génération de la clé SSH :

Saisissez la commande suivante et appuyez sur Entrée à chaque prompt :

ssh-keygen -t rsa -C "votre@email.com"

Ajout de la clé SSH sur GitHub :

  1. Naviguez vers le dossier C:\Users\VotreUtilisateur\.ssh (n'oubliez pas d'activer l'affichage des fichiers cachés)
  2. Ouvrez le fichier id_rsa.pub avec un éditeur de texte
  3. Copiez tout le contenu du fichier

Sur GitHub, Allez dans Settings → SSH and GPG keys → New SSH key. Collez le contenu dans le champ "Key" et donnez un titre à votre clé.

Vérifiez la connexion en ouvrant un terminal et en tapant :

ssh -T git@github.com

Répondez "yes" à l'invite de confirmation. Vous devriez voir un message indiquant que la connexion est réussie.

  1. Déploiement de Hexo sur GitHub Pages et configuration d'un domaine personnalisé

Déploiement sur GitHub Pages

Générez les fichiers statiques de votre blog et lancez le serveur local :

hexo g
hexo s

Ouvrez votre navigateur et accédez à http://localhost:4000. Si vous voyez la page par défaut de Hexo, félicitations ! L'installation locale fonctionne.

Astuce : Si le site ne se charge pas, le port 4000 est peut-être occupé. Arrêtez le serveur avec Ctrl+C, puis relancez avec hexo server -p 5000 pour utiliser un autre port.

Une fois le blog fonctionnel en local, procédez au déploiement en ligne.

Installation du module de déploiement Git :

npm install hexo-deployer-git --save

Modification du fichier de configuration :

Ouvrez le fichier _config.yml à la racine de votre projet et recherchez la section deployment. Modifiez-la ainsi :

deploy:
  type: git
  repository: git@github.com:pseudo/pseudo.github.io.git
  branch: main

Déployez votre blog avec la commande :

hexo d

Votre site est maintenant accessible à l'adresse https://pseudo.github.io.

Commandes utiles :

hexo new "nom-article"    # Créer un nouvel article
hexo new page "nom-page"  # Créer une nouvelle page
hexo g                    # Générer les fichiers statiques
hexo d                    # Déployer sur le serveur
hexo g -d                 # Générer et déployer en une commande
hexo s                    # Lancer le serveur local
hexo clean                # Nettoyer le cache et les fichiers générés
hexo help                 # Afficher l'aide

Configuration d'un domaine personnalisé via Vercel (avancé)

Vercel offre des performances réseau bien supérieures à GitHub Pages, avec des temps de réponse généralement inférieurs à 80ms contre plus de 100ms pour GitHub.

Procédure :

  1. Connectez-vous sur https://vercel.com/
  2. Cliquez sur "Add New" puis "Project"
  3. Importez votre dépôt GitHub
  4. Les paramètres par défaut conviennent, cliquez sur "Deploy"

Ajout du domaine personnalisé :

  1. Dans les paramètres du projet, allez dans "Domains"
  2. Cliquez sur "Add Existing" et saisissez votre nom de domaine
  3. Configurez les enregistrements DNS chez votre registrar selon les instructions fournies

Une fois lesDNS propagés, votre blog sera accessible via votre domaine personnalisé avec les avantages de performance de Vercel.

Étiquettes: hexo github-pages Git nodejs vercel

Publié le 25 juin à 04h30