TOC

Comment créer un blog avec Hexo On Ubuntu 14.04

introduction

Hexo est un framework de blogging statique construit sur https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for- production-sur-ubuntu-14-04 [Node.js]. En utilisant Hexo, vous pouvez publier des documents Markdown sous la forme de messages de blog. Les articles et le contenu d’un blog sont traités et convertis au format HTML / CSS, qui provient des fichiers de thème de modèle par défaut ou personnalisés (un peu comme d’autres générateurs de blogs statiques, tels que Jekyll et Ghost). Tous les logiciels dans Hexo sont modulaires, vous pouvez donc installer et configurer exactement ce dont vous avez besoin.

Ce tutoriel va configurer Hexo avec un déploiement supporté par GitHub et Nginx.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de:

Étape 1 - Installation et initialisation de Hexo

Cette section initiale contient tout ce dont vous avez besoin pour que Hexo soit opérationnel sur votre serveur.

Tout d’abord, assurez-vous que les packages système sont à jour.

sudo apt-get update && sudo apt-get upgrade

Plusieurs packages et composants logiciels constituent le framework de blogs Hexo. Ici, nous allons détailler deux des plus essentiels en utilisant + npm +, le gestionnaire de paquets Node.js.

Le premier, + hexo-cli +, est le plus important et fournit les commandes Hexo de base.

npm install hexo-cli -g

Le second, + hexo-server +, est le serveur intégré qui peut être utilisé pour prévisualiser et tester votre blog avant son déploiement.

npm install hexo-server -g

Il y a beaucoup plus de forfaits disponibles; Ce sont simplement les éléments de base dont vous avez besoin pour créer votre blog Hexo. Vous pouvez parcourir davantage de packages disponibles dans le cadre de Hexo Framework sur npm search.

Ensuite, nous devons configurer les fichiers de base de votre nouveau blog. Heureusement, Hexo fait tout le travail de base avec une seule commande. Tout ce que vous avez à faire est de fournir un chemin ou un dossier dans lequel vous voulez que les fichiers de configuration de blog résident.

Une option pratique est le répertoire de base de votre utilisateur.

hexo init ~/hexo_blog

En une seconde ou deux, vous obtiendrez des résultats:

Output. . .

INFO  Copying data to ~/hexo_blog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

. . .

Ensuite, déplacez-vous vers le répertoire avec vos fichiers de configuration.

cd ~/hexo_blog

Ensuite, exécutez la commande d’installation susmentionnée.

npm install

Vous pouvez ignorer les avertissements de dépendance facultatifs à partir de + npm +. Après quelques secondes de traitement, nous aurons nos fichiers de configuration de base.

Étape 2 - Configuration du fichier de configuration principal de Hexo

Jetons un coup d’œil aux fichiers de configuration de base de notre répertoire Hexo.

ls -l
Output-rw-rw-r--   1 sammy sammy 1483 Jan 11 12:30 _config.yml
drwxrwxr-x 191 sammy sammy 4096 Jan 11 12:31 node_modules
-rw-rw-r--   1 sammy sammy  442 Jan 11 12:30 package.json
drwxrwxr-x   2 sammy sammy 4096 Jan 11 12:30 scaffolds
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 source
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 themes

Parmi tous les fichiers présents, le fichier + _config.yml + est sans doute le plus important. Tous les paramètres de base sont stockés ici et sont au cœur du blog. Si vous devez modifier quelque chose à l’avenir, il est probable que ce fichier figure dans ce fichier.

Nous allons ensuite configurer une personnalisation de base en passant par + _config.yml + pièce par pièce. Ouvrez + _config.yml + avec + nano + ou votre éditeur de texte préféré.

nano _config.yml

En haut du fichier, vous devriez voir une section intitulée * Site *:

Original ~ / hexo_blog / _config.yml

. . .

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

. . .

