Hexo Quick Start

Rédigé par Oussama MEDINI, consultant IT, XINORYA

Aujourd’hui, je vais vous présenter comment générer votre propre blog avec le générateur de blog Hexo et le deployer avec Github, CircleCI et AWS S3.

Allez on commence :

Pour commencer, Hexo nécessite l’installation de Node.js & Git. Une fois toutes les exigences installées, exécutez la commande suivante pour installer Hexo CLI:

1
$ npm install -g hexo-cli

Ensuite, créez un nouveau projet vide:

1
$ hexo init <nom de votre projet>

Modifiez les paramètres globaux du blog dans le fichier _config.yml:

1
2
3
4
5
6
7
8
# Site
title: <nom de votre projet>
subtitle: <sous titre>
description: <Description >
keywords: <des mots clé pour votre blog>
author: <Votre nom>
language: fr
timezone: Europe/Paris

Démarrez un serveur local avec “hexo server”. Accédez à http://localhost:4000. Vous verrez le post de test prédéfini «Hello World» d’Hexo s’afficher.

Si vous souhaitez changer le thème par défaut, il vous suffit d’en choisir un ici.

Vous avez maintenant presque terminé la configuration de votre blog. Il est temps d’écrire votre premier article. Pour créer un nouvvel article, utilisez la commande suivante:

1
$ hexo new <POST_TITLE>

Connectez-vous à AWS Management Console, accédez au tableau de bord S3 et créez un compartiment (bucket) S3 avec le nom de votre project.

NB: Le compartiment doit être public.

Dans les proriétés de compartiment activer l’option Hébergement de site web statique et indiquer le document d’index : index.html.

Afin d’automatiser le processus de déploiement du blog en production à chaque fois qu’un nouvel article est publié, nous allons configurer un pipeline CI / CD en utilisant CircleCI.

Connectez-vous à CircleCI en utilisant votre compte GitHub, puis ajoutez le fichier .circleci/config.yml à votre projet “dossier racine” :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
version: 2.1

jobs:
build:
docker:
- image: jtredoux/node-aws
working_directory: ~/<Nom de votre repo git dans github >
steps:
- checkout
- run:
name: Install Hexo CLI
command: npm install -g hexo-cli
- restore_cache:
keys:
- npm-deps-{{ checksum "package.json" }}
- run:
name: Install NPM packages
command: npm install
- save_cache:
key: node-cache-{{ checksum "package-lock.json" }}
paths:
- ./node_modules
- run:
name: clean hexo
command: hexo clean
- run:
name: Generate blog
command: hexo generate
- persist_to_workspace:
root: public
paths:
- "*"
- run:
name: Configure AWS Access Key ID
command: aws configure set aws_access_key_id <Votre Id de clé d'accès >
- run:
name: Configure AWS Secret Access Key
command: aws configure set aws_secret_access_key <votre Clé d'accès secrète >
- run:
name: Configure AWS default region
command: aws configure set region <region>
- run:
name: Push files to AWS
command: aws s3 sync public/ s3://<nom de compartiment dans s3> --acl public-read

NB : Assurez-vous de définir l’ID de clé d’accès AWS et la clé d’accès secrète dans la page Paramètres de votre projet sur CircleCI.

Désormais, à chaque fois que vous transférez des modifications à votre référentiel GitHub, CircleCI déploiera automatiquement les modifications vers S3.

Dans le fichier yaml, j’ai défini une image docker qui contient Node.js et aws-cli et qui permet d’exécuté les commandes des hexo-cli et aws-cli.

Au final :

Vous trouvez votre l’url de votre blog dans l’option Hébergement de site web statique : Point de terminaison : <…>