Comment installer et créer un blog avec Hexo sur Ubuntu 20.04

Hexo est un cadre de blog statique construit sur Node.js. Hexo te permet d’écrire des billets au format Markdown. Ces articles de blog sont traités et convertis en fichiers HTML statiques à l’aide de thèmes prédéfinis.

Il est différent des logiciels de blogging habituels comme WordPress car il génère des fichiers statiques. WordPress charge le blog de façon dynamique en exécutant du code PHP à chaque fois que tu recharges le site, ce qui le rend vulnérable aux vulnérabilités.

Dans ce tutoriel, tu vas apprendre à installer Hexo et à l’utiliser pour créer un blog sur un serveur basé sur Ubuntu 20.04.

Conditions préalables

  1. Serveur basé sur Ubuntu 20.04 avec un utilisateur non-root ayant les privilèges sudo.

  2. Git doit être installé. Si tu n’as pas installé git, tu peux le faire via les commandes suivantes.

    $ sudo apt install git
    $ git config --global user.name "Your Name"
    $ git config --global user.email "[email protected]"
    
  3. Un compte sur Github.

Configurer le pare-feu

Ubuntu 20.04 est livré avec Uncomplicated Firewall(UFW) par défaut. Si ce n'est pas le cas, installe-le d'abord.

$ sudo apt install ufw

Active le port SSH.

$ sudo ufw allow "OpenSSH"

Active le pare-feu.

$ sudo ufw enable

Active le port 4000 qui est utilisé par le serveur Hexo.

$ sudo ufw allow 4000

Ouvre aussi les ports HTTP et HTTPS dont nous aurons besoin plus tard.

$ sudo ufw allow http
$ sudo ufw allow https

Vérifie l'état du pare-feu.

$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
80/tcp                     ALLOW       Anywhere
4000                       ALLOW       Anywhere
443/tcp                    ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
80/tcp (v6)                ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)
443/tcp (v6)               ALLOW       Anywhere (v6)

Installe Node.js

Comme Hexo est basé sur Node.js, tu dois d'abord l'installer.

Exécute la commande suivante pour ajouter le dépôt Node.js.

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Installe Node.js.

$ sudo apt-get install nodejs

Confirme qu'il est correctement installé.

$ node --version
v14.15.0

Installe Hexo

Exécute la commande suivante pour installer le paquet Hexo.

$ sudo npm install hexo-cli -g

Le paramètre -g installe le paquet hexo-cli de manière globale, ce qui te permettra d'installer le blog Hexo dans le répertoire de ton choix.

Crée le répertoire dans lequel tu veux installer Hexo.

$ sudo mkdir -p /var/www/hexo

Définis les autorisations et la propriété requises.

$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo

Ensuite, tu dois initialiser et configurer les fichiers nécessaires pour le blog Hexo. Pour cela, passe dans le répertoire que tu viens de créer.

$ cd /var/www/hexo

Initialise le blog Hexo.

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

Installe Hexo.

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 5 packages from 1 contributor and audited 191 packages in 1.567s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Tu peux maintenant vérifier la structure du répertoire.

$ ls
_config.yml  node_modules  package-lock.json  package.json  scaffolds  source  themes

Le fichier _config.yml contient la configuration de ton blog Hexo. La plupart des paramètres du blog peuvent être modifiés à partir d'ici.

Le répertoire node_modules contient tous les paquets dont Hexo a besoin et ceux dont il dépend.

Le fichier package.json contient une liste de tous les paquets et de leurs numéros de version dont Hexo a besoin.

Le fichier package-lock.json est automatiquement généré par npm chaque fois que tu effectues une installation ou une modification du paquet Hexo. Il contient des informations sur les paquets et les versions qui ont été installés ou modifiés.

Le répertoire scaffolds contient les modèles sur lesquels seront basés tes articles et tes pages de blog.

Le répertoire source contient le contenu réel du site au format HTML/CSS qui est ensuite publié sur le Web. Tout dossier ou fichier préfixé par _(caractères de soulignement) est ignoré par Hexo, sauf le dossier _posts. Pour l'instant, ce répertoire est vide car nous n'avons rien écrit ni publié.

