Tutoriel simplifié pour créer un blog Hexo de A à Z (édition 2024)

#Création de blog

En avez-vous assez des interfaces sans âme des sites de blogs, des notifications incessantes, et rêvez-vous depuis longtemps de créer votre propre espace, mais les tutoriels complexes et le flot de code décourageant vous ont toujours freiné ? Bonne nouvelle ! Cet article est là pour vous guider pas à pas, de la manière la plus simple et la plus claire, dans la construction de votre propre blog. Il vous suffira d’un peu de patience et de suivre chaque étape.

Hexo, en tant que framework de blog rapide, concis et efficace, est une véritable aubaine pour les débutants. GitHub, de son côté, nous épargne les tracas liés à la location et au déploiement d’un serveur. Ce tutoriel vous montrera donc comment créer votre blog en utilisant Hexo et GitHub.

En 2018, j’avais déjà rédigé un article intitulé Tutoriel simple pour créer un blog de A à Z. Cependant, en raison des mises à jour des plugins, certains détails nécessitent des ajustements. C’est pourquoi je vous propose cette nouvelle version simplifiée pour 2024.

Préparation

Création du blog statique Hexo en local

$ npm install -g hexo-cli
$ hexo init
$ npm install

Et voilà ! La partie principale de votre blog est déjà prête. Voyons le résultat. Exécutez :

$ hexo server

Ouvrez votre navigateur et entrez localhost:4000 pour voir à quoi ressemble votre blog. Un petit moment d’excitation, puis appuyez sur Ctrl + C pour poursuivre.

Personnalisation (première étape)

Changer de thème

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g # ou hexo generate
hexo server

Configuration du site

# Site
title: Le Monde Inconnu                // Nom du blog
subtitle:
description:  Do something cool // Une signature
author: LulalaP                 // Auteur
language: fr               // Langue du site
timezone:

Définir l’avatar de la barre latérale

avatar:
    url: /uploads/avatar.jpg

Optimiser les pages du blog

Ajouter des éléments au menu

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Créer une page de catégories

$ hexo new page categories
   title: Catégories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Créer une page de nuage de tags

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

Créer une page “À propos”

$ hexo new page "about"
   title: À propos
   date: 2024-04-10 23:41:56
   comments: false
---

Configurer les liens sociaux de la barre latérale

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Associer votre blog à GitHub

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

Maintenant, ouvrez votre navigateur et visitez http://your-name.github.io. Félicitations, votre blog est désormais en ligne !

Lier un nom de domaine

À ce stade, votre blog est entièrement configuré et accessible via le domaine GitHub. Pour le rendre encore plus parfait, il ne vous reste plus qu’à y associer un nom de domaine plus court.

Achat d’un nom de domaine

Configuration DNS du domaine

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Une fois la résolution DNS configurée, rendez-vous dans le répertoire de votre blog. Créez un nouveau fichier nommé CNAME (attention, en majuscules et sans extension) dans le dossier source. Ouvrez-le avec un éditeur de texte et écrivez-y le nom de domaine que vous avez acheté, par exemple : www.philoli.com

hexo g
hexo d

Maintenant, ouvrez votre navigateur, entrez votre nom de domaine, appuyez sur Entrée, et félicitations ! Vous avez désormais un blog avec votre propre nom de domaine.

Publier un nouvel article

title Le titre de l'article
date Date de création (date de création du fichier)
updated Date de modification (date de modification du fichier)
comments Activer les commentaires true
tags Tags
categories Catégories
permalink Nom dans l'URL (nom du fichier)
hexo g
hexo d

Personnalisation avancée

Voici quelques réglages de style avancés pour votre blog. Les débutants peuvent les ignorer pour le moment.

Ajouter un flux RSS

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Tronquer les articles sur la page d’accueil

    <!--more-->

Centrer les citations dans les articles

{% centerquote %}
Texte de la citation
{% endcenterquote %}

{% centerquote %} Texte de la citation {% endcenterquote %}

Modifier le style des blocs de code

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Définir la date de création du site

since: 2024

Améliorer le style des liens dans les articles

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Ajouter une image de fond au blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Si l'image ne couvre pas tout, comment la répéter
    background-attachment:fixed;    // L'image défile-t-elle avec le contenu
    background-size: cover;         // Couvrir l'espace
    background-position:50% 50%;    // Position de l'image
}

Rendre le fond du contenu du blog semi-transparent


// Transparence du contenu du blog
// Réglage de l'opacité du contenu de l'article
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// Réglage de l'opacité de la barre latérale
.sidebar {
  opacity: 0.9;
}

// Réglage de l'opacité de la barre de menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Réglage de l'opacité de la barre de recherche (local-search)
.popup {
  opacity: 0.9;
}

Optimiser le style des blocs de code en ligne

// Embellissement des balises de code en ligne
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Ajouter un compteur de visiteurs au pied de page du site

# Trouvez la balise copyright, puis ajoutez le code à l'intérieur de la balise

<div class="copyright">
# ......il y a déjà des configurations ici
# Ajoutez le nouveau code ici
</div>

# Après ajout, cela devrait ressembler à ceci :
<div class="copyright">
  # ......il y a déjà des configurations ici
  # Ajoutez le nouveau code ici
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Une fois que tout est correct, publiez
hexo d

Ajouter un fichier README.md au dépôt

Chaque projet contient généralement un fichier README.md. Cependant, lorsque vous déployez votre blog Hexo sur un dépôt, le fichier README.md existant est écrasé. Il est donc nécessaire de configurer Hexo pour éviter ce remplacement.

Dans le répertoire racine source de votre projet Hexo, ajoutez un fichier README.md. Ensuite, modifiez le fichier de configuration du site _config.yml et définissez la valeur du paramètre skip_render comme suit :

skip_render: README.md

Enregistrez et quittez. La prochaine fois que vous déploierez votre blog avec la commande hexo d, le fichier README.md ne sera plus rendu.

Quelques plugins utiles

Sauvegarde des fichiers source

# Ajoutez l'adresse du dépôt de votre blog précédemment configurée
git remote add https://github.com/your-name/your-name.github.io.git

# Ajoutez et enregistrez les modifications actuelles, avec un message
git add .
git commit -m "Mise à jour des fichiers source"

# Créez et basculez vers une nouvelle branche
git checkout -b source

# Poussez tout le contenu de la branche 'source' locale vers la branche 'source' du dépôt distant
git push origin source:source

Écrire votre blog depuis différents ordinateurs

npm install -g hexo-cli
# Clonez le dépôt en local
git clone https://github.com/your-name/your-name.github.io.git

# Si le dépôt est déjà cloné localement, tirez toujours le contenu de la dernière branche avant de mettre à jour le blog
git pull origin

# Basculez vers la branche correspondante
git checkout source

# Installez tous les plugins configurés pour Hexo avant de commencer à éditer le contenu du blog
npm install

# Après avoir modifié le contenu, n'oubliez pas de sauvegarder rapidement
git add .
git commit -m "Mise à jour du blog xxx"
git push origin source:source

# Publiez les dernières mises à jour du blog sur le site de domaine
hexo clean
hexo g  // Génère les fichiers statiques
hexo s  // Prévisualise le blog en local
hexo d  // Publie le dernier contenu du blog

Récapitulatif des commandes courantes

hexo g
// ou hexo generate, génère les pages statiques à partir des fichiers source
hexo d
// ou hexo deploy, publie et déploie sur GitHub Pages
hexo s
// ou hexo server, déploie et teste en local
hexo clean
// Vide le cache des pages statiques, puis hexo d les regénère