Les quatre premières lignes représentent le nom de votre blog, un sous-titre approprié, une description et le nom de l’auteur. Vous pouvez choisir ce que vous voulez pour ces options. Notez que tous les thèmes Hexo n’affichent pas ces données. Elles servent donc de métadonnées de site, le cas échéant.

Les deux options suivantes sont la langue et le fuseau horaire. L’option langue utilise uniquement les codes 2-letter ISO-639-1. Le fuseau horaire est défini par défaut sur le fuseau horaire de votre serveur et utilise la mise en forme ?tztz ”. Si vous décidez de modifier l’un ou l’autre, assurez-vous qu’ils sont dans ces formats.

Voici quelques exemples de valeurs:

Exemple ~ / hexo_blog / _config.yml

. . .

#Site
title:
subtitle:
description:
author:
language:
timezone:

. . .

La section suivante est la section * URL *. Ici, nous voulons changer l’option URL. Comme nous n’avons actuellement pas de nom de domaine pour notre serveur, nous pouvons entrer ici l’adresse IP pour le paramètre + url: +.

~ / hexo_blog / _config.yml

. . .

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

. . .

La dernière option que nous voulons modifier est + default_layout: + dans la section * Écriture * un peu plus bas. Cela crée de nouveaux articles en tant que brouillons, ils doivent donc être publiés avant d’être visibles sur le site Web du blog.

Réglez-le sur + draft + maintenant comme nous l’avons fait ci-dessous:

~ / hexo_blog / _config.yml

. . .

# Writing
new_post_name: :title.md # File name of new posts
default_layout:
titlecase: false # Transform title into titlecase

. . .

Enregistrez et quittez le fichier pour l’instant. Nous reviendrons brièvement sur ce fichier pour les étapes de déploiement vers la fin du didacticiel.

Étape 3 - Créer et publier un nouveau poste

Le processus de création d’un message (ou d’un brouillon, comme celui que nous avons configuré précédemment) commence par la commande suivante, où * premier message * est le nom du message que vous souhaitez publier.

hexo new

Vous devriez voir la sortie suivante:

OutputINFO  Created: ~/hexo_blog/source/_drafts/first-post.md

Ouvrez le nouveau message pour le modifier.