Le répertoire themes contient les thèmes de ton Blog.

Configurer Hexo

Ouvre le fichier _config.yml pour le modifier.

$ nano _config.yml

Vérifie la section du fichier intitulée Site

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

Les options sont assez explicites. Change le nom de ton site, mets un sous-titre si tu veux. Ajoute une description de ton site et quelques mots-clés pour le décrire. Change le nom de l'auteur et le fuseau horaire de ton site.

Ensuite, vérifie la section URL du fichier.

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

Change l'URL de ton site pour ton nom de domaine. Veille à utiliser HTTPS dans ton URL car nous installerons SSL plus tard.

Si tu ne veux pas que l'URL de ton site affiche index.html à la fin de chaque page, tu peux changer les deux options trailing_index et trailing_html en false.

Il y a quelques autres paramètres que tu devrais activer.

Change la valeur de la variable default_layout de post à draft. Cela créera de nouveaux articles en tant que brouillons, tu devras donc les publier avant qu'ils n'apparaissent sur le blog.

Change la valeur de la variable post_asset_folder en true. Cela te permettra d'avoir des dossiers d'images individuels pour chaque article au lieu d'un seul dossier d'images pour tous les articles.

Enregistre le fichier en appuyant sur Ctrl+X et en entrant Y lorsque tu y es invité.

Installer un thème

Hexo est livré avec un thème par défaut appelé Landscape. Tu peux passer à un autre thème en installant un autre thème Hexo disponible sur sa page Thèmes.

Tous les thèmes Hexo sont disponibles via Github. Tu dois donc cloner le dépôt Github du thème.

Pour notre tutoriel, nous installons le thème Next. Passe dans le répertoire Hexo et clone le dépôt Github du thème dans le répertoire themes.

$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

Modifie le fichier /var/www/hexo/_config.yml pour changer le thème de Landscape à Next.

$ nano _config.yml

Apporte la modification à la variable theme pour changer de thème.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Tu peux modifier les paramètres du thème en modifiant le fichier /var/www/hexo/themes/next/_config.yml.

Créer et publier un post

Il est temps de créer notre premier post.

$ hexo new first-post
INFO  Validating config
INFO  Created: /var/www/hexo/source/_drafts/first-post.md

Ouvre le nouveau post pour le modifier.

$ nano ./source/_drafts/first-post.md

Chaque message doit avoir son front-matter configuré. Le Front-matter est un court bloc de JSON ou YAML qui configure des détails essentiels comme le titre du post, la date de publication, les catégories, les tags, etc. Remplace les données par défaut par les options correctes.

title: Howtoforge's First Post
tags:
  - test
categories:
  - Hexo
comments: true
date: 2020-11-14 00:00:00
---

## Markdown goes here.

**This is our first post!**

Si tu veux insérer une image dans ton article, ajoute le code suivant dans ton article.

{% asset_img "example.jpg" "This is an example image" %}

Ensuite, copie le fichier example.jpg dans le répertoire \source\_posts\first-post, où seront récupérées toutes les images de ton premier message.

Enregistre le fichier en appuyant sur Ctrl+X et en entrant Y lorsque tu y es invité une fois que tu as fini de rédiger le post.

Ensuite, publie le post.

$ hexo publish first-post
INFO  Validating config
INFO  Published: /var/www/hexo/source/_posts/first-post.md

Ce billet sera visible une fois que nous aurons hébergé le blog.

Installer un plugin

Hexo possède quelques centaines de plugins que tu peux installer. Tu peux installer un ou plusieurs plugins en fonction de ton utilisation.

Tous les plugins Hexo sont des paquets Node.js et sont hébergés sur Github où tu trouveras leurs détails d'installation et de configuration.

Pour notre tutoriel, nous allons installer le hexo-filter-nofollow plugin.

Assure-toi d'abord que tu es dans le répertoire hexo, puis installe le plugin.

