Hexo est un framework de blogs statique construit sur Node.js. Hexo vous permet d'écrire des articles 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 dynamiquement en exécutant du code PHP chaque fois que vous rechargez le site, ce qui le rend vulnérable aux vulnérabilités.
Dans ce didacticiel, vous apprendrez à installer Hexo et à l'utiliser pour créer un blog sur un serveur basé sur Ubuntu 20.04.
Prérequis
-
Serveur basé sur Ubuntu 20.04 avec un utilisateur non root avec des privilèges sudo.
-
Git devrait être installé. Si vous n'avez pas installé git, vous pouvez le faire via les commandes suivantes.
$ sudo apt install git $ git config --global user.name "Your Name" $ git config --global user.email "[email protected]" -
Un compte sur Github.
Configurer le pare-feu
Ubuntu 20.04 est livré avec un pare-feu non compliqué (UFW) par défaut. Si ce n'est pas le cas, installez-le d'abord.
$ sudo apt install ufw
Activer le port SSH.
$ sudo ufw allow "OpenSSH"
Activez le pare-feu.
$ sudo ufw enable
Activez le port 4000 qui est utilisé par le serveur Hexo.
$ sudo ufw allow 4000
Ouvrez également les ports HTTP et HTTPS dont nous aurons besoin plus tard.
$ sudo ufw allow http
$ sudo ufw allow https
Vérifiez 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)
Installer Node.js
Comme Hexo est basé sur Node.js, vous devez d'abord l'installer.
Exécutez la commande suivante pour ajouter le référentiel Node.js.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Installez Node.js.
$ sudo apt-get install nodejs
Vérifiez s'il est correctement installé.
$ node --version
v14.15.0
Installer Hexo
Exécutez la commande suivante pour installer le package Hexo.
$ sudo npm install hexo-cli -g
Le -g paramètre installe le hexo-cli global qui vous permettra d'installer le blog Hexo dans n'importe quel répertoire de votre choix.
Créez le répertoire dans lequel installer Hexo.
$ sudo mkdir -p /var/www/hexo
Définissez les autorisations et la propriété requises.
$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo
Ensuite, vous devez initialiser et configurer les fichiers nécessaires pour le blog Hexo. Pour ce faire, basculez vers le répertoire que vous venez de créer.
$ cd /var/www/hexo
Initialisez 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!
Installez 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
Vous pouvez maintenant vérifier la structure du répertoire.
$ ls
_config.yml node_modules package-lock.json package.json scaffolds source themes
Le _config.yml Le fichier contient la configuration de votre blog Hexo. La plupart des paramètres du blog peuvent être modifiés à partir d'ici.
Les node_modules Le répertoire contient tous les packages dont Hexo a besoin et ceux dont il dépend.
Le package.json contient une liste de tous les packages et leurs numéros de version dont Hexo a besoin.
Le package-lock.json le fichier est généré automatiquement par npm chaque fois que vous effectuez une installation ou une modification du package Hexo. Il contient des informations sur les packages et les versions installées ou modifiées.
Les scaffolds Le répertoire contient les modèles sur lesquels vos articles et pages de blog seront basés.
Le source Le répertoire 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 _ (traits de soulignement) est ignoré par Hexo sauf le _posts dossier. Pour l'instant, le répertoire est vide car nous n'avons rien écrit ni publié.
Les themes répertoire contient les thèmes de votre blog.
Configurer Hexo
Ouvrez le _config.yml fichier à éditer.
$ nano _config.yml
Vérifiez 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. Changez le nom de votre site, définissez un sous-titre si vous le souhaitez. Ajoutez une description de votre site et quelques mots clés pour le décrire. Modifiez le nom de l'auteur et le fuseau horaire de votre site.
Ensuite, vérifiez l'URL section 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
Remplacez l'URL de votre site par votre nom de domaine. Assurez-vous d'utiliser HTTPS dans votre URL car nous installerons SSL plus tard.
Si vous ne voulez pas que l'URL de votre site affiche index.htm l à la fin de chaque page, vous pouvez modifier les deux options trailing_index et trailing_html à false .
Il y a quelques autres paramètres que vous devriez activer.
Modifiez la valeur de default_layout variable de post à draft . Cela créera de nouveaux messages sous forme de brouillons, vous devrez donc les publier avant qu'ils n'apparaissent sur le blog.
Modifier la valeur du post_asset_folder variable à true . Cela vous permettra d'avoir des dossiers d'images individuels pour chaque article au lieu d'un seul dossier d'images pour tous les articles.
Enregistrez le fichier en appuyant sur Ctrl+X et en saisissant Y lorsque vous y êtes invité.
Installer un thème
Hexo est livré avec un thème par défaut nommé Paysage. Vous pouvez passer à un thème différent en installant un autre thème Hexo disponible sur sa page Thèmes.
Tous les thèmes Hexo sont disponibles via Github, vous devez donc cloner le référentiel Github du thème.
Pour notre tutoriel, nous installons le thème Next. Basculez vers le répertoire Hexo et clonez le référentiel Github du thème dans les themes répertoire.
$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Modifiez le /var/www/hexo/_config.yml fichier pour changer le thème de Paysage à Suivant.
$ nano _config.yml
Modifiez la variable de thème pour changer de thème.
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Vous pouvez modifier les paramètres du thème en modifiant le /var/www/hexo/themes/next/_config.yml fichier.
Créer et publier une publication
Il est temps de créer notre premier article.
$ hexo new first-post
INFO Validating config
INFO Created: /var/www/hexo/source/_drafts/first-post.md
Ouvrez le nouveau message pour le modifier.
$ nano ./source/_drafts/first-post.md
Chaque publication doit avoir sa front-matter d'installation. Front-matter est un court bloc de JSON ou YAML qui configure les détails essentiels comme le titre du message, la date de publication, les catégories, les balises, etc. Remplacez 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 vous souhaitez insérer une image dans votre message, ajoutez le code suivant dans votre message.
{% asset_img "example.jpg" "This is an example image" %}
Après cela, copiez le fichier example.jpg au \source\_posts\first-post répertoire d'où seront extraites toutes les images de votre premier message.
Enregistrez le fichier en appuyant sur Ctrl+X et en saisissant Y lorsque vous y êtes invité une fois que vous avez fini d'écrire le message.
Ensuite, publiez le message.
$ hexo publish first-post
INFO Validating config
INFO Published: /var/www/hexo/source/_posts/first-post.md
Ce message sera visible une fois que nous aurons hébergé le blog.
Installer un plugin
Hexo a quelques centaines de plugins que vous pouvez installer. Vous pouvez installer un ou plusieurs plugins selon votre utilisation.
Tous les plugins Hexo sont des packages Node.js et hébergés sur Github où vous pouvez trouver leurs détails d'installation et de configuration.
Pour notre tutoriel, nous allons installer le hexo-filter-nofollow plugin.
Assurez-vous d'abord d'être dans le répertoire hexo, puis installez le plugin.
$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save
Ouvrez le fichier de configuration Hexo pour le modifier.
$ sudo nano _config.yml
Collez le code suivant à la fin du fichier.
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'
Le enable L'option active le plugin. Le field L'option 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 publications. Le exclude l'option met en liste blanche les domaines sur lesquels l'attribut nofollow ne sera pas ajouté.
Tester le serveur
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
Vous pouvez maintenant lancer l'URL http://yourserverIP:4000 dans votre navigateur et vous verrez la page suivante.
Quittez le serveur en appuyant sur Ctrl + C au terminal.
Générer des fichiers statiques Hexo
Le serveur de test de Hexo peut servir le blog de manière dynamique ainsi qu'à travers les 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 servirons les fichiers statiques de Hexo à l'aide du serveur Nginx.
Exécutez 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 /var/www/hexo/public dossier. Nous utiliserons le serveur Nginx pour servir les fichiers de ce dossier.
Installer et configurer Nginx
Installez le serveur Nginx.
$ sudo apt install nginx
Créez et ouvrez le fichier de configuration Hexo pour Nginx.
$ sudo nano /etc/nginx/sites-available/hexo.conf
Collez-y le code suivant.
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;
}
Enregistrez le fichier en appuyant sur Ctrl+X et en saisissant Y lorsque vous y êtes invité.
Activez la configuration.
$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
Ouvrez le /etc/nginx/nginx.conf fichier à éditer.
$ sudo nano /etc/nginx/nginx.conf
Collez la ligne suivante avant la ligne include /etc/nginx/conf.d/*.conf
server_names_hash_bucket_size 64;
Changez la valeur de la variable types_hash_max_size de 2048 à 4096.
types_hash_max_size 4096;
Appuyez sur Ctrl + X pour fermer l'éditeur et appuyez sur Y lorsque vous êtes invité à enregistrer le fichier.
Testez pour vous assurer qu'il n'y a pas d'erreurs de syntaxe dans votre configuration.
$ sudo nginx -t
S'il n'y a pas de problème, redémarrez le serveur Nginx.
$ sudo systemctl restart nginx
Installer SSL
Il est temps d'installer SSL en utilisant le service Let's Encrypt pour notre blog hexo.
Pour cela, installez Certbot.
$ sudo apt install certbot
Arrêtez Nginx car cela interférera avec le processus Certbot.
$ sudo systemctl stop nginx
Générez le certificat. Nous devons également créer un certificat DHCParams.
$ 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 renouveler automatiquement le SSL. Pour ouvrir l'éditeur crontab, exécutez 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 vous l'exécutez pour la première fois, il vous sera demandé de choisir l'éditeur pour éditer les tâches Cron. Choisissez 1 pour l'éditeur Nano.
Collez la ligne suivante en bas.
25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”
Le travail cron ci-dessus exécutera certbot à 2h25 tous les jours. Vous pouvez le changer en tout ce que vous voulez.
Enregistrez le fichier en appuyant sur Ctrl + X et en saisissant Y lorsque vous y êtes invité.
Mettre à jour Hexo
Basculez vers le dossier Hexo.
$ cd /var/www/hexo
Si vous passez à une version majeure de Hexo, vous devez mettre à jour le package.json dossier. Ouvrez-le pour le modifier. Vous pouvez passer directement à la commande de mise à jour pour mettre à jour les versions mineures.
$ nano package.json
Modifiez la ligne suivante sous les dependencies rubrique.
"hexo": "^5.0.0",
Changez la valeur 5.0.0 à la prochaine version chaque fois qu'elle sortira dans le futur. Par exemple, si Hexo 6.0 est sorti, changez-le en suivant.
"hexo": "^6.0.0",
Enregistrez le fichier en appuyant sur Ctrl + X et en saisissant Y lorsque vous y êtes invité.
Exécutez la commande suivante pour mettre à jour hexo.
$ npm update
Déployer Hexo
Hexo peut non seulement être hébergé directement sur votre serveur, mais peut également être déployé directement sur Git, Netlify, Vercel, Heroku, OpenShift et diverses autres méthodes.
La plupart des plugins de déploiement nécessitent que vous installiez un plugin. Pour notre tutoriel, nous allons configurer le déploiement de Hexo sur Netlify. Si vous souhaitez déployer sur Netlify, vous n'avez 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 référentiel Git. Mais pour notre objectif, nous publierons directement le site statique sur Netlify à l'aide de son outil CLI.
Installez Netlify CLI.
$ sudo npm install netlify-cli -g
Vous pouvez vérifier si l'outil CLI a été installé.
$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0
Connectez-vous à 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
Copiez le login du terminal dans votre navigateur et connectez-vous à votre compte Netlify pour vous authentifier.
Vous pouvez vérifier si vous êtes connecté en utilisant la commande suivante.
$ netlify status
???????????????????????
Current Netlify User ?
???????????????????????
Name: Your Name
Email: [email protected]
Teams:
Your Team's team: Collaborator
Basculez vers le répertoire public de Hexo.
$ cd /var/www/hexo/public
Déployez 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.
Choisissez par les touches fléchées pour créer un nouveau site et entrez un nom pour votre site. Entrez . comme répertoire à déployer à partir duquel fait référence au répertoire courant.
Vous recevrez un brouillon d'URL. Copiez l'URL et chargez-la dans un navigateur. Si tout semble correct, exécutez la commande suivante pour effectuer un déploiement en production.
$ netlify deploy --prod
Votre site devrait maintenant être en ligne. Vous pouvez ajouter un domaine personnalisé dans les paramètres de Netlify pour le faire pointer vers un vrai site.
Chaque fois que vous publiez un nouveau message et générez de nouveaux fichiers, exécutez la commande suivante à partir du répertoire principal de 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 vous avez des questions, postez-les dans les commentaires ci-dessous.