nano ~/hexo_blog/source/_drafts/first-post.md
Chaque publication doit avoir sa front-matter configurée. Front-matter est un court bloc de JSON ou YAML qui configure des paramètres tels que le titre de votre message, la date de publication, les balises, etc. La fin de la matière première est désignée par le premier marqueur + --- + ou `+ ;

+ + '. Après la discussion, vous pouvez écrire votre blog avec la syntaxe Markdown.

Remplacez le contenu par défaut dans + first-post.md + par les options d’exemple ci-dessous dans le fichier pour démarrer la publication. Vous pouvez les personnaliser si vous le souhaitez.

Exemple ~ / hexo_blog / source / _drafts / first-post.md

title: DigitalOcean's First Post
tags:
 - Test
 - Blog
categories:
 - Hexo
comments: true
date: 2015-12-31 00:00:00
---

## Markdown goes here.

**This is our first post!**

Enregistrez et quittez le fichier.

Le fichier Markdown que nous venons de créer sera contenu dans + ~ / hexo_blog / source / _drafts + jusqu’à ce que nous le publions. Les messages contenus dans le dossier + _drafts + ne seront pas visibles par les visiteurs du site Web.

Ensuite, publiez le message pour qu’il soit _ accessible_ aux visiteurs.

hexo publish first-post

Cela se traduit par:

OutputINFO  Published: ~/hexo_blog/source/_posts/first-post.md

Le message sera désormais visible une fois que nous aurons commencé à héberger le blog.

Étape 4 - Exécution du serveur de test

Les fichiers de configuration précédents sont maintenant terminés et un exemple de publication est prêt. Ensuite, nous allons démarrer le serveur de test.

hexo server

Il est possible de forcer le serveur de test à afficher les publications dans le dossier + _drafts +. Pour ce faire, incluez l’option + -d + lors de l’exécution de la dernière commande.

Maintenant que le serveur de test est en cours d’exécution, vous pouvez afficher votre blog en visitant + http: //: 4000 / + dans votre navigateur préféré. Vous verrez la publication de test prédéfinie «Hello World» de Hexo et la publication de test que nous venons de créer.

image: https: //assets.digitalocean.com/articles/hexo/07hIfZs.png [Image du blog Hexo de DigitalOcean]

Quittez le serveur de test en appuyant sur + CTRL + C + dans le terminal.

Le serveur de test est mieux utilisé pour prévisualiser les modifications et les ajouts à votre blog. Une fois que vous êtes satisfait de son apparence, il est temps de le déployer sur le Web.

Étape 5 - Configuration du déploiement de Git

Il existe différentes manières de déployer ce que nous avons fait jusqu’à présent avec Hexo. L’approche de ce didacticiel consiste à utiliser Git pour stocker les fichiers statiques, les points d’accroché pour les transférer, puis Nginx pour les héberger. Cependant, Heroku, Git, Rsync, OpenShift, FTPSync, etc., sont pris en charge avec des packages de framework supplémentaires.

Pour continuer, vous aurez besoin d’un référentiel Git pour stocker les fichiers HTML statiques générés par Hexo. Pour que cela reste simple, nous utiliserons un référentiel Git public fourni par GitHub.

Créez un nouveau référentiel sur GitHub nommé * hexo_static * en suivant les étapes de création repository. Veillez à sélectionner l’option «Public» et à cocher la case * Initialiser ce référentiel avec un fichier README *.

Une fois le référentiel créé, ouvrez le fichier de configuration principal Hexo pour le modifier.

nano _config.yml

Au bas du fichier, il y a une section intitulée * Déploiement *:

Original ~ / hexo_blog / _config.yml

. . .

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type:

Remplissez les options pour + deploy: + comme indiqué ci-dessous. Notez que la ligne + repo + devrait contenir l’URL du référentiel Git que vous venez de créer. Veillez donc à remplacer ++ par votre propre nom d’utilisateur pour votre compte GitHub.

~ / hexo_blog / _config.yml

deploy:
 type:

Enregistrez et quittez le fichier.

Comme nous avons choisi d’utiliser Git pour le déploiement, nous avons besoin du package Hexo qui envoie notre balisage statique au référentiel Git.

Utilisez + npm + pour l’installer.

npm install hexo-deployer-git --save

Vous pouvez maintenant tester le déploiement dans le référentiel + hexo_static + et lui donner son premier commit automatisé Hexo via:

hexo generate && hexo deploy

Entrez vos informations d’authentification GitHub lorsque vous y êtes invité.

Voici à quoi ressemble une sortie réussie (ou similaire) après l’utilisation de ces commandes. Moins les générations de fichiers et les insertions Git:

OutputTo username
* [new branch]      master -> master
Branch master set up to track remote branch master from username
INFO  Deploy done: git

Étape 6 - Configuration de Nginx

Nous allons utiliser une configuration de serveur Web Nginx de base pour servir le blog Hexo, car Nginx sert très bien le contenu statique, et notre blog ne contiendra jamais que des fichiers statiques. Il existe d’autres options viables qui fonctionnent également, telles que les pages GitHub ou les serveurs Web tels que Apache, mais ce choix en particulier garantit une efficacité et un contrôle personnel de l’hébergement.

Tout d’abord, créez les répertoires système, que nous demanderons à Nginx d’utiliser pour l’hébergement.

sudo mkdir -p /var/www/hexo

Donnez ensuite à votre utilisateur Ubuntu actuel la propriété de ces répertoires système de serveur Web.

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

Mettez à jour les permissions conformément à la propriété.

sudo chmod -R 755 /var/www/hexo

Ouvrez le bloc de serveur + default + Nginx pour le modifier.

sudo nano /etc/nginx/sites-available/default

En ignorant les zones et les lignes du fichier qui sont commentées, modifiez la partie active du code de configuration afin que la directive + root + pointe vers le répertoire + / var / www / hexo +.

/ etc / nginx / sites-available / default

. . .

server {
   listen 80 default_server;
   listen [::]:80 default_server ipv6only=on;

   root ;
   index index.html index.htm;

. . .

Enregistrez et quittez le fichier. Si, à l’avenir, vous définissez un nom de domaine pour ce serveur, revenez dans ce fichier et remplacez l’entrée + nom_serveur + dans le même bloc par votre nouveau nom de domaine.

Enfin, redémarrez le service Nginx pour que les modifications prennent effet.

sudo service nginx restart

Étape 7 - Créer des hameçons Git

Dans cette étape, nous allons lier le référentiel * hexo_static * à un autre référentiel Git afin de pouvoir envoyer les fichiers HTML statiques dans le répertoire du serveur Web (lorsqu’ils sont déclenchés).

Commencez par initialiser un nouveau référentiel Git vide (pas sur GitHub). Le seul but de ce référentiel sera de transférer le contenu de notre référentiel + hexo_static + dans le répertoire du serveur Web.

git init --bare ~/hexo_bare

Créez un nouveau fichier hook dans le répertoire + hooks + généré par Git:

nano ~/hexo_bare/hooks/post-receive

Ajoutez les deux lignes de code ci-dessous dans le fichier. Ceci spécifie l’arbre de travail Git (qui contient le code source) et le répertoire Git (qui contient les paramètres de configuration, l’historique, etc.).

~ / hexo_bare / hooks / post-receive

#!/bin/bash

git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f

Enregistrez et quittez le fichier une fois terminé.

Rendre ce fichier + post-receive + exécutable.

chmod +x ~/hexo_bare/hooks/post-receive

Nous devons maintenant cloner le référentiel de déploiement + hexo_static +, que nous avons créé à l’étape 5, sur notre serveur. Assurez-vous de remplacer ++ dans cette prochaine commande par votre propre nom d’utilisateur pour votre compte GitHub.

git clone https://github.com//hexo_static.git ~/hexo_static

Déplacer dans le référentiel cloné.

cd ~/hexo_static

Pour finir, ajoutez notre référentiel nu antérieurement en tant que télécommande Git nommée * live *.

git remote add live ~/hexo_bare

Étape 8 - Création du script de déploiement

Un court script shell peut être utilisé pour démarrer et déclencher l’ensemble du processus de déploiement que nous avons configuré ici. Cela signifie que nous n’aurons pas besoin d’exécuter plusieurs commandes Hexo individuellement ni de déclencher le hook Git avec plusieurs commandes.

Revenez dans notre répertoire de blog Hexo d’origine et créez un fichier pour le script de déploiement.

cd ~/hexo_blog
nano hexo_git_deploy.sh

Collez le code suivant dans le fichier:

hexo_blog / hexo_git_deploy.sh

#!/bin/bash

hexo clean
hexo generate
hexo deploy

( cd ~/hexo_static ; git pull ; git push live master )

Enregistrez et quittez le fichier.

Le script contient trois commandes + hexo +:

  • + clean + supprime tous les fichiers statiques générés précédemment dans le dossier public.

  • + generate + crée les fichiers HTML statiques à partir de notre démarque, dans le dossier public.

  • + deploy + envoie les fichiers statiques nouvellement générés sous forme de validation au référentiel Git «réel» défini précédemment dans + _config.yml +.

La dernière ligne, + (cd ~ / hexo_static; git pull; git push live master) +, déclenche le hook Git et met à jour le répertoire d’hébergement du serveur Web avec nos fichiers statiques HTML.

Assurez-vous de sauvegarder et de quitter le fichier une fois rempli.

Rendre le nouveau script de déploiement exécutable pour effectuer cette étape.

chmod +x hexo_git_deploy.sh

Étape 9 - Exécution du script de déploiement

Exécutez le script de déploiement que nous avons créé à l’étape précédente pour tester le processus de déploiement global.

./hexo_git_deploy.sh

Attendez que les commandes et le traitement soient terminés, en entrant les détails d’authentification GitHub dans le processus. Ensuite, jetez un coup d’oeil aux fichiers du répertoire + / var / www / hexo +.

ls /var/www/hexo
Output2015  2016  archives  categories  css  fancybox  index.html  js  tags

Le répertoire de votre serveur Web doit maintenant être rempli avec les fichiers du site Web du blog, ce qui signifie que si vous accédez au serveur Web via votre navigateur, vous accéderez au blog.

Visitez + http: /// + dans votre navigateur préféré pour voir votre blog en direct (sans utiliser le serveur de test).

Pour déployer de nouvelles modifications de blog à l’avenir, il vous suffit de réexécuter le script + hexo_git_deploy.sh +. N’oubliez pas de tester les nouvelles publications à la recherche d’erreurs avec les commandes + hexo server + ou + hexo server -d + avant le déploiement.

Étape 10 - Examen du système de fichiers Hexo (facultatif)

Cette section est facultative et fournit des informations générales sur le reste du système de fichiers Hexo. Aucun de ces fichiers n’a besoin d’être modifié ou modifié pour ce didacticiel, mais il est bon de connaître l’objectif général de chacun d’entre eux si vous souhaitez les utiliser ultérieurement.

La disposition des fichiers et des répertoires ressemble à ceci:

Hexo files and directories├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

node_modules

Dans ce répertoire, Hexo stocke les modules que vous avez téléchargés via + npm + pour pouvoir être utilisés avec votre blog. À la fin de ce didacticiel, il ne restera que les packages que nous avons téléchargés à l’étape 1.

Outputhexo  hexo-generator-archive  hexo-generator-category  hexo-generator-index  hexo-generator-tag  hexo-renderer-ejs  hexo-renderer-marked  hexo-renderer-stylus  hexo-server

Certains de ces modules inconnus sont regroupés dans les packages principaux. Il n’ya généralement aucun besoin réel de modifier ou de supprimer les fichiers ici.

package.json

Ce fichier JSON contient les configurations et versions de packages Hexo que Hexo utilisera pour votre blog.

Si vous devez mettre à jour, rétrograder ou supprimer manuellement un paquet *, vous pouvez le faire en modifiant les valeurs indiquées ici. Habituellement, vous ne devez le faire que si un conflit survient au sein de Hexo, ce qui est relativement rare.

échafaudages

Lors de la création de nouveaux articles, Hexo peut les baser sur des fichiers modèles du dossier + scaffolds +.

Vous devez d’abord créer des fichiers de modèle et les placer ici pour les utiliser. Cette fonctionnalité est facultative et nécessaire uniquement si vous souhaitez répéter les mises en page pour vos futures publications Hexo.

la source

Les articles que vous publiez et que vous souhaitez rendre visibles au public sont conservés dans + _posts +, et une fois générés, le dossier + _drafts + ainsi que toutes les autres pages créées par l’utilisateur y sont également conservés.

La grande majorité du contenu Markdown de votre blog est placée à l’intérieur d’ici par Hexo dans l’un de ces sous-dossiers.

des thèmes

Les thèmes personnalisés, une fois téléchargés, doivent être conservés ici. La plupart des thèmes ont leur propre fichier + _config.yml + pour conserver leurs paramètres de configuration équivalents. Nous avons collé avec le thème par défaut pour les besoins de ce guide.

Conclusion

Hexo représente bien plus que ce qui était décrit dans ce guide, mais c’est un bon début pour la création de votre nouveau site de blogs. La documentation for Hexo est très concise si vous souhaitez en savoir plus. La prochaine étape vers le développement de votre blog consiste à installer l’un des custom themes disponibles pour Hexo.

Related