$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save

Ouvre le fichier de configuration Hexo pour le modifier.

$ sudo nano _config.yml

Colle le code suivant à la fin du fichier.

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

L'option enable active le plugin. L'option field définit la portée du plugin où site ajoute l'attribut nofollow aux liens externes sur l'ensemble du site et post ajoute l'attribut nofollow uniquement aux liens dans les articles. L'option exclude établit une liste blanche des domaines sur lesquels l'attribut nofollow ne sera pas ajouté.

Serveur de test

Hexo est livré avec un serveur Web de base. Maintenant que notre article est publié, il est temps de démarrer le serveur de test Hexo.

$ hexo server

Tu peux maintenant lancer l'URL http://yourserverIP:4000 dans ton navigateur et tu verras la page suivante.

Page d'accueil du blog Hexo

Quitte le serveur en appuyant sur Ctrl + C dans le terminal.

Générer des fichiers statiques Hexo

Le serveur de test d'Hexo peut servir le blog de manière dynamique ainsi que par le biais des fichiers statiques. La commande ci-dessus a servi le blog de manière dynamique.

Il existe plusieurs façons de servir publiquement le blog Hexo. Pour notre tutoriel, nous allons servir les fichiers statiques d'Hexo en utilisant le serveur Nginx.

Exécute la commande suivante pour générer les fichiers statiques.

$ hexo generate

La commande ci-dessus génère des fichiers statiques qui sont stockés dans le dossier /var/www/hexo/public. Nous utiliserons le serveur Nginx pour servir les fichiers de ce dossier.

Installe et configure Nginx

Installe le serveur Nginx.

$ sudo apt install nginx

Crée et ouvre le fichier de configuration Hexo pour Nginx.

$ sudo nano /etc/nginx/sites-available/hexo.conf

Colle le code suivant dans ce fichier.

server {
    server_name hexo.example.com;

    root /var/www/hexo/public;
    index index.html index.htm;

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25>             ssl_prefer_server_ciphers off;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    
    location / {
        try_files $uri $uri/ =404;
    }
}
server {
    if ($host = hexo.example.com) {
        return 301 https://$host$request_uri;
    }
    server_name hexo.example.com;
    listen 80;
    listen [::]:80;
    return 404;
}

Enregistre le fichier en appuyant sur Ctrl+X et en saisissant Y lorsque tu y es invité.

Active la configuration.

$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/

Ouvre le fichier /etc/nginx/nginx.conf pour le modifier.

$ sudo nano /etc/nginx/nginx.conf	

Colle la ligne suivante avant la ligne include /etc/nginx/conf.d/*.conf

server_names_hash_bucket_size 64;

Change la valeur de la variable types_hash_max_size de 2048 à 4096.

types_hash_max_size 4096;

Appuie sur Ctrl + X pour fermer l'éditeur et sur Y lorsque tu es invité à enregistrer le fichier.

Teste pour t'assurer qu'il n'y a pas d'erreurs de syntaxe dans ta configuration.

$ sudo nginx -t

S'il n'y a pas de problème, redémarre le serveur Nginx.

$ sudo systemctl restart nginx

Installe SSL

Il est temps d'installer SSL en utilisant le service Let's Encrypt pour notre blog hexo.

Pour cela, installe Certbot.

$ sudo apt install certbot

Arrête Nginx car il va interférer avec le processus Certbot.

$ sudo systemctl stop nginx

Génère le certificat. Nous devons également créer un certificat DHParams.

$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m [email protected] --keep-until-expiring 
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048

Nous devons également configurer une tâche cron pour le renouvellement automatique du SSL. Pour ouvrir l'éditeur crontab, exécute la commande suivante.

$ sudo crontab -e
no crontab for root - using an empty one

Select an editor.  To change later, run 'select-editor'.
  1. /bin/nano        <---- easiest
  2. /usr/bin/vim.basic
  3. /usr/bin/vim.tiny
  4. /bin/ed

Choose 1-4 [1]: 1

La commande ci-dessus ouvre l'éditeur crontab. Si tu l'exécutes pour la première fois, il te sera demandé de choisir l'éditeur pour modifier les tâches Cron. Choisis 1 pour l'éditeur Nano.

Colle la ligne suivante en bas.

25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”

La tâche cron ci-dessus exécutera certbot à 2 h 25 tous les jours. Tu peux le modifier comme tu le souhaites.

Enregistre le fichier en appuyant sur Ctrl + X et en saisissant Y lorsque tu y es invité.

Mets à jour Hexo

Passe dans le dossier Hexo.

$ cd /var/www/hexo

Si tu passes à une version majeure d'Hexo, tu dois mettre à jour le fichier package.json. Ouvre-le pour le modifier. Tu peux passer directement à la commande de mise à jour pour passer à des versions mineures.

$ nano package.json

Change la ligne suivante sous la section dependencies.

"hexo": "^5.0.0",

Change la valeur 5.0.0 pour la version suivante dès qu'elle sort dans le futur. Par exemple, si Hexo 6.0 est sorti, alors change-la en suivant.

"hexo": "^6.0.0",

Enregistre le fichier en appuyant sur Ctrl + X et en saisissant Y lorsque tu y es invité.

Exécute la commande suivante pour mettre à jour Hexo.

$ npm update

Déployer Hexo

Hexo peut non seulement être hébergé directement sur ton serveur mais peut aussi être déployé directement sur Git, Netlify, Vercel, Heroku, OpenShift et diverses autres méthodes.

La plupart des plugins de déploiement te demandent d'installer un plugin. Pour notre tutoriel, nous allons configurer le déploiement d'Hexo sur Netlify. Si tu veux déployer sur Netlify, tu n'as pas besoin de suivre les étapes liées à Nginx et SSL car Netlify est livré avec SSL gratuit.

Un site Netlify est généralement déployé à partir d'un dépôt Git. Mais pour notre objectif, nous allons directement publier le site statique sur Netlify en utilisant son outil CLI.

Installe la CLI de Netlify.

$ sudo npm install netlify-cli -g

Tu peux vérifier si l'outil CLI a été installé.

$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0

Connecte-toi à Netlify.

$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90

You are now logged into your Netlify account!

Run netlify status for account details

To see all available commands run: netlify help

Copie le login du terminal dans ton navigateur et connecte-toi à ton compte Netlify pour t'authentifier.

Tu peux vérifier si tu es connecté en utilisant la commande suivante.

$ netlify status
???????????????????????
 Current Netlify User ?
???????????????????????
Name:  Your Name
Email: [email protected]
Teams:
  Your Team's team: Collaborator

Passe dans le répertoire public d'Hexo.

$ cd /var/www/hexo/public

Déploie le site sur Netlify.

$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? +  Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge

Site Created

Admin URL: https://app.netlify.com/sites/Howtoforge
URL:       https://Howtoforge.netlify.app
Site ID:   986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!

Logs:              https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.

Choisis par les touches fléchées de créer un nouveau site et entre un nom pour ton site. Saisis . comme répertoire à partir duquel déployer, ce qui fait référence au répertoire actuel.

Tu recevras une ébauche d'URL. Copie l'URL et charge-la dans un navigateur. Si tout semble correct, exécute la commande suivante pour effectuer un déploiement de production.

$ netlify deploy --prod

Ton site devrait maintenant être en ligne. Tu peux ajouter un domaine personnalisé dans les paramètres de Netlify pour le faire pointer vers un site réel.

Chaque fois que tu publies un nouvel article et que tu génères de nouveaux fichiers, exécute la commande suivante depuis le répertoire principal d'Hexo pour déployer les modifications sur Netlify.

$ netlify deploy --dir ./public --prod

Conclusion

Ceci conclut notre tutoriel pour installer et créer un blog à l'aide du framework Hexo Blog sur un serveur basé sur Ubuntu 20.04. Si tu as des questions, poste-les dans les commentaires ci-dessous.

Vous aimerez aussi...